CSS (Cascading Style Sheets) 用于渲染 html 元素标签的样式, CSS 可以通过以下三种方式添加到 HTML 中, 分别是: 内联样式, 嵌套样式, 外联样式.
下面我们来看一下使用外部 CSS 样式的方法:
1, 通过 < link > 标签调用外部 CSS 样式.
示例:
- <HTML>
- <head>
- <link rel="stylesheet" type="text/css" href="/html/csstest1.css">
- </head>
- <body>
- <h1>
- 我通过外部样式表进行格式化.
- </h1>
- <p>
- 我也一样!
- </p>
- </body>
- </HTML>
2, 通过 @import 方法调用外部 CSS 样式.
CSS@规则, 用于从其他样式表导入样式规则. 这些规则必须先于所有其他类型的规则,@import 不能在条件组的规则中使用.
语法:
- @import url;
- @import url list-of-media-queries;
示例:
- <!DOCTYPE HTML>
- <HTML lang="en">
- <head>
- <meta charset="UTF-8">
- <title>
- Document
- </title>
- <!-- 实例 2. 内联样式引入 green.css,link 标签引入 yellow.css -->
- <style type="text/css">
- @import url("green.css");
- </style>
- <link rel="stylesheet" href="yellow.css">
- </head>
- <body>
- <div style="width: 50px; height: 50px;">
- </div>
- <!-- 盒子为黄色背景, 黑色边框, 即 yellow.css 生效 -->
- </body>
- </HTML>
两种调用外部 CSS 样式方法的区别:
@import 是 CSS 提供的语法规则, 只有导入样式表的作用; link 是 HTML 提供的标签, 不仅可以加载 CSS 文件, 还可以定义 RSS,rel 连接属性等.
加载页面时, link 标签引入的 CSS 被同时加载;@import 引入的 CSS 将在页面加载完毕后被加载.
@import 是 CSS2.1 才有的语法, 故只可在 IE5+ 才能识别; link 标签作为 HTML 元素, 不存在兼容性问题.
可以通过 JS 操作 DOM , 插入 link 标签来改变样式; 由于 DOM 方法是基于文档的, 无法使用 @import 的方式插入样式.
link 引入的样式权重大于 @import 引入的样式.
来源: http://www.css88.com/qa/css3/12639.html