同一标签内多个css规则在页面中如何显示?

时间:2020-12-09 22:17:08

这两天在学习css涉及到内联、外联、嵌入对页面的影响: 
1、内联式-----将css代码直接写在html中.用 <style> 标记将样式定义为内部块对象.示例代码如下如下: 
<style type="text/css"> 
<!-- 
#user_nav{float:right;margin-right:20px;padding:4px; } 
--> 
</style> 
内联 CSS 可以有效减少 HTTP 请求,提升页面性能,缓解服务器压力。由于浏览器加载完 CSS 才能渲染页面,因此能防止 CSS 文件无法读取而造成页面裸奔的现象。

2、外联式-----将CSS代码作为文件单独存放,如以aaa.css文件包含所有样式。在HTML 中的外部级联采用 <link> 标记语句来引入。示例代码如下: 
<link href="aaa.css" rel="stylesheet" type="text/css" />

3、嵌入式-----将CSS代码直接添加于所修饰的标记元素。示例代码如下: 
<div style="float:right;margin-right:20px;padding:4px;">ITEYE</div>

下面是一些可能遇到的问题: 
1、在内联式中,如果一个标签同时使用了多个CSS规则,而这些规则中对同一属性进行了不同的赋值,最终在页面中显示的是哪个规则的属性值?示例代码如下: 
<head> 
<style type="text/css"> 
.aaa{font-size:12px;} 
.bbb{font-size:18px;backgroung-color:#FFF;} 
</style> 
</head> 
<body> 
<div class="aaa bbb">ityeye</div> 
</body> 
在页面中显示的是bbb这以规则中的属性的值。因为bbb是最后对该属性进行定义的CSS规则。

2、如果一个标签同时使用了多个CSS规则,而这些规则既有存在与内联式中的,也有存在于外联式中的,而且对同一属性进行了不同的赋值,最终在页面中显示的是哪个规则的属性值?示例代码如下: 
<head> 
<style type="text/css"> 
.aaa{font-size:12px;background-color:#036;} 
.bbb{font-size:18px;backgroung-color:#FFF;} 
</style> 
</head> 
<link herf="css/mmm.css" ref="stylesheet" type="text/css"/> 
<body> 
<div class="mmm aaa bbb">ityeye</div> 
</body> 
.mmm{font-size:18px;backgroung-color:#FFF;}/*写在mmm.css文件中*/ 
在页面中显示的是bbb这以规则中的属性的值。因为bbb写在HTML页面中优先级较高,而在HTML页面bbb是最后对该属性进行定义的CSS规则。

3、如果一个标签同时使用了多个CSS规则,而这些规则既有存在与内联式中的,也有存在于外联式中的,还有嵌入在标签中的,而且对同一属性进行了不同的赋值,最终在页面中显示的是哪个规则的属性值?示例代码如下: 
<head> 
<style type="text/css"> 
.aaa{font-size:12px;background-color:#036;} 
.bbb{font-size:18px;backgroung-color:#FFF;} 
</style> 
</head> 
<link herf="css/mmm.css" ref="stylesheet" type="text/css"/> 
<body> 
<div class="mmm aaa bbb" style="font-size:20px;backgrond-color:00FF00">ityeye</div> 
</body> 
.mmm{font-size:18px;backgroung-color:#FFF;}/*写在mmm.css文件中*/ 
在页面中显示的是嵌入到标签中的属性的值。因为嵌入到标签中的规则的优先级高于,内联式的和外联式的。

总结:在同一标签中使用多个CSS规则,在页面中显示的优先级为:嵌入式高于内联式,内联式高于外联式。如果同为内联式或外联式中的不同规则,则与该规则在CSS样式表中的位置有关,显示样式表中最后对该属性进行定义的CSS规则的属性值。用一句话表示为:就近原则,即离哪个CSS规则近显示哪个。