CSS is the abbreviation of Cascading Style Sheets. It is used to describe how to display HTML elements on screen, paper or other media, including defining the layout, style, size, position and color of web pages and their elements.
The syntax of CSS is expressed as:
The following is a simple example of setting the background color of the body of the webpage, the color and alignment of the title (h1), and the font and size of the paragraph (p).
body {
background-color: lightblue;
}
h1 {
color: white;
text-align: center;
}
p {
font-family: verdana;
font-size: 20px;
}There are 3 ways to reference style sheets in web pages, namely:
- Use the link element in the head to import an external style sheet file.
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>- Use the style element in the head of the web page to define the content of the style sheet.
<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>- Use the style attribute to directly add style content to the element.
<body>
<h1 style="color:blue;text-align:center;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>
</body>We can use different CSS selectors to style elements. In the following html, you can use #desc to select the div element with an id of desc, and use .btn to select all submit buttons that contain the class 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>In Selenium automated test scripts, CSS selectors are usually used to locate elements in a web page. Like the following code, find the button whose class is btn and click it.
driver.find_element_by_css_selector('.btn').click()I suggest you read the CSS property manual and CSS selector manual to deepen your understanding of cascading style sheets. This part of the content does not need to be remembered by everyone, and it can be searched as a manual in the future automated testing work.
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。