8.3　创建嵌入样式表

嵌入样式表是在页面中应用CSS的第二种方式。它允许在HTML文档里直接设置样式（通常位于head部分），如图8.3.1所示。由于这些样式只在一个网页里存在，因此不会像外部样式表中的规则那样应用到其他的页面，同时，缓存的好处也不存在了。如上文所述，对于大多数情况，外部样式表是推荐的方式，但理解其他的选择以备不时之需也是很重要的。

创建嵌入样式表的步骤

  • 在HTML文档的head部分输入。

  • 根据需要，定义任意数量的样式规则（参见7.1节）。

  • 输入结束嵌入样式表（参见图8.3.1）。

提示　当且仅当style元素出现在link元素后面的时候，嵌入样式表中的样式才会覆盖外部样式表中的样式。详细信息参见8.5节。

  1. ...
  2. <head>
  3.     <meta charset="UTF-8" />
  4.     <title>El Palau de la Música</title>
  5.     <style>
  6.     img {
  7.        border: 4px solid red;
  8.     }
  9.     </style>
  10. </head>
  11. <body>
  12. ...
  13.     <img src="img/palau250.jpg" width="250" height="163" alt="El Palau de la Música" />
  14.     <img src="img/tickets.jpg" width="87" height="163" alt="The Ticket Window" />
  15. ...
  16. </body>
  17. </html>

图8.3.1　使用嵌入样式表时，style元素及其包围的样式规则通常位于文档的head部分。浏览器对页面的呈现方式与使用外部样式表时是一样的，参见图8.3.2。注意，嵌入样式表不应在其开头处（或其他任何位置）包含@charset声明

8.3　创建嵌入样式表 - 图1

图8.3.2　结果与链接到外部样式表中的样式时完全一样。区别在于，其他网页无法利用这个页面中定义的样式

提示　嵌入样式表是为页面添加CSS的次选方式。（也有例外的情况，如特定条件下拥有极大流量的网站。）推荐的方法是加载外部样式表。更多信息参见8.2节。

　

提示　还可以直接对单个HTML元素应用样式，但强烈建议不要这样做。详细信息参见8.4节。

　

提示　从技术上说，在页面的body部分嵌入样式表也是可行的，但应尽可能避免这种做法。将内容（HTML）、表现（CSS）和行为（JavaScript）分离是一种最佳实践，而将HTML和CSS混在一起就会打破这种原则。从实际情况来看，在外部样式表中维护CSS比在嵌入样式表中维护CSS更为容易。