四。初探CSS

来源：互联网发布：淘宝一心店铺靠谱吗编辑：程序博客网时间：2024/05/21 18:45

css（层叠样式表）用来规定HTML文档的呈现形式（外观和格式编排）

4.1 定义和应用样式

   css样式由一条或多条以逗号隔开的样式声明组成。每条声明包含着一个CSS属性和该属性对应的属性值，二者以冒号分割。
   例如：
   background-color:red;//样式声明，background-color为属性，red为属性值
   color:white

4.1.1 使用元素内嵌样式

样式不是定义了事，它还需要被应用。，也就是告诉浏览器它将影响哪些元素，应用的方式有多种，最为直接的局势全局样式style

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title></head><body>    <a href="###" style="background-color: red;color: yellow">        this is a    </a></body></html>

4.1.3 使用文档内嵌样式

直接对元素应用样式有它的好处，但是如果有大量的元素时就会变的非常的麻烦。可以用style元素（不是style属性）定义文档内嵌样式。

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>Document</title>     <style type="text/css">         a{             background-color:orange;             color: red;         }         span{             background-color: red;             color: white;             border:1px solid black ;         }     </style> </head> <body>     <a href="###">         this is b     </a>     <span>         this is span     </span> </body> </html>

4.1.4 使用外部样式表

如果用一套css要应用于多个html文档，可以利用后缀为.css的文件
例如在同级目录下新建一个example.css，
内容为：

   a{        background-color:orange;        color: red;     }   span{         background-color: red;         color: white;         border:1px solid black ;     }

html文件的内容为

 <!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>Document</title>     <link rel="stylesheet" type="text/css" href="example.css"> </head> <body>     <a href="###">         this is b     </a>     <span>         this is span     </span> </body> </html>

link标签用于引入css文件，引入多少css都可以，但是如果这些css文件中对相同的元素进行了不同的样式定义，那么引入的顺序就非常的重要了，元素会应用后饮用的样式。
1）从其他样式表中引用样式
如果html想引入一个css，而css样式却写在两个css文件中
例如同级目录下有两个css文件，one.css内容为：

 a{     background-color:orange;     color: red;  }

two.css可以写为：

@import"one.css"; span{    background-color: red;    color: white;    border:1px solid black ; }

然后html只引用two.css就可以了
但是@import应用的并不广泛，因为浏览器处理@import的效率往往不如处理多个link元素引入css。

2）声明样式表的字符编码
    在css样式表中，可以出现在@import语句之前的只有@charset,@charset用于声明样式表使用的字符编码。
    例如：

 @charset "UTF-8";    @import"one.css";    span{        background-color: red;        color: white;        border:1px solid black ;    }

如果css文件中没有声明字符编码，那么就会使用html中的字符编码，如果html中也没有声明，那么默认情况下使用的将是UTF-8

4.2 样式的层叠和继承

4.2.1 浏览器样式

浏览器样式，也就是当元素没有设置样式时浏览器应用在它身上的默认样式，这些样式会因为浏览器的不同出现差异，但基本是一样的。
例如a标签，字体为蓝色并且带下划线

4.2.2 用户样式

大多数浏览器允许用于自己设置浏览器的默认样式，也就是用户样式，这个功能用的人不多，但是对于生理不便的人来说很重要。

4.2.3 样式如何层叠

   次序：
       1.元素内嵌样式（用元素的style属性定义的）
       2.文档内嵌样式（定义在style元素中的样式）
       3.外部样式（link引用的样式）
       4.用户样式
       5.浏览器默认样式
例如用户想显示一个a元素，浏览器想知道a标签内文字的颜色。
它首先会查看元素内嵌样式，比如下面这种：
<a href="###" style="color: red">this is a red a</a>
如果没有，就去查看文档内嵌样式
<style type="text/css">
   a{
       color: red;
   }
</style>
如果没有，去查看link的外部css文件，如果没有去查看用于样式，如果还没有就用浏览器的默认样式

4.2.4 用重要样式调整层叠结构

把重要样式标记为重要(important),可以改变正常的层叠次序
例如：

 <!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>Document</title>     <style type="text/css">         a{             color: red !important;         }     </style> </head> <body>      <a href="###" style="color: yellow">          this is important a      </a> </body> </html>

因为有!important，所以文档内嵌样式的color覆盖了元素内嵌样式的color
在样式的后面加上!important即可以将对应的样式标记为重要。不管在哪里定义的属性，浏览器都会优先考虑。

4.2.5 根据具体程度和定义次序解决同级样式冲突

    同一层次定义的样式冲突问题，浏览器会根据特征评估样式的具体程度。
   1. 选择器的id数目   （a）
   2. 选择器中其他属性和伪类的数目   （b）
   3. 选择器中元素名和伪元素的数目   （c）
   其实可以将其看为 a-b-c，1-0-0是大于0-5-5的
   例如：

 <!DOCTYPE html>    <html lang="en">    <head>        <meta charset="UTF-8">        <title>Document</title>        <style type="text/css">            a{                color: red;            }            .class{                color: orange;            }                                a.class{                color: yellow;            }            div .class{                color:black;            }        </style>    </head>    <body>        <div>                            <a href="###" class="class">this is a</a>                </div>        </body>    </html>

    以上中a标签的color最后为yellow这是因为
   a{}              为 0-0-1       （0个id，0个其他属性，1个元素名）
   .class{}    为 0-1-0       （0个id，1个其他属性，0个元素名）
   a.class{}    为 0-1-1       （0个id，1个其他属性，1个元素名）
   div .class{} 为 0-1-1       （0个id，1个其他属性，1个元素名）
   同级的情况下，下面的会覆盖上面的。

4.2.6 继承

如果浏览器在直接相关的样式中没有找到某个属性的值，就会求助于继承机制，就是使用父元素的这个样式属性值

<!DOCTYPE html>    <html lang="en">    <head>        <meta charset="UTF-8">        <title>Document</title>        <style type="text/css">            a{                color: yellow;            }        </style>    </head>    <body>                <a href="###">this <span>is</span> a</a>            </body>    </html>

span元素没有设置color，他的color继承与a标签
   并非所有的属性都能继承，根据经验：与元素外观相关的会被继承(文字颜色，字体等)；与元素在页面上的布局相关的不会被继承。
   在样式中利用inherit这个特别的值可以强制继承。
   例如下面的例子：span强制继承了父元素的border属性

 <!DOCTYPE html>    <html lang="en">    <head>        <meta charset="UTF-8">        <title>Document</title>        <style type="text/css">            p{                border:1px solid red ;            }            span{                border: inherit;            }        </style>    </head>    <body>                <p>this <span>is</span> p</p>            </body>    </html>

4.3CSS中的颜色

一般以16进制表示
   颜色名称        16进制           10进制
   black           #000000          0,0,0
   white           #FFFFFF          255,,255,255

表示更复杂的颜色

函数                                   说明                                           实例
rgb(r,g,b)                   用rgb模型表示颜色           color：rgb(123,464,798)
rgba(r,g,b,a)               a表示透明度                     color：rgb(123,464,798,0.4)

4.4css中的长度单位

                 单位标识符                说明
   em                         与元素字号挂钩
   rem                        与根元素字号挂钩
   px                          css像素
例如：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title>    <style type="text/css">        html{            font-size:12px;        }        p{            font-size: 2rem;            height: 2em;        }    </style></head><body>    <div>        <p>this is p</p>    </div></body></html>

上面的例子中，根元素的字号为12px，p字号为根元素字号的2倍为24px，高为自身元素字号的2倍为48px。

阅读全文

0 0