html 如何添加 CSS 样式文件? 下面本篇文章给大家介绍一下. 有一定的参考价值, 有需要的朋友可以参考一下, 希望对大家有所帮助.
HTML 中添加 CSS 样式文件有两种方法:
1, 使用 <link> 标签引入外部 CSS 文件 (链接式)
2, 使用 @import 标签引入外部 CSS 文件 (导入式)
链接式
链接式通过 HTML 的 <link> 标签, 将外部样式表文件链接到 HTML 文档中, 这也是网络上网站应用最多的方式, 同时也是最实用的方式. 这种方法将 HTML 文档和 CSS 文件完全分离, 实现结构层和表示层的彻底分离, 增强网页结构的扩展性和 CSS 样式的可维护性.
示例: 使用链接式为 HTML 代码应用样式, 书写, 更改方便.
- <!doctype HTML>
- <HTML>
- <head>
- <meta charset="utf-8">
- <title>
- </title>
- <link href="lianjie.css" type="text/css" rel="stylesheet" />
- <link href="lianjie-2.css" type="text/css" rel="stylesheet" />
- </head>
- <body>
- <p>
- 我是被 lianjie-2.CSS 文件控制的, 楼下的你呢??
- </p>
- <h3>
- 楼上的,
- <span>
- lianjie.CSS
- </span>
- 文件给我穿的花衣服.
- </h3>
- </body>
- </HTML>
页面演示效果如下图所示:
在上面示例中, 通过 link 链接两个 CSS 文件, 且都有效, 这也是网站制作者将公共部分放入一个 CSS 文件, 当前页面样式编写新的样式文件.
lianjie.CSS 文件代码:
- h3{
- font-weight: normal; /* 取消标题默认加粗效果 */
- background-color: #66CC99; /* 设置背景色 */
- height: 50px; /* 设置标签的高度 */
- line-height:50px; /* 设置标签的行高 */
- }
- span{
- color: #FFOOOO; /* 字体颜色 */
- font-weight:bold; /* 字体加粗 */
- }
lianjie-2.CSS 文件代码:
- p{
- color: #FF3333; /* 字体颜色设置 */
- font-weight: bold; /* 字体加粗 */
- border-bottom: 3px dashed #009933; /* 设置下边框线 */
- line-height: 30px; /* 设置行高 */
- }
链接式样式使 CSS 代码和 HTML 代码完全分离, 达到结构与样式的分开, 使 HTML 代码专门构建页面结构, 而美化工作由 CSS 完成.
CSS 文件可以放在不同的 HTML 文件中, 使网站所有页面样式统一; 再者将 CSS 代码放入一个 CSS 文件中便于管理, 减少代码以及维护时间; 当修改 CSS 文件时, 所有应用此 CSS 文件的 HTML 文件都将更新, 而不必从服务器上将所有的页面取回再修改完毕后上传.
导入样式
导入样式使用 @import 命令导入外部样式表. 导入样式有 6 种书写方式:
- @import daoru.CSS;
- @import 'daomxss';
- @import "daoru.css";
- @import url(daoru.CSS);
- @import url('daoru.css');
- @import url("daoru.css");
示例: 导入样式表 lianjie.CSS 和 daoru.CSS 以及书写 <body> 标签的背景色, 注意导入样式表和 <body> 标签样式的前后不可颠倒.
- <HTML>
- <head>
- <meta charset="utf-8">
- <title></title>
- <style type="text/css">
- @import url(lianjie.CSS);
- @import url(daoru.CSS);
- body { background-color: #e4e929; }
- </style>
- </head>
- <body>
- <div>
- <p > 我是被 lianjie-2.CSS 文件控制的, 楼下的你呢??</p>
- <h3 > 褛上的,<span>lianjie.CSS</span > 文件给我穿的花衣服.</h3>
- </div>
- </body>
- </HTML>
页面演示效果如下图所示:
在上面示例中, 必须是 @import url("lianjie-2.css"); p{text-indent: 3em;}, 而不能是 p{text-indent:3em;} @import url("lianjie-2.css");, 否则将导入效果无效. 在 CSS 文件中也需要将 @import 放在前面, 后面加入 CSS 样式, 否则也是无效.
lianjie.CSS 文件代码, 同上一个示例即链接式.
daoru 文件代码:
- @import url("lianjie-2.css");
- p {
- text-indent: 3em;
- }
更多 web 开发 https://www.html.cn/ 知识, 请查阅 HTML 中文网 !!
来源: http://www.css88.com/qa/html5/17669.html