在学习前端的时候, 我们应该知道 CSS 给 html 标记添加各种样式, 用来告诉浏览器, 因该如何显示这些标记里面的内容. 既然 CSS 是用来给 HTML 添加各种样式的, 那么, 在 HTML 中如何引入外部的 CSS 文件呢?
方法 1: 使用 link 标签引入外部 CSS 文件 (链接式)
在网页的 < head></head > 标签对中使用 < link > 标记来引入外部样式表文件, 使用 HTML 规则引入外部 CSS.
- <link rel="stylesheet" type="text/css" href="css 的路径">
- <link>
- 标签定义文档与外部资源的关系,
- <link>
- 标签最常见的用途是链接样式表.
link 元素是空元素, 它仅包含属性. 此元素只能存在于 head 部分, 不过它可出现任何次数.
示例:
HTML 代码:
- <!DOCTYPE HTML>
- <HTML>
- <head>
- <meta charset="UTF-8">
- <title>
- 链接式
- </title>
- <link rel="stylesheet" type="text/css" href="style.css">
- </head>
- <body>
- <p>
- 链接式链接式链接式链接式链接式链接式链接式链接式链接式链接式链接式链接式
- < p>
- </body>
- </HTML>
CSS 样式文件 --style.CSS 代码:
- p{
- font-size: 20px;
- color: #fff;
- background-color: #70DBDB;
- }
效果图:
链接式会以网页文件主体装载前装载 CSS 文件, 因此显示出来的网页从一开始就是带样式的效果的, 它不会象导入式那样先显示无样式的网页, 然后再显示有样式的网页, 这是链接式的优点.
方法 2: 使用 @import 引入外部 CSS 文件 (导入式)
将一个独立的. CSS 文件引入 HTML 文件中, 导入式使用 CSS 规则引入外部 CSS 文件,<style > 标记也是写在 < head > 标记中, 使用的语法如下:
- <style type="text/css">
- @import url("CSS 文件");
- </style>
@import 规则, 用于从其他样式表导入样式规则, 这些规则必须先于所有其他类型的规则.
代码实例:
HTML 代码:
- <!DOCTYPE HTML>
- <HTML>
- <head>
- <meta charset="UTF-8">
- <title>
- 导入式
- </title>
- <style type="text/css" media="screen">
- @import url("style.css");
- </style>
- </head>
- <body>
- <p>
- 导入式导入式导入式导入式导入式导入式导入式导入式导入式
- < p>
- </body>
- </HTML>
效果图:
导入式会在整个网页装载完后再装载 CSS 文件, 因此这就导致了一个问题, 如果网页比较大则会儿出现先显示无样式的页面, 闪烁一下之后, 再出现网页的样式. 这是导入式固有的一个缺陷.
来源: http://www.css88.com/qa/html5/12424.html