发表日期: 2022-05-28 22:57:37 浏览次数:105
广西省柳州网站建设-柳州网络公司-优化-制作-设计推广-柳州网站建设服务中心

在上面示例中,通过 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 样式的好处:
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");
【示例5】导入样式表 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>页面演示效果如下图所示。
广西省柳州网站建设-柳州网络公司-优化-制作-设计推广-柳州网站建设服务中心