【技术等级】初级
【承接文章】《系统讲解CSS，前端开发最神奇的技术，新手的你一定不能错过》
本文重点讲解用户“自定义类选择器”和“伪类选择器”，同时会阐述CSS代码与HTML文档相结合的三种方式。最后为大家罗列CSS技术支持的尺寸单位。本文属于前端开发的初级教程，适合于刚刚开始接触CSS技术的学习者。
相信大家已经跟着小海老师学会了“元素选择器”、“群组选择器”和“后代选择器”。这里我们还要再学习两种常见的选择器。
常用的CSS选择器
在学习新的选择器之前，为了能够更好的演示新的选择器所提供的强大功能，小海老师要先教大家几个CSS属性，这样我们举的例子就不限于一直使用color属性了。
一、几个常用的CSS属性：
1、font-size属性：
这个属性相信大家一看到名字就可以理解它的含义，这是一个用来设置字号的属性，该属性可以取值为一个带有单位的数值，这里我们先采用像素（px）为单位。
例1：设置三级标题标记<h3></h3>的显示字号为36像素。
h3{font-size:36px;}
2、font-family属性：
这个属性用来为文本设置显示的字体。该属性可以取值为一个本地具备的字体名称。
例2：设置段落标记<p></p>的显示字体为黑体。
p{font-family:黑体;}
以上两个属性是用来设置文本字号和字体的，我们将在下面的CSS选择器讲解中用到这两个CSS属性。
二、CSS的常用选择器：
1、用户自定义类选择器：
用户自定义类选择器是允许让设计人员自行设计一个类名来组建一组CSS样式。这里我们把用户自定义类选择器的使用分为两个步骤：创建用户自定义类选择器、调用用户自定义类选择器。
首先，创建用户自定义类选择器时，类名可以根据实际需要自行命名，但是必须遵守下列类名命名规则。
用户自定义类的名称必须以点（.）开头。
点后可以包括字母、数字、下划线、减号。
点后不可以直接接数字。
例如，我们定义一个名为style01的用户自定义类，要求该类实现28像素的绿色文本。CSS代码如下所示。
.style01{font-size:28px; color:#00ff00;}
其次，这样定义的样式应该如何使用呢？自定义类名不像上一篇文章中所讲到的元素选择器，元素选择器会自动在<body></body>标记对中匹配对应的HTML标记名。而类名由于是我们自行定义的，因此无法在<body></body>标记对中自动匹配到。因此W3C规定：使用自定义类选择器，需要在HTML标记对中使用class属性，该属性用来指定本标记对必须满足的CSS类名。
例如，我们希望页面中所有的<span></span>标记对采用上述 .style01 所定义的CSS样式，只需将代码按照如下方式书写。
<span class=”style01”></span>
我们可以发现，在调用用户自定义类的时候，class属性的取值不用书写类名开头的点。
同理，CSS还规定了另一种用户自定义类选择器，书写要求如下：
定义时类名必须以井号（#）开头。
调用时标记对需要使用id属性指代选择器的名称。
例如，我们定义一个名为banner的用户自定义类，要求该类实现微软雅黑14像素的文本效果，并用于一个<div></div>标记对中。
定义CSS样式：#banner{font-family:微软雅黑; font-size:14px;}
调用CSS样式：<div id=”banner”></div>
这两个自定义类选择器在使用的时候是有明显的区别的：
以点开头的选择器，由于采用class属性调用，因此被人们称为“类选择器”。
以井号开头的选择器，由于采用id属性调用，因此被人们称为“id选择器”。
一个类选择器在一个页面中可以多次重复调用。
一个id选择器在一个页面中只可以被调用一次。
类选择器与id选择器的区别
2、伪类选择器：
伪类选择器的名称规定都必须以冒号（：）开头，这里我们学习以下几个常用的伪类选择器。
:link，设置正常状态下超级链接文本遵循的CSS样式。
:visited，设置访问过得超级链接文本遵循的CSS样式。
:hover，设置鼠标经过时超级链接文本遵循的CSS样式，但不局限于超级链接文本。
:active，设置鼠标单击时超级链接文本遵循的CSS样式。
:focus，设置当表单元素获得鼠标焦点时表单元素遵循的CSS样式。
下面我们就这几个伪类选择器，列举几个常见的实例：
例1：设置鼠标经过超级链接时改变文本的颜色。
a:link{color:#ff5857;}
a:hover{color:#ff0000;}
例2：设置鼠标经过段落时文本的字号变大。
p{font-size:14px;}
p:hover{font-size:16px;}
例3：设置当文本框获得鼠标焦点时，内部显示的文本字号变为红色。
input{color:#999999;}
input:focus{color:#666666;}
三、CSS代码与HTML文档的结合方式
了解了CSS选择器的使用方法，还需要了解CSS技术如何与HTML语言结合到一起使用。CSS技术是无法单独使用的，其定义的样式表外观必须作用在HTML标记对中。选择器规定了CSS如何寻找HTML标记对，同时，W3C为了保证CSS技术能够正确的用到HTML标记对中，提供了以下三种结合方式：
外部样式表
内部样式表
内联样式
1、外部样式表：
外部样式表采用外部样式文件来进行样式定义，外部样式文件的扩展名为.css。HTML文档在<head></head>中利用<link />标记链接外部样式文件。这样，外部样式文件中的样式就可以直接在HTML标记中使用了。
<link /> 标记链接外部样式文件的代码如下所示：
<link rel=”stylesheet” type=”text/css” href=”css文件名” />
注意：该段代码必须书写在<head></head>标记对内部。
2、内部样式表：
内部样式表无需引入.css文件，样式的定义直接书写在HTML文档的<head></head>标记对中。内部样式表利用<style></style>标记对在<head></head>标记对中进行CSS定义。
定义CSS样式的格式代码如下所示：
<style type=”text/css”>
书写CSS定义代码
</style>
3、内联样式：
内联样式省去了样式定义的环节，直接将样式应用到了HTML标记中。几乎所有的HTML标记对都可以采用style属性来指定需要的样式。有的时候，内联样式也被看做是一种CSS样式的临时使用。
例如：我们需要将<a></a>标记对设置为橙色文本12像素，若采用内联样式实现，代码如下所示。
<a href=”#” style=”color:orange; font-size:12px”>我的网站</a>
这样的一种使用方式，只影响具备style属性的超级链接，其他没有书写style属性的超级链接不会受到影响。
下面小海老师带领大家一同分析下列代码：
CSS 综合实例
大家仔细查看代码：
第6行链接了一个名为index.css的外部样式文件。
第7行开始定义了一组内部样式表，采用了id选择器和元素选择器。
第13行使用了内部样式表中定义的id选择器。
第14行使用了内部样式表中定义的元素选择器。
第15行使用了内联样式。
四、CSS技术支持的尺寸单位：
CSS技术的使用与HTML语言略有不同。HTML语言中标记对的属性取值不用带单位，默认单位为像素，有时可以使用百分比（%）。而CSS技术规定：表示尺寸时必须带有单位。CSS技术支持的尺寸单位如下：
1、px，像素。
h1{font-size:14px} //表示字体大小为14像素。
2、pt，磅。（1磅=1/72英寸）
h1{font-size:14pt} //表示字体大小为14磅。
3、pc，派卡。（1派卡=1/6英寸）
h1{font-size:1pc;} //表示字体大小为1派卡。
4、em，当前字体尺寸。
h1{font-size:2em;} //表示字体大小为当前尺寸的2倍。
5、cm，厘米。
h1{font-size:1cm;} //表示字体大小为1厘米。
6、mm，毫米。
h1{font-size:10mm;} //表示字体大小为10毫米。
7、in，英寸。
h1{font-size:10in;} //表示字体大小为10英寸。
8、%，百分比。
该单位主要用在长度尺寸上，指点尺寸为父容器尺寸的百分比数。
本文总结
文章预告
下一次小海老师会接着本文章的进度，开始正式为大家讲解具体的CSS属性和取值。我会将所有的CSS属性根据功能分为几类，并配合一定的代码实例。相信大家跟随我的脚步一定会学有所成的。
小海声明
如果大家希望得到更加全面的关于HTML和CSS技术讲解的内容，可以私信我，我会免费将小海老师自己编写的HTML和CSS的PDF教材发给你，帮助你在前端开发的道路上阔步前行。