
上QQ阅读APP看书,第一时间看更新
2.2.2 CSS的选择器
所谓CSS选择器就是指定HTML文件中需要设置样式的元素。根据所选取的元素范围,CSS选择器共分为3种类型:标签选择器、id选择器和类选择器。
1.标签选择器
通过标签选择器,可以对HTML文档中的标签设计CSS样式,其设置格式如下:
标签名称{属性1:值1;属性2:值2;…}
【例2-7】 标签选择器应用示例,分别设置标签h1、h2的字号和颜色。
按题目要求,设置CSS的程序如下:


程序运行结果如图2.8所示。

图2.8 标签选择器示例
2.id选择器
有时,需要对HTML文档中某一个元素进行样式设计,则可以对该元素设置一个id标记,从而对id标记的元素进行CSS样式设计。其设计格式如下:
#id 名称{属性1:值1;属性2:值2;…}
【例2-8】 id选择器应用示例,设置标签的id标记值为aa的字号、颜色。


程序运行结果如图2.9所示。

图2.9 id选择器示例
3.class类选择器
当需要对多个不同元素进行样式设计时,可以在HTML文档中对这些元素设计class标记,从而对这些标记为class的元素进行设计,其语法格式如下:
.class 名称{属性1:值1;属性2:值2;…}
【例2-9】 设置标签为h1、h2及p具有相同的字号和颜色。

程序运行结果如图2.10所示。

图2.10 class类选择器示例