目录

6.2、CSS 类选择器

2017年08月11日 11:32 | 2191次浏览 作者原创 版权保护

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

语法:

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

注意:

1、英文圆点开头

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

使用方法:

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

<span>胆小如鼠</span>

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

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

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

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

练习

新建示例页面demo.html,示例代码如下:

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

1.在示例代码中的第16行,输入:

<span class="setGreen">公开课</span>

2.在示例代码中的第10-12行,输入:

.setGreen{
   color:green;
}

 示例代码

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>认识html标签</title>
<style type="text/css">
.stress{
    color:red;
}

</style>
</head>
<body>
    <h1>勇气</h1>
    <p>三年级时,我还是一个<span class="stress">胆小如鼠</span>的小女孩,上课从来不敢回答老师提出的问题,生怕回答错了老师会批评我。就一直没有这个<span class="stress">勇气</span>来回答老师提出的问题。学校举办的活动我也没勇气参加。</p>
    <p>到了三年级下学期时,我们班上了一节公开课,老师提出了一个很简单的问题,班里很多同学都举手了,甚至成绩比我差很多的,也举手了,还说着:"我来,我来。"我环顾了四周,就我没有举手。</p>
    <img src="https://www.vxzsk.com/upload/top/cef6b481-41cc-4a64-a4f6-98a7d19a4f3f20170427.jpg" >
</body>
</html>


小说《我是全球混乱的源头》
此文章本站原创,地址 https://www.vxzsk.com/1301.html   转载请注明出处!谢谢!

感觉本站内容不错,读后有收获?小额赞助,鼓励网站分享出更好的教程