- 跨平台移动APP设计及应用
- 张思民
- 463字
- 2021-03-23 13:28:03
2.2.2 CSS的选择器
所谓CSS选择器就是指定HTML文件中需要设置样式的元素。根据所选取的元素范围,CSS选择器共分为3种类型:标签选择器、id选择器和类选择器。
1.标签选择器
通过标签选择器,可以对HTML文档中的标签设计CSS样式,其设置格式如下:
标签名称{属性1:值1;属性2:值2;…}
【例2-7】 标签选择器应用示例,分别设置标签h1、h2的字号和颜色。
按题目要求,设置CSS的程序如下:
![](https://epubservercos.yuewen.com/DB5EE7/14615888805744006/epubprivate/OEBPS/Images/img00027003.jpg?sign=1739391183-4Gj9ikUPn9dQ4hfCzuSQ5akNm8msaeau-0-59a7070cb846a3723fe810cad99c0bdd)
![](https://epubservercos.yuewen.com/DB5EE7/14615888805744006/epubprivate/OEBPS/Images/img00028001.jpg?sign=1739391183-aPQMaxfhHSAeHb4ukpbkNs47Z6ju6YhO-0-fdb20b88ee28b9cd208b45a3650975ba)
程序运行结果如图2.8所示。
![](https://epubservercos.yuewen.com/DB5EE7/14615888805744006/epubprivate/OEBPS/Images/img00028002.jpg?sign=1739391183-FWir2UdxmfyGMW4LrKfGnE2ieoCtr2WZ-0-28140bdbaf5b08408433b4307b7c2cee)
图2.8 标签选择器示例
2.id选择器
有时,需要对HTML文档中某一个元素进行样式设计,则可以对该元素设置一个id标记,从而对id标记的元素进行CSS样式设计。其设计格式如下:
#id 名称{属性1:值1;属性2:值2;…}
【例2-8】 id选择器应用示例,设置标签的id标记值为aa的字号、颜色。
![](https://epubservercos.yuewen.com/DB5EE7/14615888805744006/epubprivate/OEBPS/Images/img00028003.jpg?sign=1739391183-mA0ctkW57OvpePxVj1a6ETUUDVbmAXtA-0-a6c43c675cdb825cac33c4b73d9b2994)
![](https://epubservercos.yuewen.com/DB5EE7/14615888805744006/epubprivate/OEBPS/Images/img00029001.jpg?sign=1739391183-oOO9kmaW4210rr4ScVRQm88eNk46s2Rb-0-423d03ed7e9aca8b397d5f9ce1224f37)
程序运行结果如图2.9所示。
![](https://epubservercos.yuewen.com/DB5EE7/14615888805744006/epubprivate/OEBPS/Images/img00029002.jpg?sign=1739391183-0KOd87Z5oxEWFrqZWTnxexHrClAM35M7-0-a19509fb03b28df155600c7bd9682bb5)
图2.9 id选择器示例
3.class类选择器
当需要对多个不同元素进行样式设计时,可以在HTML文档中对这些元素设计class标记,从而对这些标记为class的元素进行设计,其语法格式如下:
.class 名称{属性1:值1;属性2:值2;…}
【例2-9】 设置标签为h1、h2及p具有相同的字号和颜色。
![](https://epubservercos.yuewen.com/DB5EE7/14615888805744006/epubprivate/OEBPS/Images/img00029003.jpg?sign=1739391183-vabulQrnF9n8a8VEig9ZZNxwAztpkPlm-0-90b5925285841f12cb77a4949a61c9f8)
程序运行结果如图2.10所示。
![](https://epubservercos.yuewen.com/DB5EE7/14615888805744006/epubprivate/OEBPS/Images/img00030001.jpg?sign=1739391183-rJOjVx7ffyD7OPMdMP5UWhXx7VIfhGHZ-0-373ca8e9a9dcda86037ec6e898324acb)
图2.10 class类选择器示例