对Style元素使用CSS元素选择器

Use CSS Selectors to Style Elements


样式的属性多达几千个,但别担心,按照80-20原则,常用的也就几十个,你完全可以掌握它。

当你键入<h2 style="color: red">CatPhotoApp</h2>,你就给h2元素添加了inline style(内联样式)

内联样式是为元素添加样式的最简单有效的方式,但是更易于维护的方式是使用层叠样式表CSS(Cascading Style Sheets)。

在代码的最顶端,创建一个如下的style元素:

<style>
</style>

在这个style元素内, 你可以为所有的h2元素创建一个元素选择器。比如,如果你想要将所有的h2元素设置为红色, 你的代码应该看起来像这样:

<style>
  选择器 {属性名称: 属性值;}
  h2 {color: red;}
</style>

注意:一定要在属性值的后面加上分号;

任务:删除你的h2元素的内联样式,然后创建一个style元素。添加必要的CSS,使所有h2元素变为蓝色。


对Style元素使用CSS元素选择器