CSS基础之文档结构_css文件结构-优快云博客

CSS文档结构

文档结构的概念

CSS通过与 HTML 文档结构相对应的选择符来达到控制页面表现的目的，文档结构在样式的应用中具有重要的角色。CSS 之所以强大，是因为它采用 HTML文档结构来决定其样式的应用。

文档结构的概念

文档结构的基本概念

为了更好地理解“CSS 采用 HTMI. 文档结构来决定其样式的应用”这句话，首先需要理解文档是怎样结构化的，也为以后学习继承、层叠等知识打下基础。

继承

继承（inheritance）是指包含在内部的标签能够拥有外部标签的样式属性，即子元素可以继承父元素的属性。
CSS 的主要特征就是继承，它依赖于祖先一子孙关系，这种特性允许样式不仅应用于某个特定的元素，同时也向下应用于其后代，而后代所定义的新样式，却不会向上影响父样式。
根据CSS 规则，子元素继承父元素属性，例如：

body{font-family:"微软雅黑";}

通过继承，所有body的子元素都应该显示“微软雅黑”字体，子元素的子元素也一样。

样式表的层叠、特性与重要性

1）样式表的层叠
层叠（cascade）是指 Css 能够对同一个元素应用多个样式表的能力。前面介绍了在网页中引用样式表的4种方法。如果这4种方法同时出现，浏览器会以哪种方法定义的规则为准呢？这就涉及了样式表的优先级和叠加。所谓优先级，是指CSS 样式在浏览器中被解析的先后顺序。
一般的优先级原则是最接近目标对象的样式定义优先级最高。高优先级样式将继承低优先级样式的未重叠定义，但覆盖重叠的定义。根据规定，样式表的优先级别从高到低为：
**行内样式表、内部样式表、链接样式表、导入样式表和默认浏览器样式表。**浏览器将按照上述顺序执行样式表的规则。
样式表的层叠性就是继承性，样式表的继承规则是：外部的元素样式会保留下来，由这个元素所包含的其他元素继承；所有在元素中嵌套的元素都会继承外层元素指定的属性值，有时会把多层嵌套的样式叠加在一起，除非进行更改；遇到冲突的地方，以最后定义的为准。
2）特性
在编写 CSS 代码的时候，会出现多个样式规则作用于同一个元素的情况。特殊性描述了不同规则的相对权重，当多个规则应用到同一个元素时，权重越大的样式会被优先采用。
各类选择符的特殊性值表述为4个部分，用0，0，0，0表示。
（1）id 选择符的特殊性值，加0，1,0,0。
（2）class 类选择符、属性选择符或伪类选择符，加0，0，1,0。
（3）标签选择符和伪元素选择符，加0，0，0,1。
（4）行内样式的特性很高，是1,0,0,0。
（5）通配选择符*对特殊性没有贡献，即0，0,0,0。
（6）复合选择符对特性没有贡献，通配符的贡献也是0，0,0，0。
（7）比较特殊的一个标志！important（权重），它没有特殊性值，但它的优先级是最高的，为了方便记忆，可以认为它的特殊性值为 1,0,0,0,0。
例如：

<style>
.color_red{
  color:red;
  }
  p{
  color:blue;
  }
  </style>
  <body>
  <div>
  <p class="color_red">这里的文字颜色是红色</p>
  </div>

根据规范，通配符选择符具有特性值O；基本选择符（例如 p）具有特性值1；类选择符具有特殊
性值 10；id 选择符具有特性值 100；行内样式（style ="”）具有特殊性值1000。选择符的特殊性值越大，规则的相对权重就越大，样式越会被优先采用。
对于上面的示例，显然类选择符.color_red 要比标签选择符p的特性值大，因此<p>标签中的文字的颜色是红色的。

3）重要性
不同的选择符定义相同的元素时，要考虑不同选择符之间的优先级（id 选择符、类选择符和 HHTML 标签选择符），id选择符的优先级最高，其次是类选择符，HTML.标签选择符最低。如果想超越这3者之间的关系，可以用！important 来提升样本方的优先权，例如：

p { color: #f00! important }
. blue ｛ color： #00f）
#idl ｛ color： #ffO｝

同时对页面中的一个段落加上这3种样式，它会依照被！important 声明的 HTML 标签泄择符的样式，显示紅色文字。如果去摔！important，则依照优先权最高的id选择符，显示黄色文字。
最后还需注意，不同的浏览器对于CSS 的理解是不完全相同的。这就意味着，并非全部的 CSS都能在各种浏览器中得到同样的结果。所以，最好使用多种浏览器分别测试

元素类型

在前面已经以文档结构树形图的形式讲解了文档中元素的层次关系，这种层次关系同时也要依赖于这些元素类型间的关系。CSS使用 display 属性规定元素应该生成的框架类型，任何元素都可以通过 display 属性改变默认的显示类型。

1）块级元素（display:block）
display 属性设置block，将显示块级元素。块级元素的默认宽度为100%，而且后面隐藏附带有换行符，使块级元素无论被怎样设置宽度，始终占据一行。如<div＞常常被称为块级元素，这意味着这些元素将显示为一块内容。标题、段落、列表、表格、分区div 和 body等元素都是块级元素。

2）行级元素（display:inline）
行级元素也称内联元素，display属性设置为 inline 将显示行级元素。元素前、后没有换行符，行级元素没有高度和宽度属性，因此也就没有可以设置的形状，显示时只占据其内容的大小。超链接、图像、范围 span、表单元素等都是行级元素。

3）列表项元素（display: listitem）
listitem 属性值表示列表项目，其实质上也是块状显示，不过是一种特殊的块状类型，它增加了缩进和项目符号。

4) 隐藏元素(display; none)
none 属性值表示隐藏并取消盒模型，所包含的内容不会被浏览器解析和显示。通过把display 设置none，该元素及其所有内容就不再显示，也不占用文档中的空间。

5）其他分类
除了上述常用的分类之外，还包括以下分类：
display:
inline-table
run-in
table
table-caption
table-cell
table-column
table-column-group
table-row
table-row-group
inherit
如果从布局角度来分析，上述显示类型都可以划归为 block 和 inline 两种，其他类型都是这两种类型的特殊显示，真正能够应用并获得所有浏览器支持的只有4个：none、block、inline 和 listitem