1.5.2 创建内嵌样式表

优质

小牛编辑

121浏览

2023-12-01

内嵌样式（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文件中，导致样式定义散落在多个页面中。如果要更新样式，就不得不更新每一个页面。所以，这种方式不便于维护，也容易出错，违背了内容与表现相分离的理念，故不推荐使用。