揭秘CSS(第 1 版)
1.5.2 创建内嵌样式表
阅读(

概述

CSS简介

CSS开发环境

CSS语法

CSS属性的值

创建样式表

创建外部样式表

创建内嵌样式表

内嵌样式(embed style),就是在HTML文档头部的 <style> 和 </style> 之间定义的样式表。如:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>内嵌样式</title>
<style>
p {
    color: red;
}
</style>
</head>
<body>
<p>这个段落将显示为红色</p>
</body>
</html>

这里的 <style> 标签是HTML代码,其作用是告诉浏览器,该标签内的内容是CSS代码,浏览器将按CSS规则,来解析 <style> 和 </style> 标签之间的内容。

这种方式定义的样式规则,只对本页面有效,因此,对单个页面定义特殊样式时,这种方式比较方便。但是,一个网站往往是由很多页面构成的,这种方式定义的样式,不能应用到其他的页面,达不到CSS代码重用的目的。并且,缓存的好处也不存在了。

更重要的是,这些样式存放在HTML文件,而不是CSS文件中,导致样式定义散落在多个页面中。如果要更新样式,就不得不更新每一个页面。所以,这种方式不便于维护,也容易出错,违背了内容与表现相分离的理念,故不推荐使用。

关于作者

歪脖先生,十五年以上软件开发经验,酷爱Web开发,精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等,著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》,并全部在 GitHub 上开源。

如果本教程对您帮助很大,请随意打赏。您的支持,将鼓励我写出更好的教程!

← 键盘方向键翻页 →
返回顶部 手机访问 关注微信 返回底部

扫码访问歪脖网

随时随地,想看就看

关注歪脖网微信

分享 web 知识、交流 web 经验