28.4.2　类选择符

除了ID选择符外，类选择符也是与布局联系紧密的选择符，而类选择符也可以叫作CLASS选择符。类选择符与ID选择符相似，但是类选择符可以表示一个类，即可以在文档中使用多次。

类选择符与HTML中的标记CLASS所设置的标识符关联，可以用CSS来控制这些标记，如DIV中的CALSS值，TABLE中的CLASS值，P标记中的CLASS值等，下面用实例演示类选择符的用法。

代码28.5　源代码\第28章\类选择符.html

——————————————-文件名：类选择符.html———————————————

01 ＜html＞

02 ＜head＞

03 ＜title＞类选择符＜/title＞

04 ＜style type="text/css"＞

05 /类选择符一/

06 .class1

07 {

08 /设置宽度、高度和边框/

09 width：100px；

10 height：50px；

11 border：1px solid red；

12 }

13 /类选择符二/

14 .class2

15 {

16 /设置宽度、高度和边框/

17 width：200px；

18 height：60px；

19 border：1px solid blue；

20 }

21 ＜/style＞

22 ＜/head＞

23 ＜body＞

24 ＜！-HTML代码中设置好类选择符的标识符—＞

25 ＜div class="class1"＞

26 class1的层

27 ＜/div＞

28 ＜div class="class2"＞

29 class2的层

30 ＜/div＞

31 ＜/body＞

32 ＜/html＞

【代码解析】在代码第6～20行中设置了两个层，分别用类选择符表示为class1和class2，其中class1在CSS中设置的宽度为100像素，高度为50像素，边框颜色为红色，而class2中设置的宽度和高度分别为200像素和60像素，边框颜色为蓝色，即宽度比class1宽了一倍，如图28.5所示。

注意　类选择符与类型选择符不同，类型是指HTML中的标记。注意ID选择符与类选择符的区别。

图　28.5　类选择符