測試開發之前端篇-CSS層疊式樣式表
CSS是层叠样式表(Cascading Style Sheets)的缩写，用于描述如何在屏幕、纸张或其他媒体上显示HTML元素，包括了定义网页及其元素的布局、风格、大小、位置和颜色等属性。
CSS的語法表示爲：
以下是一個簡單的例子，設置了網頁主體（body）的背景色、標題（h1）的顔色和對齊方式、段落(p)的字體和大小。
body {
background-color: lightblue;
}
h1 {
color: white;
text-align: center;
}
p {
font-family: verdana;
font-size: 20px;
}
網頁中有3種引用樣式表的方法，分別爲：
1. 在head中使用link元素，导入外部样式表文件。
<head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head>在網頁head中使用style元素，定義樣式表內容。
2. 在網頁head中使用style元素，定義樣式表內容。
<head>
<style>
body {
background-color: linen;
}
h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
3. 使用style属性，直接将样式内容添加到元素中。
<body> <h1 style="color:blue;text-align:center;">This is a heading</h1> <p style="color:red;">This is a paragraph.</p> </body>
我們可以使用不同的CSS選擇器，給元素設置樣式，如下html中，可以使用#desc來選中id爲desc的div元素，使用.btn選擇所有包含類btn的提交按鈕。
<head>
<style>
#desc {
background-color: blue;
}
.btn {
font-size: 20px;
}
</style>
</head>
<body>
<div id="desc">This is a desc</div>
<button class="btn">提交</button>
</body>
在Selenium自動化測試腳本中，通常使用CSS選擇器，來定位網頁中的元素。如以下代碼，查找class爲btn的按鈕，並進行點擊。
driver.find_element_by_css_selector('.btn').click()
建議大家閱讀一下 CSS屬性手冊和 CSS選擇器手冊，以加深對層疊式樣式表的了解。這部分內容不需要大家記憶，在以後的自動化測試工作中，作爲手冊進行查找即可。
