8-3 再选一个类 - 类选择器
本节编程练习不计算学习进度,请电脑登录imooc.com操作

再选一个类 - 类选择器

类选择器在css样式编码中是最常用到的,如右侧代码编辑器中的代码:可以实现为“胆小如鼠”、“勇气”字体设置为红色。

语法:

.类选器名称{css样式代码;}

注意:

1、英文圆点开头

2、其中类选器名称可以任意起名(但不要起中文噢)

使用方法:

第一步:使用合适的标签把要修饰的内容标记起来,如下:

<span>胆小如鼠</span>

第二步:使用class="类选择器名称"为标签设置一个类,如下:

<span class="stress">胆小如鼠</span>

第三步:设置类选器css样式,如下:

.stress{color:red;}/*类前面要加入一个英文圆点*/

 

任务

我来试试,为第二段文字中的“公开课”三个文字设置为绿色

 

  1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <head>
  5. <meta charset="UTF-8">
  6. <title>认识html标签</title>
  7. <style type="text/css">
  8. .stress {
  9. color: red;
  10. }
  11.  
  12.  
  13.  
  14. </style>
  15. </head>
  16.  
  17. <body>
  18. <h1>勇气</h1>
  19. <p>三年级时,我还是一个<span class="stress">胆小如鼠</span>的小女孩,上课从来不敢回答老师提出的问题,生怕回答错了老师会批评我。就一直没有这个<span class="stress">勇气</span>来回答老师提出的问题。学校举办的活动我也没勇气参加。</p>
  20. <p>到了三年级下学期时,我们班上了一节公开课,老师提出了一个很简单的问题,班里很多同学都举手了,甚至成绩比我差很多的,也举手了,还说着:"我来,我来。"我环顾了四周,就我没有举手。</p>
  21. <img src="http://img1.sycdn.imooc.com//52b4113500018cf102000200.jpg">
  22. </body>
  23.  
  24. </html>
下一节