CSS的引入方式
CSS的引入加载方法有三种：内联样式、内部样式表和外部样式表。内联样式是将CSS代码直接写在HTML标签中，这种方法简单但不利于维护。内部样式表是将CSS代码写在HTML文件的head标签内的style标签中，这种方法适用于单个HTML文件。外部样式表是将CSS代码写在一个单独的.css文件中，然后在HTML文件的head标签内使用link标签引入，这种方法适用于多个HTML文件共享同一个样式表。
本文将主要介绍引入CSS样式的方式，包括外部样式表、内部样式表和行间样式三种方式
[注意]CSS语法非常简单，但容易忽略的一点是不能省略分号(最后一个样式除外)
外部样式表
在link标记中rel和href属性是必须的，type属性和media属性可省略
<linkrel="stylesheet"type="text/css"href="sheet1.css"media="all"/>
完整dome
<!DOCTYPEhtml><html><head><metacharset="UTF-8"><linkrel="stylesheet"href="sheet1.css"><title>Document</title></head><body></body></html>
多个样式表
一个文档可能关联多个样式表，如果是这样，文档最初显示时只会使用rel为stylesheet的link标记
<linkrel="stylesheet"href="sheet1.css"/><linkrel="stylesheet"href="sheet2.css"/>
完整dome
<!DOCTYPEhtml><html><head><metacharset="UTF-8"><linkrel="stylesheet"href="sheet1.css"><linkrel="stylesheet"href="sheet2.css"><title>Document</title></head><body></body></html>
内部样式表
内部样式表需要使用<style>元素包含样式表，它在文档中单独出现。
<!DOCTYPEhtml><html><head><metacharset="UTF-8"><style>body{background-color:red;}</style><title>Document</title></head><body></body></html>多个style标签
文档中可出现多个style标签，且样式规则与层叠样式规则一致
<!DOCTYPEhtml><html><head><metacharset="UTF-8"><style>body{background-color:red;}</style><style>body{background-color:blue;height:100px;border:10pxsolidblack;}</style><title>Document</title></head><body></body></html>使用@import指令
与link类似，@import指令用于指示Web浏览器加载一个外部样式表，并在表现HTML文档时使用其样式。唯一的区别在于命令的具体语法和位置。@import指令常用于样式表需要使用另一个样式表中的样式的情况。
<style>@importurl(sheet2.css);body{background-color:red;}</style>[注意]@import必须出现在style元素中，且要放在其他CSS规则之前，否则将根本不起作用。
<!DOCTYPEhtml><html><head><metacharset="UTF-8"><style>/*将@import放置在CSS规则之后将不起使用*/body{background-color:red;}@importurl(sheet2.css);</style><title>Document</title></head><body></body></html>多个@import指令
可以使用@import指令导入多个CSS样式表，且可以使用media来限制应用场景。
<!DOCTYPEhtml><html><head><metacharset="UTF-8"><style>@importurl(sheet1.css)all;@importurl(sheet2.css);</style><title>Document</title></head><body></body></html>
行间样式
如果只是想为单个元素指定一些样式，可以使用HTML的style属性来设置一个行间样式。
<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>Document</title></head><bodystyle="background-color:red;height:100px;border:10pxsolidblack;"style="background-color:red;"></body></html>
[注意]行间样式若存在多个style属性，只能识别第一个
<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>Document</title></head><!--只能识别第一个style属性的值，所以页面显示为红色--><bodystyle="background-color:red;height:100px;border:10pxsolidblack;"style="background-color:blue;"></body></html>相关专题
