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所示。

选择器通常是需要改变样式的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所示。

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