Use a CSS Class to Style an Element

Use a CSS Class to Style an Element

说明：

上节课我们学习了元素选择器，这节课我们学习类选择器。

我们先声明一个类选择器：

<style>
  .blue-text {
    color: blue;
  }
</style>
上面的代码在 <style> 标记中声明了一个叫做 blue-text 的类样式。

然后在h2元素上应用我们声明的类选择器：

<h2 class="blue-text">CatPhotoApp</h2>

注意：在CSS中，类选择器应该添加.为前缀。

而在HTML中，class属性不能添加.为前缀。

这是因为在CSS中如果类选择器前不添加. 浏览器就会误认为类选择器是一个元素选择器。

任务：在你的style元素中，修改h2选择器为.red-text选择器，并把颜色值从blue修改为red。

最后在h2元素上应用我们声明的.red-text选择器。

原始代码：

<style>
  h2 {
    color: blue;
  }
</style>

<h2>我家的猫咪</h2>

<p>在大家心目中，猫是慵懒的可爱的化身，它可以睡饱了再起来吃饭，可以逗趣小耗子，可以卖得了萌，使得了坏，这样百变的小怪兽就集结在一只宠物上，怎能不惹人怜爱。</p>

调试代码：

<style>
  .red-text {
    color: red;
  }
</style>

<h2 class="red-text">我家的猫咪</h2>

<p>在大家心目中，猫是慵懒的可爱的化身，它可以睡饱了再起来吃饭，可以逗趣小耗子，可以卖得了萌，使得了坏，这样百变的小怪兽就集结在一只宠物上，怎能不惹人怜爱。</p>