HTML中嵌入CSS的四种方式及优先级，如何选择
最新回答
っ半醉巴黎°
2024-04-19 07:43:28
用户可在HTML文档头部定义多个style元素，实现多个样式表。<Head>
<style type="text/css">
<!--
body {
font-family: "宋体";
font-size: 12px;
font-style: normal;
line-height: normal;
font-weight: normal;
text-decoration: none;
}
-->
</style> 二：外部引用式
①可以在多个文档间共享样式表，对于较大规模的网站，将
CSS样式
定义独立成一个一个的文档，可有效地提高效率，并有利于对网站风格的维护。②可以改变样式表，而无需更改HTML文档，这也与HTML语言内容与形式分开的原则相一致。
③可以根据介质有选择的加载样式表。<Head>
<link rel="stylesheet" type="text/css" href="Css.css" />
</Head>
三：内联式
使用该属性可以直接指定样式，当然，该样式仅能用于该元素的内容，对于另一个同名的元素则不起作用。 1、样式的属性内容直接跟在将要修饰的文字标记里[如：
2、具体格式： style="font-size:10px;font-color:#ff0000"
例如：修饰单元格里的文字四：导入样式表
<style type="text/css">
<!--
@import url("css/base.css");
-->
</style>
第二：四种样式的
优先级
如果这上面的四种方式中的两种用于同一个页面后，就会出现优先级的问题，这里我就不再举例子来说明了，大家在下面自己证明一下下面的结论
四种样式的优先级别是(从高至低)：行内样式、内嵌样式、链接样式、导入样式。
蔚蓝的心
2024-04-19 06:37:16
清悠野鹤
2024-04-19 06:44:23
样式表允许以多种方式规定样式信息。样式可以规定在单个的
html
元素中，在
html
页的头元素中，或在一个外部的
css
文件中。甚至可以在同一个
html
文档内部引用多个外部样式表。当同一个
html
元素被不止一个样式定义时，会使用哪个样式呢？
一般而言，所有的样式会根据下面的规则层叠于一个新的虚拟样式表中，其中数字
4
拥有最高的优先权。
•浏览器缺省设置
•外部样式表
•内部样式表（位于
标签内部）
•内联样式（在
html
元素内部）
因此，内联样式（在
html
元素内部）拥有最高的优先权，这意味着它将优先于以下的样式声明：
标签中的样式声明，外部样式表中的样式声明，或者浏览器中的样式声明（缺省值）。这只是一个大方面的优先级，在前面文章中我们讲过css有很多选择器，那么对于同种样式的css，各个选择器的优先级又是如何呢？
我们将某一个css看成一个三位数，通过比较数字的大小来获取优先级的高低，那么就会相当简单。在这里可以通过下面的规则来定义各个选择器对应的数字。
•百位数是该选择器上的id的数量的总和；
•十位数是用在该选择器上的其它属性选择器和伪类的总和。这里包括class
(.example)
和属性选择器(比如
li[id=red])；
•个位数是计算元素(就像table、p、div、*等等)和伪元素(就像:first-line等)；
•如果两个选择器对应的数字相等，也就是具有同样的优先级，在样式表中后面的那个起作用。
•标有"!important"的规则具有最高优先级，例如h1{color:black
!importan;
font-family:sans-serif}，前景色被标为important，这个前景色具有很高的优先级。但是这种声明容易引起混乱，因此通常使用得较少。
选择器
数值
h1
{color:blue;}
1
p
em
{color:purple;}
1
+
1
=
2
.apple
{color:red;}
10
p.bright
{color:yellow;}
1
+
10
=
11
p.bright
em.dark
{color:brown;}
1
+
10
+
1
+
10
=
22
#id316
{color:yellow}
100
一般我们还可以通过浏览器的插件来查看，到底哪个css起作用，比如firebug(firefox)、developer
tools(ie8)等。上面我们介绍到当优先级相同时，哪个css起作用取决于所处的位置，通常后面的css优先级要高。但是对于ie浏览器，具有相同数值的动态css取决于添加的顺序前后，而不是添加的位置前后；后添加的优先级要高。
热门标签
