公众号搜索：TestingStudio 霍格沃兹的干货都很硬核

CSS 就是层叠样式表（Cascading Style Sheets），定义如何显示 HTML 元素。HTML 元素的样式通常存储在层叠样式表中。

为什么要使用CSS

使用 CSS 可以定义 HTML 元素显示的样式，其实是为了解决内容与表现分离的问题。通过 CSS 可以让相同的一个页面在不同的浏览器当中呈现相同的样式。

CSS组成

CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明:

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

要查看页面中的 CSS 又需要用到浏览器的开发者工具了。打开 Elements 面板。在面板右侧展示的就是 CSS。

CSS选择器

CSS 首先需要通过选择器来确定要定义样式的元素。常用的选择器有下面这几种。

通用选择器：*

选择器	示例	示例说明
*	*	选取所有元素

id 选择器：#id {}

选择器	示例	示例说明
#id	#firstname	选择 id="firstname" 的元素

class 选择器：.className {}

选择器	示例	示例说明
.class	.intro	选择 class="intro" 的所有元素
.class1.class2	.name1.name2	选择 class 属性中同时有 name1 和 name2 的所有元素
.class1 .class2	.name1 .name2	选择作为类名 name1 元素后代的所有类名 name2 元素

元素选择器：tag {}

选择器	示例	示例说明
element	p	选择所有 <p> 元素
element.class	p.intro	选择 class="intro" 的所有 <p> 元素
element,element	div, p	选择所有 <div> 元素和所有 <p> 元素
element element	div p	选择 <div> 元素内的所有 <p> 元素
element>element	div > p	选择父元素是 <div> 的所有 <p> 元素
element+element	div + p	选择紧跟 <div> 元素的首个 <p> 元素
element1~element2	p ~ ul	选择前面有 <p> 元素的每个 <ul> 元素

属性选择器：[属性] {}

选择器	示例	示例说明
[attribute]	[target]	选择带有 target 属性的所有元素
[attribute=value]	[target=_blank]	选择带有 target="_blank" 属性的所有元素
[attribute~=value]	[title~=flower]	选择 title 属性包含单词 "flower" 的所有元素
[attribute^=value]	a[href^="https"]	选择其 src 属性值以 "https" 开头的每个 <a> 元素
[attribute$=value]	a[href$=".pdf"]	选择其 src 属性以 ".pdf" 结尾的所有 <a> 元素
[attribute*=value]	a[href*="abc"]	选择其 href 属性值中包含 "abc" 子串的每个 <a> 元素

CSS创建

外部样式表

<link rel="stylesheet" type="text/css" href="mystyle.css">

内部样式表

<style>
hr {color:sienna;}
p {margin-left:20px;}
</style>

上面例子中的 hr 和 p 就是用了元素选择器来确定要定义样式的元素。

内联样式：

<pstyle="color:sienna;margin-left:20px">这是一个段落。</p>

常见CSS样式

背景

background 简写属性，可以跟下面的所有值
background-color 设置元素的背景颜色
background-image 把图像设置为背景
background-position 设置背景图像的起始位置
background-repeat 设置背景图像是否及如何重复

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>网页标题</title>
    <style>
    p {
        background-color: red;
    }
    body {
        background-image: url("[xx.png](https://ceshiren.com/uploads/default/optimized/1X/809c63f904a37bc0c6f029bbaf4903c27f03ea8a_2_180x180.png)");
        background-repeat: no-repeat;
        background-position: right top;
    }
</style>
</head>
<body>
    <div id="first" class="content">
        <p>设置了红色背景</p>
    </div>
</body>
</html>

文本

color 设置文本颜色
text-align 对齐元素中的文本
text-decoration 向文本添加修饰
text-indent 缩进元素中文本的首行

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>网页标题</title>
    <style>
    h1 {
        color: blue;
        text-align: center;
        }
    p {
        color: red;
        text-align: left;
        text-decoration: underline;
        text-indent: 50px;
    }
</style>
</head>
<body>
    <div id="first" class="content">
        <h1>蓝色文字</h1>
        <p>正文第二行正文第二行正文第二行正文第二行正文第二行正文第二行正文第二行正文第二行正文第二行正文第二行</p>   
    </div>
</body>
</html>

字体

font 在一个声明中设置所有的字体属性
font-family 指定文本的字体系列
font-size 指定文本的字体大小
font-style 指定文本的字体样式
font-weight 指定字体的粗细

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>网页标题</title>
    <style>
    p {
        font-family: "Times New Roman";
        font-size: 200%;
        font-style: italic;
        font-weight: bold;
    }
</style>
</head>
<body>
    <div id="first" class="content">
        <p>content</p>   
    </div>
</body>
</html>

列表

list-style 把所有用于列表的属性设置在一个声明中
list-style-image 将图像设置为列表项标志
list-style-type 设置列表项标值的类型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>网页标题</title>
    <style>
    ul {
        list-style-image: url('https://ceshiren.com/uploads/default/optimized/1X/809c63f904a37bc0c6f029bbaf4903c27f03ea8a_2_32x32.png');
        list-style-type: circle;
    }
</style>
</head>
<body>
    <div id="first" class="content">
        <ul>
            <li>python</li>
            <li>java</li>
            <li>go</li>
        </ul>
    </div>
</body>
</html>

表格

border 设置表格边框
border-collapse 设置表格的边框是否被折叠成一个单一的边框或者隔开
width 定义表格的宽度
text-align 表格中的文本对齐
padding 设置表格中的填充

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>网页标题</title>
    <style>
    #students {
        border-collapse: collapse;
        width: 100%;
    }
    #students td, #students th {
        border: 1px solid red;
        padding: 8px;
    }
    #customers th {
        text-align: left;
        color: white;
    }
</style>
</head>
<body>
    <table id="students">
        <tr>
            <th>Name</th>
            <th>Age</th>
            <th>Sex</th>
        </tr>
        <tr>
            <td>张三</td>
            <td>18</td>
            <td>男</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>19</td>
            <td>男</td>
        </tr>
    </table>
</body>
</html>

定位

static：没有定位，遵循正常的文档流对象
relative：相对定位，元素的定位是相对其正常位置
fixed：元素的位置相对于浏览器窗口是固定位置
absolute：绝对定位，元素的位置相对于最近的已定位父元素
sticky：粘性定位，基于用户的滚动位置来定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>网页标题</title>
    <style>
    div.static {
        position: static;
        border: 3px solid green;
    }
    div.relative {
        position: relative;
        left: 30px;
        border: 3px solid red;
    }
</style>
</head>
<body>
    <h1>定位</h1>
    <p>设置不同的定位方式</p>
    <div class="static">
        这个 div 元素设置正常文档流定位方式
    </div>
    <div class="relative">
        这个 div 元素设置相对定位
    </div>
</body>
</html>

盒子模型

所有 HTML 元素可以看作盒子，在 CSS 中，“box model”这一术语是用来设计和布局时使用。

CSS 盒模型本质上是一个盒子，封装周围的 HTML 元素。它包括：边距，边框，填充，和实际内容。

盒模型允许在其它元素和周围元素边框之间的空间放置元素。

Margin（外边距）：清除边框外的区域，外边距是透明的。
Border（边框）：围绕在内边距和内容外的边框。
Padding（内边距）：清除内容周围的区域，内边距是透明的。
Content（内容）：盒子的内容，显示文本和图像。

也就是说，当要指定元素的宽度和高度属性时，除了设置内容区域的宽度和高度，还可以添加内边距，边框和外边距。

软件测试/测试开发 | Web测试方法与技术之CSS讲解

为什么要使用CSS

CSS组成

CSS选择器

通用选择器：*

id 选择器：#id {}

class 选择器：.className {}

元素选择器：tag {}

属性选择器：[属性] {}

CSS创建

背景

文本

字体

列表

表格

定位

盒子模型

继续阅读

《软件测试的艺术》总结软件测试的艺术

测试执行过程的注意事项

测试采坑后的注意事项总结

浅谈使用Fiddler工具进行弱网测试

Charles打断点--修改response值（wind版）

TestLink1.9.6基本操作

软件测试基础_对应TestLink整理的测试计划流程步骤

测试理论面试题

腾讯高级测试工程师的心得体会

10年软件测试工程师，只剩下这点感悟了（初级测试工程师必看）

做软件测试工程师如何突破月薪20k?

测试工程师必备武器

面试题解析：你接口测试是怎么做的？

软件测试工程师跳槽：收到面试电话后，我会做的事。

测试学习笔记之软件测试高频面试题

软件测试经典面试题（小题汇总）