重温CSS之文档结构_html/css_WEB-ITnose

出处：http://limits.cnblogs测试数据

我们来看看几个基本的HTML页面

 1   2   3   4   5  文档结构  6   7  8   9     
CSS规则
10     
样式表由一些 样式规则 组成。
11      12          选择器13     14              15                  类选择器 16                  ID选择器 17                   包含 选择器 18              19              属性 20              值 21          22      23  24   

显示如下：

文档结构如下图：

特殊性：

规定了不同规则的权重，当多个规则都可用于同一个元素时，权重越高的样式会被优先采用。

h1 {color:red;}/*特殊性=1*/p em{color:blue;}/*特殊性=2*/.divclass{color:yellow;}/*特殊性=10*/p.note em.dark{color:gray;}/*特殊性=22*/#id{color:black;}/*特殊性=100*/ 

使用!important来标识重要规则，如：p{color:red !important;}，此时color:red将具有最高的权重性，因这样声明的规则将高于访问者本地样式的定义(就是P标签内的定义)，所以!important要谨慎使用。

元素分类：

块级元素(display:block)：每个块级元素都从一个新行开始，而且其后的元素也需要另起一行开始标题、段落、表格、层、body等都是块级元素； 内联元素(display:inline)：内联元素不需要在新行显示，而且也不强迫其后的元素换行，如a,em,span等都是内联元素，内联元素可以为任何其他元素的子元素； 列表项(display:list-item)：只有li元素是默认此类型，此元素的表现形式和列表一样； 隐藏元素(display:none)：当某个元素被设置为display:none的时候，浏览器会完全忽略掉此元素，此元素将不会被显示，也不会占据位置。

查看更多关于重温CSS之文档结构_html/css_WEB-ITnose的详细内容...