软件测试/测试开发/全日制|作为测试工程师，必须掌握的CSS知识
简介
上篇文章我们介绍了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选中网页的所有标记*/
color :red; /*设置文字的颜色属性为红色*/
font-size:14px; /*设置文字的大小属性为14像素*/
}
注：css中使用/* */做注释。
如果属性值由多个单词组成是 需要用引号括起来，例如：
h2{
font-family: 'All New Mercedes-Benz' ;
}
注：
- 包含空格不会影响CSS在浏览器中的工作效果。
- CSS对大小写是不敏感的。
- 如果涉及与HTML文档一起工作，
class类选择器和id选择器对名称的大小写是敏感的。
css使用方法
CSS是用于修饰网页的，所以我们要将CSS使用到网页中，主要有四种方法分别是：内嵌样式、内部样式、使用标记链接外部样式表、使用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>
注：内嵌样式只対其所在的标记起作用，其他的同类标记不受影响，故不建议使用这种方法。
- 内部样式
内嵌样式只能定义某一个标记的样式，如果要对整个网页文档的某个标记进行特定样式定义时，就需要使用内部样式。内部样式一般是在标记中并使用
示例如下：
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 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 url(样式表源文件地址)
注：@import只能放在