使用不同的方法来引用 CSS 样式表, 最终到达的效果相同, 但是使用不同方法应用的 CSS 文件将影响到 SEO 及网页打开速度效率.
CSS 文件的引入方式共有三种: 行内样式, 内部样式表, 外部样式表.
一, 行内样式
使用 style 属性引入 CSS 样式.
示例:
- <h1 style="color:red;">
- style 属性的应用
- </h1>
- <p style="font-size:14px;color:green;">
- 直接在 html 标签中设置的样式
- </p>
实际在写页面时不提倡使用, 在测试的时候可以使用.
例如:
- <!DOCTYPE>
- <HTML>
- <head>
- <meta charset="utf-8" />
- <title > 行内样式 </title>
- </head>
- <body>
- <!-- 使用行内样式引入 CSS-->
- <h1 style="color:red;">Leaping Above The Water</h1>
- <p style="color:red;font-size:30px;"> 我是 p 标签 </p>
- </body>
- </HTML>
二, 内部样式表
在 style 标签中书写 CSS 代码. style 标签写在 head 标签中.
示例:
- <head>
- <style type="text/css">
- h3{
- color:red;
- }
- </style>
- </head>
例如:
- <!DOCTYPE>
- <HTML>
- <head>
- <meta charset="utf-8" />
- <title > 内部样式表 </title>
- <!-- 使用内部样式表引入 CSS-->
- <style type="text/css">
- div{
- background: green;
- }
- </style>
- </head>
- <body>
- <div > 我是 DIV</div>
- </body>
- </HTML>
三, 外部样式表
CSS 代码保存在扩展名为. CSS 的样式表中, HTML 文件引用扩展名为. CSS 的样式表, 有两种方式: 链接式, 导入式.
语法:
1, 链接式
<link type="text/css" rel="styleSheet" href="CSS 文件路径" />
2, 导入式
- <style type="text/css">
- @import url("css 文件路径");
- </style>
例如:
- <!DOCTYPE>
- <HTML>
- <head>
- <meta charset="utf-8" />
- <title > 外部样式表 </title>
- <!-- 链接式: 推荐使用 -->
- <link rel="stylesheet" type="text/css" href="css/style.css" />
- <!-- 导入式 -->
- <style type="text/css">
- @import url("css/style.css");
- </style>
- </head>
- <body>
- <ol>
- <li>1111</li>
- <li>2222</li>
- </ol>
- </HTML>
链接式和导入式的区别
<link>
1, 属于 XHTML
2, 优先加载 CSS 文件到页面
@import
1, 属于 CSS2.1
2, 先加载 HTML 结构在加载 CSS 文件.
来源: http://www.css88.com/qa/html5/12795.html