04-CSS再认识

来源：互联网发布：mac删除虚拟机编辑：程序博客网时间：2024/06/05 19:57

新的属性：

text-indent：作用是首行缩进，2em是两个文本的距离，大概是16px
text-align：作用：设置文本的位置
取值：center：设置文本在容器的水平方向中居中
left：左边对齐
right：右边对齐
text-decoration：作用：设置文本的装饰
underline：下划线
none：没有装饰
只要记住这两个就好了，如果要用到其他的再查手册。
margin：0 auto 设置容器水平居中
容器的位置不会影响里面的内容的位置

!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>css在认识</title>    <style>     /*text-indentn标签的使用*/       p.indent{            width: 500px;            background: #AAA;            /*设置我们的首行缩进*/            text-indent: 2em;       }        /*text-align标签的使用*/       p.align{        /*居中*/         text-align: center;         /*左边*/         text-align: left;         /*右边*/         text-align: right;         width: 500px;         height: 500px;         background: #AAA;       }      img{        /*居中*/        text-align: center;      }      /*text-decoration标签的使用*/      a{        color: red;        /*没有装饰*/        text-decoration: none;        /*下划线*/        text-decoration: underline;        /*删除线*/        text-decoration: line-through;        /*上面一条线*/        text-decoration: overline;      }      /*margin使用*/      div{         width: 500px;         height: 500px;         background: #AAA;         /*容器里的文本居中*/         text-align: center;         /*容器居中*/         margin: 0 auto;      }    </style></head><body><p class="indent">不同国家的人民，尽管语言有别，生活方式不同，但对我们共同生活的这个世界，都有一些共同期待。我们要努力建设一个远离恐惧、普遍安全的世界，建设一个远离贫困、共同繁荣的世界，建设一个远离封闭、开放包容的世界，建设一个山清水秀、清洁美丽的世界。习近平总书记提出的建设美好世界的这“四点倡议”，把握的是世界各国人民对美好世界的共同期待，倡导的是把美好梦想变成灿烂现实的天下情怀和政党责任。</p> <p class="align">这是align的作用</p> <img src="img/logo.gif" alt=""> <a href="#">这是一个a标签</a> <div>这是一段文本</div></body></html>

CSS三大特性：

1继承

子元素可以继承父元素的样式
什么样的属性可以继承：text-,font-,line-,color
具体的应用：在写页面之前我们会通过body设置一个字体，来将页面所有的标签都继承这个属性。
继承的特殊性：
1：a标签的颜色不能继承，只能自己设置。
2:h标签的大小不能继承，只能自己设置
2.div的高度由内容决定，如果没有内容高度就是0，但是宽度默认由父元素继承过来。

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>三大特性</title>    <style>        body{            color: red;            font:normal normal 14px "楷体";        }        .father        {            font-size: 19px;        }    </style></head><body>    <p>夏园园</p>    <p>夏妹妹</p>    <p>夏爸爸</p>    <p>夏妈妈</p>    <div>       <p>我也继承body的特性o</p>    </div>    继承的特殊性：<br>    <div class="father">          <h1>我是h1标签，我的大小不能继承</h1>         <a href="#">这是a标签，我不能继承颜色，只能自己设置</a>         <p>我是p标签我继承了father属性，也可以继承body爷爷的属性</p>    </div>    <div class="one">        <div class="two"></div>    </div></body></html>

2层叠性

层叠是浏览器处理冲突的一种特性
如果一个属性通过两个选择器设置到同一个元素上面，那么一个属性就会将另一个属性设置层叠掉。

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title>    <style>          body {            font-size: 20px;          }          div {            font-size: 30px;          }    </style></head><body>     <p>刘亦菲</p>    <div>刘亦菲</div></body></html>

3优先级

优先级大到小：
！important
行内样式
id选择器
类选择器
标签选择器
通配符*
继承

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title>    <style>        #ffj {            color: yellow ;        }/* id */        .ffj {            color: blue ;        }/* 类 */        div {            color: pink ;        }/*标签*/        * {            color: purple ;         } /* 通配符 */        body {            color: red !important;        }/*继承*/    </style></head><body>     我可以用!important的红色    <p>我没有继承body!important的红色</p>    <div style="color:gray" class="ffj" id="ffj">菲菲姐 我也没有继承body!important的红色</div></body></html>

在计算权重的时候，要先判断是不是有继承。就是查看是不是直接作用在当前标签上，要是从父，爷爷也可以元素继承过来的话就直接淘汰不用算权重。
例子：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html>    <head>        <meta http-equiv="content-type" content="text/html;charset=utf-8" />        <meta name="keywords" content="关键词1,关键词2,关键词3" />        <meta name="description" content="对网站的描述" />        <title>第3题</title>        <style type="text/css">            div p{                  color:red;            }            #father{ /*继承div不用算权重*/                color:red;            }            p.c2{  /*直接作用在P标签上*/                color:blue;            }            /*1.0是否继承2.0权重*/        </style>    </head>    <body>        <div id="father" class="c1">            <p class="c2">                试问这行字体是什么颜色的？            </p>        </div>    </body></html>

选择器的工作原理：
选择器在查找元素的时候不是从左往右找而是从右往左找

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html>    <head>        <meta http-equiv="content-type" content="text/html;charset=utf-8" />        <meta name="keywords" content="关键词1,关键词2,关键词3" />        <meta name="description" content="对网站的描述" />        <title>第4题</title>        <style type="text/css">            div div{ /*找到一个元素div,判断它的父元素是否是div*/                color:blue;            }/*important*/            /*从右往左找*/            div{                color:red;            }        </style>    </head>    <body>        <div>            文字（红色）            <div>                文字（蓝色）                <div>                    试问这行字体是什么颜色的？（蓝色）                </div>            </div>        </div>    </body></html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><head>    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">    <title>Document</title>    <style type="text/css">        div div div div div div div div div div div div{              color:red;        }        .me{             color:blue;        }    </style></head><body>    <div>        <div>            <div>                <div>                    <div>                        <div>                            <div>                                <div>                                    <div>                                        <div>                                            <div>                                                <div class="me">试问这行文字是什么颜色的（蓝色的）                                                </div>                                            </div>                                        </div>                                    </div>                                </div>                            </div>                        </div>                    </div>                </div>            </div>        </div>    </div></body></html>

这个就是同级判断颜色。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><head>    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">    <title>Document</title>    <style type="text/css">        span{            color:green;        }        .nav{            color:red;        }        .nav ul li{            color:blue;        }    </style></head><body>    <div class="nav">        <ul>            <li><span>文字我是绿色</span></li>            <li>我是蓝色<span>文字</span></li>            <li><span>文字</span></li>            <li><span>文字</span></li>        </ul>    </div></body></html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><head>    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">    <title>Document</title>    <style type="text/css">        #box1 div.spec2 p , #box1 #box2 p{            color:blue;        }        #box1 #box3 p{            color:green;        }    </style></head><body>    <div id="box1" class="spec1">        <div id="box2" class="spec2">            <div id="box3" class="spec3">                <p>文字我是绿色啊</p>            </div>        </div>    </div></body></html>

背景

background
background-color：背景颜色
background-image：背景图片
写法就是：background-image：url（图片的路径）当图片小于容器大小的时候图片会默认平铺。
background-repeat：设置图片是不是平铺
取值：no-repeat不平铺
repeat-x 水平方向平铺
repeat-y 垂直方向平铺
repeat：默认的平铺
background-position：x y;
注意：x，y可以是具体的数值也可以是英文单词
x： left center right
y：top center botton

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title>    <style>    p{        width: 500px;        height: 400px;        background-color: red;        background-image: url(img/logo.gif);        background-repeat: no-repeat;        background-repeat: repeat;        background-repeat: repeat-x;        background-repeat: repeat-y;        background-position: 100px 100px;    }    </style></head><body>    <p></p></body></html>

背景也可以像font一样连写：
background：background-color background-image background-repeat background-position
将来可以只写颜色图片，后面两个不能只写。
下面是lol的背景代码：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title>    <style>            *{                margin: 0px;                padding: 0px;            }           .bbg{                  height: 1200px;            background: white url(img/bbg.jpg)  no-repeat center top;            min-width: 1000px;/*当浏览器改变大小的时候div也会发生变化 但是div最小的宽度是1000px*/           }           .sbg{            width: 1000px;            height: 464px;            background: url(img/sbg.jpg) no-repeat;            margin: 0 auto; /*让div居中*/           }    </style></head><body>    <div class="bbg">     <div  class="sbg"></div>    </div></body></html>

元素的显示方式：
div占一行，默认宽度是屏幕的宽度
可是设置宽高，高度不设置默认是0，宽度不设置默认一整行。
span一行里面可以多个，默认宽度是根据内容调整，不可以设置宽高。
行内元素： 属性：display：inline（a span del b u i s em ins strong ）
1一行里面可以多个
2无法设置高宽
3大小由内容决定
缺点：不能设置宽高
块级元素：属性：display：block （p h1-h6， div，li，ol，ul，dl， dt，dd）
1独占一行
2可以设置宽高
3默认宽度是一整行
缺点：独占一行
行内块级元素：属性：display：inline-block （img input ）
1可以设置宽高
2一行内可以显示多个
行内块、元素的切换：

    <style>    div{        display: inline-block;    }    span{        display:inline-block;}

阅读全文

0 0