HTML中引入CSS的方式
2016-12-01 本文已影响0人
NathanYangcn
一、认识CSS
- CSS：层叠样式表（Cascading Style Sheets）
- 样式表：如果把HTML比作人，那么样式表就是衣帽服饰，就是用来打扮HTML外观的（俗话说人靠衣服，网页靠CSS，才能变得漂亮）
- 内容与样式分离：HTML代码与CSS代码分离，让它们各自去做擅长的事情
- HTML控制结构和内容；CSS控制样式
- 这样有利于代码的维护
- 举个栗子：存在已久的QQ空间的装扮功能就是内容与样式分离的最好体现
当我们点击切换不同的皮肤时，空间页面会显示不同的主题样式，这就是在给网页更换皮肤啊
既然将HTML与CSS分离，那么又如何让它们精诚合作呢？向下看
二、四种CSS的引入方式
1. 内联样式（行内式）
即：在html标签内的style属性中设定CSS样式，例如：
<p style="color: red">我是段落</p>
注：这种方式不推荐使用，因为它只能改变当前标签样式，多处使用会导致代码的可维护性极差
2. 内部样式（嵌入式）
即：在html内的head头部内的style标签对中设定CSS样式，例如：
<head type="text/css">
<style>
p{
color: red;
}
</style>
</head>
注：这种方式使html内容结构和css样式分开，便于阅读且代码比较集中，但CSS样式只对当前页面有效。
当多个页面需要引用同一个CSS样式时，修改CSS样式将十分麻烦，此时不利于代码维护，可维护性变差。
3. 外部样式（链接式：link）
即：使用html的link标签引入一个外部独立的 .css 文件
link标签放在html文件内的head头部中，例如：
<head>
<link rel="stylesheet" type="text/css" href="style.css"><!-- 注意href路径 -->
</head>
注：这种方式，CSS代码存储在一个外部独立的文件中，若要更换网站样式，只需修改CSS文件即可，不需改动html文件，所以采用这种方式使代码具有良好的可维护性
4. 外部样式（导入式：@import）
即：使用CSS的语法规则引入一个外部独立的 .css 文件
@import放在html文件head头部里的style标签内（@import也可以放在导入样式表的开头,去引用其他样式），例如：
<style>
@import url("style.css"); <!-- @import放在style标签内 -->
</style>
@import url("style.css"); /* @import放在导入样式表的开头 */
注：这种方式与链接式link一样，将CSS代码存储在一个外部独立的文件中，也具有良好的可维护性，但这种方式也有缺点：白屏和无样式内容闪烁
嘿，除了以上引用的样式外，不要忽略 “ 浏览器的默认样式 ” 哦
三、 引用外部样式时：link 和 @import 的区别
1. 从属关系
- link属于HTML的标签，通过 link 标签的 href 属性来引入外部文件；link不仅可以引入CSS样式表，还可以定义RSS、rel属性等
- @import属于CSS的语法，@import语法只有一项作用：导入样式表
2. 加载顺序
- 使用link标签引入的CSS样式在加载页面时被同时加载
- 使用@import导入的CSS样式将在页面加载完毕之后才被加载
3. 兼容性
- link 属于HTML标签，不存在兼容性问题
- @import 是 CSS2.1 是在CSS2.1提出的，低版本的浏览器不支持，只可在 IE5+ 才能被识别
4. DOM可控区
- link 支持使用Javascript控制DOM去改变样式（通过 JS 操作 DOM ，插入link标签来改变样式）
- @import不支持使用Javascript控制DOM去改变样式（ 由于DOM 方法是基于文档的，所以无法使用@import的方式插入样式）
5. 权重（若有兴趣自行查询它的原因）
- link引入的样式权重大于@import引入的样式
