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層疊式樣式表

相關文章