深入了解CSS级联和继承的使用

 1.在html中使用css样式表的三种方式：

（1）内联的样式表。

eg：LIN

（2）嵌入式样式表。

即在head>标签内嵌入

立即学习“前端免费学习笔记（深入）”；

（3）外部链接的样式表。

2.级联的顺序

（1）

首先要根据起源（origin）将规则分类。

具体优先顺序如下：

页面作者（author）设置的规则 > 用户（user）规则 > 浏览器（browser）规则

（2）

然后是基于选择符和特殊性的规则排序：

　　　　1.内联样式表的优先级最高。

　　　　2.id选择符，当有多个id选择符时，具有id选择符多的规则胜出。

　　　　3.如果没有id选择符，或者数量相同，那么规则中有最多类或伪类的规则有较高优先级。

　　　　4.如果类（或是没有类），那么规则中有最多元素数量的，优先级较高。

　　　　5.如果id，class，和元素数量都相同，则最近声明的原则有最高优先级。

（3）嵌入式样式表和外部链接样式表的优先级，当其他权重相当时，最近声明的规则优先级高。

即

3.级联和HTML属性

    HTML中的align，color，face，vlink，background也会影响页面的外观。

标签的 align 属性定义了图像相对于周围元素的水平和垂直对齐方式。

HTML 4.01 不推荐使用 align 属性，XHTML 1.0 Strict DTD 不支持该属性，同时 HTML 5 也不再支持该属性。

color 属性规定 font 元素中文本的颜色。

在 HTML 4.01 中，不赞成使用 font 元素的 color 属性；在 XHTML 1.0 Strict DTD 中，不支持 font 元素的 color 属性。

请使用 CSS 代替。

CSS 语法：

[

规定文本的字体、字体尺寸、字体颜色。

eg:This is some text!

This is some text!

This is some text!

在 HTML 4.01 中，font 元素不被赞成使用。

在 XHTML 1.0 Strict DTD 中，font 元素不被支持。

]

face 属性规定 font 元素中文本的字体。

eg:This is some text!

在 HTML 4.01 中，不赞成使用 font 元素的 face 属性；在 XHTML 1.0 Strict DTD 中，不支持 font 元素的 face 属性。

请使用 CSS 代替。

CSS 语法：

vlink 属性文档中已被访问链接的颜色。

eg：

在 HTML 4.01 中，不赞成使用 body 元素的 vlink 属性；在 XHTML 1.0 Strict DTD 中，不支持 body 元素的 vlink 属性。

请使用 CSS 代替。

CSS 语法（在

这些属性与css规则相冲突时，总是被css规则覆盖。

4.在规则中使用！important

用！important 指定的规则比其他规则都重要。

eg： em { color ：bule ！important；}

注意：用户首创的！important规则优先于作者的规则。

        用户定义的样式表应该声明是！important。

5. @import规则，导入文件。

eg：h1 {color：red；}

     @import url（“style.css”）;

    /*style.css*/

   h1{color：green；}

以上代码，最终h1为红色。因为默认使用导入的样式表出现在原始样式表规则之前。

6.继承

（1）注意display，border，margin，优先级0属性是不继承的。

（2）background-color不是继承，在没有设置时，它的默认值是特别值transparent。

（3）继承相对值时，在传递给子代之前，首先计算该值。

（4）指定继承：inherit特殊值

eg：p .standout{ border :1px solid blue ;}

      p .standout{ border:inhert;}

注意：css 1发行时，作者的！important样式优先于用户的！important样式。

        css2中，用户的！important样式优先于作者的！important样式。

以上就是深入了解CSS级联和继承的使用的详细内容，更多请关注php中文网其它相关文章！