CSS+DIV网页布局与美化--第二章--CSS样式与盒模型.pptVIP

继承就是允许样式不仅可以应用于某个特定的元素，而且还可以应用于它的后代（子）元素。定义:div{color:red;font-size:36px;}应用:bodyp文档内容/pdivp文档内容/p/div/body边框属性边界属性补白属性背景属性定位属性布局属性元素高、宽属性不具有继承性具有继承性字体字号颜色行距显示声明的样式覆盖继承来的样式。定义:应用:div{font-size:36px;color:red;}p{font-size:48px;color:blue;}bodydivp文档内容/p/div/body层叠是指CSS能够对同一元素或同一个网页应用多个样式或多个样式表的能力。定义:div{width:300px;height:200px;}div{border:4pxdouble#ff0000;}应用:bodydiv文档内容/div/bodyborder:2pxsolidblue;当同一属性的不同样式作用于同一个对象时如何进行选择？如果两个规则的特殊性相同，就根据在网页中位置的先后顺序来决定规则的优先级，一般后面的样式优先于前面相同属性的样式。如果两个规则的特殊性不同，就根据特殊性高的样式显示。样式的层叠性带来的问题：若你所用的浏览器默认显示字体的样式为“宋体”，这是浏览器定义的样式；而你通过修改浏览器的设置来改变浏览器中的字体显示为“楷体”，这就是用户定义的样式；现在，当你打开一个网页中自带一个样式表文件，它定义的字体属性为“黑体”，这是作者定义的样式。黑体作者定义的样式用户的样式浏览器的预定义样式为了优化排序各种规则的特殊性，CSS为每一种选择符都分配一个值，然后，将规则的每个选择符的值加在一起，就可以计算出每个规则的特殊性，即优先级。body{color:red;}div{color:green;}.blue{color:blue;}#header{color:gray;}#header{color:yellow;}divid=“header”class=“blue”帮帮我，我到底显示什么颜色？/div黄色divh2{color:red;}div.blue{color:green;}div.blue.dark{color:blue;}#headerspan{color:gray;}（1）在特殊性逻辑框架下，被继承的值具有特殊性0，即一个元素显示声明的样式覆盖继承来的样式。#header{font-size:36px;color:black;}span{color:red;}divid=“header”我到底显示span什么颜色/span/div红色（2）内联样式优先，带有style属性的元素，其内联样式的特殊性可以为100或更高。div{color:green;}.blue{color:blue;}#head{color:gray;}divid=“header”class=“blue”style=“color:red”我到底显示什么颜色/div红色（3）在相同的特殊性下，CSS将遵循就近原则，排在最后的样式优先权最大。（4）定义了“!important”命令，该命令会被赋予最大优先权。headlinkhref=“style.css”rel=“stylesheet”type=“text/css”/styletype=“text/css”#header{color:green；}/style/headbodydivid=“header”我到底显示什么颜色/div/body外部样式表文件style.css：#header{color:red!important;}红色所谓盒模型，就是把每个HTML元素看作一