CSS 样式表引入方法
Posted 乱舞春秋__
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了CSS 样式表引入方法相关的知识，希望对你有一定的参考价值。
CSS样式表有4种引入方法，分别为行内式、内嵌式、外链式、导入式，具体介绍如下：
1.行内式
行内式也被称为内联样式，语法格式如下：
<标签名 style="属性1：属性值1；属性2：属性值2；属性3：属性值3"> 内容 </标签名>例如：
使用行内式为段落中的文字设置字体颜色与字体风格
<p style="color:blue;font-syle:italic;">这是一段文字</p>注意：任何标签都具有style属性。
2.内嵌式
内嵌式写在<style>标签中，语法格式如下：
<head>
<style type="text/css">
选择器 {属性1：属性值1； 属性2：属性值2； 属性3：属性值3；}
</style>
</head>例如：
使用内嵌式为段落设置字体大小与字体颜色
<style type="text/css">
p {font-size：12px； color：blue；}
</style>注意：<style>标签一般放在<head>标签中，也可以放在HTML文档的任何地方。但通常放在HTML文档的头部，有利于浏览器提前解析CSS代码。在一些宽松的语法格式中，type属性可以省略。
3.外链式
外链式也被称作链入式，语法格式如下：
<head>
<link href="CSS文件的路径" type="text/css" rel="stylesheet" />
</head>注意：CSS文件的路径可以是绝对路径，也可以是相对路径。同样， 在一些宽松的语法格式中，type属性可以省略。
4.导入式
导入式与链入式相同，也是针对外部文件的。语法格式如下：
<style type="text/css">
@import url(css文件的路径);
/* 此处可以写入其他CSS样式 */
</style>或
<style type="text/css">
@import "css文件的路径";
/* 此处可以写入其他CSS样式 */
</style>注意：该语法中，<style>标签中还可以放置其他CSS样式，但@import语句必须位于其他内嵌样式的上方。
总结：1.行内式没有做到结构与样式分离，不推荐使用。
2.内嵌式将结构与样式进行了不完全分离，而且只对其所在的html页面有效，不能重用于多个页面。
3.使用外链式或者导入式时，需将所有的样式放在一个或多个以.css为扩展名的外部样式表文件中，并且文件中只包含样式，不能出现<style>标签。
4.外链式与导入式都是引入外部CSS文件，但大多数网站都是采用外链式来引入外部CSS样式表。主要原因是两者的加载时间和顺序不同，在一个页面被加载时，由外链式引入的样式表会被同时加载，而由导入式引入的样式表会等到页面全部加载完毕后再被加载，当用户网速较慢时，就会先显示没有CSS修饰的网页，这样会造成不好的用户体验。
以上是关于CSS 样式表引入方法的主要内容，如果未能解决你的问题，请参考以下文章
CSSCSS 层叠样式表 ③ ( CSS 引入方式 - 外链式 | CSS 样式规则 )