公衆号搜尋：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?

測試工程師必備武器

面試題解析：你接口測試是怎麼做的？

軟體測試工程師跳槽：收到面試電話後，我會做的事。

測試學習筆記之軟體測試高頻面試題

軟體測試經典面試題（小題彙總）