简介
上篇文章我们介绍了 HTML 的相关知识，作为 web 的三种重要文件资源之一，CSS 也是我们作为测试工程师必须要有所了解的知识，比如我们在 web 测试工作中，CSS 定位能够迅速帮我们定位到元素。本篇文章我们就来介绍一下作为测试工程师，我们需要掌握的 CSS 知识。
CSS
CSS（Cascading Style Sheets）即层叠样式表，是一种用来表现 HTML（标准通用标记语言的一个应用）或 XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS 不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化，是最常用的网页修饰语言。
它具有下列优势：
css 基本语法
CSS 的定义是由三部分组成的，包括选择符( selector)、属性( properties)、属性值（value）语法如下：
选择器{ 属性1:属性值1; 属性2:属性值2; …… }
复制代码
注意：每个属性有一个值，属性和值用冒号隔开。如果要定义不止一一个“属性:属性值”的声明时，需要用分号将每个声明分开，最后一条声明规则可以不加分号（建议每条声明的末尾都加上分号，会减少出错的可能。）
例如：
h1{ /*标记选择器h1选中网页的所有<h1>标记*/color :red; /*设置文字的颜色属性为红色*/font-size:14px; /*设置文字的大小属性为14像素*/}
复制代码
注：css 中使用/* */做注释。
如果属性值由多个单词组成是 需要用引号括起来，例如：
h2{ font-family: 'All New Mercedes-Benz' ;}
复制代码
注：
css 使用方法
CSS 是用于修饰网页的，所以我们要将 CSS 使用到网页中，主要有四种方法分别是：内嵌样式、内部样式、使用<link>标记链接外部样式表、使用 CSS 的 @import 标记导入外部样式文件。
内嵌样式
内嵌样式指将 CSS 规则混合在 HTML 标记中使用的方式。CSS 规则作为 HTML 标记 style 属性的属性值。例如:
<a style="color:red; font-size: 28px;">测试人</a>
复制代码
例如：
<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>样式使用</title></head><body> <a href="https://ceshiren.com/" style="color:red; font-size: 28px;">测试人</a> <br> <a href="https://ceshiren.com/" >测试人</a></body></html>
复制代码
注：内嵌样式只対其所在的标记起作用，其他的同类标记不受影响，故不建议使用这种方法。
内部样式
内嵌样式只能定义某一个标记的样式，如果要对整个网页文档的某个标记进行特定样式定义时，就需要使用内部样式。内部样式一般是在<head>标记中并使用<style>标记进行定义。语法格式如下所示:
<style type="text/css"> 选择器{ 属性:属性值; 属性:属性值; …… }</style>
复制代码
示例如下：
<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>样式使用</title><style type="text/css"> #p{ color: red; font-size: 28px; } </style></head><body> <a href="https://ceshiren.com/" id="p">测试人</a> <br> <a href="https://ceshiren.com/" >测试人</a></body> </html>
复制代码
外部样式
外部样式是将样式表以单独的文件(文件后缀一般为.css )存放，让网站的所有网页通过<link>标记均可引用此样式文件。
优点：
注：<link>标记一般放到页面的<head>区域内。使用<link>标记引人外部样式文件的语法格式如下:
<link rel="stylesheet" type="text/css" href=" 样式表源文件地址:">
复制代码
href属性中的外部样式文件地址的填写方法和超链接的链接地址的写法一样；
rel="stylesheet"的作用是告诉浏览器链接的是一个样式表文件，是固定格式；
type="text/css"表示传输的文本类型为样式表类型文件，也是固定格式。
<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>样式使用</title></head> <link rel="stylesheet" type="text/css" href="css3-3.css"><body> <a href="https://ceshiren.com/" id="p">测试人社区</a> <br> <a href="https://ceshiren.com/" >测试人社区</a></body></html>
复制代码
外部样式文件内容：
#p{ color:red; font-size:20px;}
复制代码
内嵌样式、内部样式、外部样式之间的本质区别:
(1)外部样式用于定义整个网站样式。(2)内部样式用于定义整个网页样式。(3)内嵌样式用于定义某个标记样式。
使用 @import 引入外部样式文件
格式：
注：@import只能放在<style>标记内使用，而且必须放在其他 CSS 样式之前。其中，urI为关键字，不能随便更改。
例如：
<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>样式使用</title> <style type="text/css"> @import url("css4-4.css") </style></head><body><a href="https://ceshiren.com/" id="p">测试人</a> <br> <a href="https://ceshiren.com/" >测试人</a></body></html>
复制代码
外部样式文件：
#p{ color:red; font-size:20px;}
复制代码
CSS 选择器
元素选择器
元素选择器最常见的是 CSS 选择器，又称为类型选择器。
元素选择器基本语法格式如下：
HTML元素名{ 样式属性:属性值; 样式属性:属性值; ……}
复制代码
实例：
h2{ color:blue; font-size:26px;}
复制代码
示例：
<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>元素选择器</title> <style type="text/css"> h2{ color: red; } span{ color: blue; font-size: 48px; } </style></head><body> <h2>hogwarts</h2> <h3>hogwarts</h3> <span>hogwarts</span></body></html>
复制代码
页面如下：
ID 选择器
ID 选择器类似于类选择器，但也有一些差别。
相同点：类选择器和 ID 选择器在定义和使用时都是区分大小写。
主要区别：
定义上 ID 选择器前面使用“#”号，而不是类选择器的点。
ID 选择器在引用时不是通过 class 属性， 而是使用 id 属性。
在一个 HTML 文档中，ID 选择器仅允许使用一次，而类选择器可以使用多次。
ID 选择器不能结合使用，因为 ID 属性不允许有以空格分隔的词列表。
ID 选择器的语法格式：
#ID选择器名称{ 样式属性:属性值; 样式属性:属性值; ......}
复制代码
使用 ID 选择器的语法格式如下所示：
示例：
<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>ID选择器</title> <style type="text/css"> #p1{ color: red; font-size: 25px; } #p2{
font-size: 36px; text-decoration: underline; color: green; } </style></head><body> <h2 id="p1">hogwarts</h2> <h2 id=p2>hogwarts</h2></body></html>
复制代码
页面如下：
类选择器
元素选择器可以设置网页中所有相同标记的统一格式，但如果需要对相同标记中某些个别标记做其他效果设置时，使用 HTML 元素标记就无法实现。类(class )选择器允许以一种独立于文档元素的方式来指定样式。该选择器可以单独使用，也可以与其他元素结合使用。语法格式如下所示：
.类选择器名称{ 样式属性:属性值; 样式属性:属性值; ……}
复制代码
注： 类选择器的定义是以英文圆点开头。类选择器的名称可以任意(但是不能用中文)但最好以驼峰方式命名。
类选择器的使用语法格式如下：
< 标记名称 class="类选择器名称1 类选择器名称2 ..."
# 例如
<div class="myBoxColor myBoxBackground"> </div>
复制代码
这里定义了两个类选择器,在 HTML 的div标记使用这两个类选择器，在使用两个以上的类选择器时，其名称之间要用空格分隔，最终这两选择器定义的样式会叠加，并在div标记中呈现。如果在两个类选择器中都对同一个样式属进行了样式定义，则最后定义的样式起作用。
示例：
<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>类选择器</title> <style type="text/css"> .p1{ color: red; font-size: 25px; } .p2{ font-size: 36px; text-decoration: underline; color: green; } </style></head><body> <h2 class="p1">hogwarts</h2> <h2 class=p2>hogwarts</h2></body></html>
复制代码
总结
本文主要介绍了 CSS 的基本语法还有一些基本的选择器，掌握 CSS 的基础知识，对于我们更好地进行 web 测试有很大的帮助，希望本文能够帮到大家！
评论