总览
- 内联样式表
- 嵌入样式表
- 外联样式表
- 导入样式表
一、内联样式表
- 内联式(Inline Style):也叫内嵌式或行内式，在html代码中嵌入css样式，只对当前标签起作用。
- 基本语法：
- 缺点：只能对一组标签进行样式渲染，导致css程序多，html与css耦合，影响开发效率与执行效率。（不推荐使用）
二、嵌入样式表
- 嵌入式(Inline Style):也叫页内样式,在网页上使用style标签包裹样式代码。
- 基本语法
- 缺点：使html文件中包含大量css程序，页面结构与样式耦合，不利于维护。（不推荐使用）
三、外联样式表
- 外联式(Linking):也叫外部样式，将样式文件独立的编写在样式文件中，在html中显示的声明引入样式文件。（建议使用）
- 外部文件：以css为后缀的文件名，内容为样式程序。
- 引入css文件声明
<head>
……
<link href="css/04test.css" rel="stylesheet" type="text/css" />
……
</head>
- link元素：连接元素，是head标签的子标签。
- href：设定引入外部文件的路径url。
- type：设置或获取对象的 MIME 类型。
四、导入样式表
- 导入式( import ):在css编写容器中使用
@import导入外部css文件。
<style type="text/css">
@import url(“css/04test.css");
</style>
- @import：导入样式的规则关键字。
- url(“css路径”)：导入外部css文件的路径。
- 也可以在外部文件中导入css文件。
五、链接式与导入式的区别：
<link/>标签属于XHTML（html的过渡版本，但被所有浏览器兼容），
@import是属于CSS2.1，IE4无法兼容。
使用<link/>链接的CSS文件先加载到网页当中，再进行编译显示。
使用@import导入的CSS文件，客户端显示HTML结构，再把CSS文件加载到网页当中，因此会有短时间无样式显示。
建议:使用link引入外部css文件。
六、优先级
内联样式表（标签内部）> 嵌入样式表（当前文件中）> 外部样式表（外部文件中）。
428
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
