CSS课件CSS继承、层叠和优先级.pptx

《CSS课件CSS继承、层叠和优先级.pptx》由会员分享，可在线阅读，更多相关《CSS课件CSS继承、层叠和优先级.pptx（21页珍藏版）》请在汇文网上搜索。

1、学习目标u理解理解继承与继承与层叠与优先级的层叠与优先级的含义；含义；u了解了解继承的一些特殊特性；继承的一些特殊特性；u理解理解对同一个元素应用多个样式规则时如何选择；对同一个元素应用多个样式规则时如何选择；u理解理解当同一属性的不同样式作用于同一个对象时如当同一属性的不同样式作用于同一个对象时如何进行选择；何进行选择；u熟悉熟悉简单类型选择器的基本分值；简单类型选择器的基本分值；u能有效能有效利用继承、层叠和优先级对页面进行布局与利用继承、层叠和优先级对页面进行布局与美化。美化。继承性继承性所谓继承性，就是指被包含的元素将拥有外层元素的样式效果。从本质上讲继承是一种机制，它允许样式不仅可以

2、应用于某个特定的元素，而且还可以应用于它的后代（子）元素。盐城师范学院信息工程学院继承性继承性虽然说继承性()，子类可以使用父类的属性，但并不是所有的对象及属性都可以继承的。主要注意点如下：(1)不是所有的属性都可以继承，只有以color/font-/text-/line开头的属性才可以继承，而边框属性、边界属性、补白属性、背景属性、定位属性、布局属性、元素高、宽属性等不可以继承。盐城师范学院信息工程学院继承性继承性虽然说继承性()，子类可以使用父类的属性，但并不是所有的对象及属性都可以继承的。主要注意点如下：(2)在css中的

3、继承不仅是儿子才可以继承，只要是后代就可以继承盐城师范学院信息工程学院继承性继承性虽然说继承性()，子类可以使用父类的属性，但并不是所有的对象及属性都可以继承的。主要注意点如下：(3)css继承性中的特殊性 a标签的文字颜色和下划线是不能被继承的 h标签的文字大小是不能被继承的应用场景:一般用于设置网页上的一些共性信息body 盐城师范学院信息工程学院层叠层叠性性所谓层叠性，可以理解为“冲突”的解决方案。层叠是指CSS能够对同一元素或同一个网页应用多个样式或多个样式表的能力。盐城师范学院信息工程学院层叠层叠性性1、对同一个元素应用多个样式规则盐城师范学院信息工程学院层

4、叠层叠性性1、对同一个元素应用多个样式规则2、同一属性的不同样式作用于同一个对象如果两个规则的优先级相同，就根据在网页中位置的先后顺序来决定规则的优先级，一般后面的样式优先于前面相同属性的样式。如果两个规则的特殊性不同，就根据优先级高的样式显示。盐城师范学院信息工程学院层叠层叠性性实例：到底以什么字体显示呢？若所用的浏览器默认显示字体的样式为“宋体”，这是浏览器定义的样式；而通过修改浏览器的设置来改变浏览器中的字体显示为“楷体”，这就是用户定义的样式；现在，当打开一个网页中自带一个样式表文件，它定义的字体属性为“黑体”，这是作者定义的样式。到底以什么字体显示呢？黑体黑体黑体黑体作者定义的样式

5、用户的样式浏览器的预定义样式盐城师范学院信息工程学院优先级优先级当多个选择器选中同一个标签时，并且给同一个标签设置相同的属性时，如何层叠就由优先级来决定。CSS为每一种选择符都分配一个值，然后，将规则的每个选择符的值加在一起，就可以计算出每个规则的特殊性，即优先级。盐城师范学院信息工程学院优先级优先级简单类型选择器的基本分值：标签选择器：1分；伪元素或伪对象：1分；类选择器：10分；属性选择器：10分；ID选择器：100分；通用选择器：0分。盐城师范学院信息工程学院body color:red;div color:green;.blue color:blue;# colo

6、r:gray;# color:;帮帮我，我到底显示什么颜色？帮帮我，我到底显示什么颜色？黄色黄色黄色黄色（1 1）在相同的特殊性下，）在相同的特殊性下，将遵循就近原将遵循就近原则，排在最后的样式优先权最大。则，排在最后的样式优先权最大。div h2 color:red;div.blue color:green;div.blue.dark color:blue;# span color:gray;（2 2）复合选择器的分值只需要将其中包含的）复合选择器的分值只需要将其中包含的基本选择器分值相加即可。基本选择器分值相加即可。（3 3）在特殊性逻辑框架

7、下，被继承的值具有特）在特殊性逻辑框架下，被继承的值具有特殊性殊性0 0，即一个元素显示声明的样式覆盖继承来，即一个元素显示声明的样式覆盖继承来的样式。的样式。# font-size:36px;color:black;span color:red;我到底显示我到底显示什么颜色什么颜色红色红色红色红色（4 4）嵌入样式优先，带有）嵌入样式优先，带有属性的元素，属性的元素，其内联样式的特殊性可以为其内联样式的特殊性可以为或更高。或更高。div color:green;.blue color:blue;#head color:gray;我到底显示什么颜色红

8、色红色红色红色（5 5）定义了）定义了“!!”命令，该命令会被命令，该命令会被赋予最大优先权。赋予最大优先权。# color:green；我到底显示什么颜色我到底显示什么颜色外部样式表文件外部样式表文件style..css：# color:red!;红色红色红色红色思考题思考题 1看代码，思考与标记中文字究竟是多大？ .fonts font-size:20px;我的字体大小为20px 我的字体大小为40px 思考题思考题2、请回答下面代码中的文字是红色还是绿色显示。思考题思考题3、请回答下面代码中的“文字”显示什么颜色？思考题思考题4、请回答下面代码中的“试问这行字体是什么颜色的？”显示什么颜色？思考题思考题5、请回答下面代码中的“XXX？”显示什么颜色？