HTML中嵌入CSS的四种方式及优先级，如何选择

html-css013

HTML中嵌入CSS的四种方式及优先级，如何选择,第1张

一：嵌入式用户可在HTML文档头部定义多个style元素，实现多个样式表。<Head><style type="text/css"><!-- body { font-family: "宋体"font-size: 12pxfont-style: normalline-height: normalfont-weight: normaltext-decoration: none} --></style>二：外部引用式①可以在多个文档间共享样式表，对于较大规模的网站，将CSS样式定义独立成一个一个的文档，可有效地提高效率，并有利于对网站风格的维护。②可以改变样式表，而无需更改HTML文档，这也与HTML语言内容与形式分开的原则相一致。③可以根据介质有选择的加载样式表。<Head><link rel="stylesheet" type="text/css" href="Css.css" /></Head>三：内联式使用该属性可以直接指定样式，当然，该样式仅能用于该元素的内容，对于另一个同名的元素则不起作用。1、样式的属性内容直接跟在将要修饰的文字标记里[如：2、具体格式： style="font-size:10pxfont-color:#ff0000"例如：修饰单元格里的文字四：导入样式表<style type="text/css"><!--@import url("css/base.css")--></style>第二：四种样式的优先级 如果这上面的四种方式中的两种用于同一个页面后，就会出现优先级的问题，这里我就不再举例子来说明了，大家在下面自己证明一下下面的结论 四种样式的优先级别是(从高至低)：行内样式、内嵌样式、链接样式、导入样式。

页面的加载是从上往下慢慢加载的。

也就是说你css的文件链接写在哪，加载到那的时候，就会把css文件加载过来。

你可以试一试把css的文件链接放在头和尾两个地方，分别试一试页面加载的情况。

1和2属于继承关系，也就是说1里面设定的值，如果2里面没有重新设定，就会按照1的值，如果2里面设定了新的值，就会覆盖掉1的值。3属于你给li这个标签设定了一个通用的样式。不管你的li在哪里，都会用到这个样式，css的顺序应该是下面的会覆盖掉上面的，除非值没有冲突。也就是说你这个li的标签会应用到这所有的三个样式。