2.5 CSS的基础选择符
基础选择符是CSS中使用最广泛、最频繁、最基础,也是CSS中最早定义的选择符,这部分选择符在最开始的CSS中就定义了,下面回顾一下CSS中的基础选择符。
2.5.1 通配选择符
如果接触过DOS命令或Word中的替换功能,那么对于通配操作应该不会感到陌生。通配是指使用字符替代不确定的字,如在DOS命令中,使用*.*表示所有文件,使用*.bat表示所有扩展名为bat的文件。因此,所谓的通配操作,是指对对象可以使用模糊指定的方式进行选择。CSS的通配选择符可以使用*作为关键字,使用方法如下:
*表示所有对象,包含所有不同id、不同class的HTML的所有标签。使用如上的选择符进行样式定义,页面中所有对象都会使用相同的属性设置。
2.5.2 标签选择符
HTML文档是由多个不同的标签组成的,CSS标签选择符可以用来控制标签的应用样式。例如,p选择符可以用来控制页面中所有<p>标签的样式风格。标签选择符的语法格式如下:
如果在整个网站中经常出现一些基本样式,就可以采用具体的标签来命名,从而实现对文档中标签出现的地方应用标签样式,使用方法如下:
提示
HTML标签在网页中都是具有特定作用的,并且有些标签在一个网页中只能出现一次,如<body>标签,如果定义了两次<body>标签的CSS样式,则两个CSS样式中相同属性设置会出现覆盖的情况。
2.5.3 id选择符
id选择符是基于DOM(文档对象模型)的一种选择符类型,对于一个网页而言,其中的每个标签(或其他对象)均可以使用一个id=" "的形式,对id属性进行一个名称的指派,代码如下。id可以理解为一个标识,在网页中每个id名称只能使用一次。
如上所示,HTML中的一个<div>标签被指定了id名称为top。
在CSS中,id选择符使用#进行标识,如果需要对id名称为top的标签设置样式,应当使用如下格式:
id的基本作用是对每个页面中唯一出现的元素进行定义,如可以将导航条命名为nav,将网页头部和底部命名为header和footer。类似的元素在页面中均只出现一次,使用id进行命名具有进行唯一性指派的含义,有助于代码阅读及使用。
2.5.4 类选择符
在网页中通过使用标签选择符,可以控制网页中所有该标签显示的样式,但是,根据网页设计过程中的实际需要,标签选择符对设置个别标签的样式还是力不能及的。因此,就需要使用类(class)选择符,来达到特殊效果的设置。
类选择符用来为一系列的标签定义相同的显示样式,其基本语法如下:
类名称表示类选择符的名称,其具体名称由CSS定义者自己命名。在定义类选择符时,需要在类名称前面加一个英文句点。
技能案例:使用类选择符定义样式
源文件:源文件\第2章\2-5-4.html
(1)定义两个类选择符,分别是font01和font02。类的名称可以是任意英文字符串,也可以是以英文字母开头的英文与数字的组合,通常情况下,这些名称都是其效果与功能的简要缩写。例如:
(2)可以使用HTML标签的class属性来引用类选择符。
(3)以上所定义的类选择符被应用于指定的HTML标签中(如<p>标签),同时它还可以应用于不同的HTML标签,使其显示出相同的样式。例如:
2.5.5 群组选择符
可以对单个HTML对象进行CSS设置,同样可以对一组HTML对象进行相同的CSS设置。例如:
使用逗号对选择符进行分隔,使得页面中所有的<h1>、<h2>、<h3>、<p>和<span>标签具有相同的样式定义。这样做的好处是,对于页面中需要使用相同样式的地方只需要书写一次CSS即可实现,可以减少代码量,改善CSS代码的结构。
2.5.6 基础选择符浏览器适配
基础选择符的浏览器兼容性如表2-3所示。
表2-3 基础选择符的浏览器兼容性