测试开发之前端篇-CSS层叠式样式表

愿君学长松，慎勿作桃李。这篇文章主要讲述测试开发之前端篇-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="https://www.songbingjia.com/android/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>