8.4　应用内联样式

内联样式是在HTML中应用CSS的第三种方式。不过，应当最后考虑这种方式，因为它将内容（HTML）和表现（CSS）混在了一起，严重地违背了最佳实践，如图8.4.1所示。内联样式只影响一个元素，如图8.4.2所示，因此使用它将失去外部样式表的重要好处：一次编写，到处可见。设想要对大量HTML做简单的文字颜色的改变，就需要对这些页面逐一进行检查和修改，可见内联样式不被经常使用的原因。

不过，如果你想快速地测试某种样式，以便随后将它从HTML中搬到更易于长期维护的外部样式表中（假定你对结果满意），内联样式就能派上用场了。

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

图8.4.1　内联样式规则只影响单个元素（在本例中为第一个img元素）

8.4　应用内联样式 - 图1

图8.4.2　只有第一个图像拥有边框。如果要让其他元素也有这种效果，就要在每个img元素中单独加上style="border: 4px solid red"。如你所见，内联样式的效率很低，对全站的内联样式统一进行更新是一件很头疼的事

应用内联样式的步骤

  • 在希望进行格式化的HTML元素中，输入style="。

  • 创建一个样式规则，但不要包含花括号和选择器。不需要选择器是因为直接将样式放入目标元素中了。

  • 要创建其他样式定义，输入;（分号）并重复第2步。

  • 输入后引号"。

提示　注意，不要将等号与冒号弄混。由于它们都表示赋值，因而很容易不小心用错。

　

提示　不要忘了用分号分隔多条属性定义。

　

提示　不要忘了用引号包围样式定义。

　

提示　内联样式的优先级高于其他所有样式，除非其他地方与之冲突的样式标记了!important（参见8.5节）。

　

提示　如果要在内联样式声明中指定字体，对于有多个单词的字体名称，要用单引号包围，以避免与style元素的双引号发生冲突。不能在这两个地方使用相同类型的引号。

　

提示　或许内联样式最为常见的使用场景是在JavaScript函数中为元素应用内联样式，从而为页面某个部分添加动态行为。可以通过Firebug或Chrome的开发者工具查看这些生成的内联样式。在大多数情况下，应用这些样式的JavaScript同HTML是分离的，因而仍然保持了内容（HTML）、表现（CSS）和行为（JavaScript）分离的原则。