4.2 CSS相关知识

通过使用CSS,前端工程师可以大大提升网页开发的工作效率。本节我们重点了解一下CSS的概念,然后学习一下CSS选择器的相关知识。

4.2.1 CSS基础

(1)什么是CSS

●CSS是层叠样式表(Cascading Style Sheets)的英文缩写。

●样式用于定义如何显示HTML元素。

●样式通常存储在样式表中。

●把样式添加到HTML 4.0中是为了解决内容与表分离的问题。

●外部样式表可以极大地提高工作效率。

●外部样式表通常存储在CSS文件中。

●多个样式定义可层叠为一个。

(2)CSS实例

CSS规则由两个主要的部分构成,分别是选择器和声明(可以有多条),如图4-14所示。

图4-14 CSS规则

选择器通常是需要改变样式的HTML元素。每条声明由一个属性和一个值组成。属性(property)是希望设置的样式属性(style attribute)。每个属性有一个值。属性和值用冒号分隔。

CSS声明总是以英文输入状态下的分号(;)结束,并且总是用大括号({})括起来。

p {color:red;text-align:center;}

(3)CSS注释

注释是用来解释代码的,你可以随意编辑它,浏览器会忽略它,并不执行注释的内容。CSS注释以“/*”开始,以“*/”结束,实例如下。

/*这是个注释*/
p
{
text-align:center;
/*这是另一个注释*/
color:black;
font-family:arial;
}

4.2.2 CSS选择器

在Web UI自动化测试中,有一种元素定位的方式是使用CSS选择器(CSS selector)。借助CSS选择器,我们可以实现对HTML页面中的元素一对一、一对多或者多对一的控制。CSS选择器有多种格式,常用的格式如表4-3所示。

表4-3 CSS选择器格式

续表

后续我们在介绍元素定位时,会结合Selenium WebDriver的元素定位方法,深入学习、运用CSS选择器。