自动化测试第三节课HTML，CSS样式

CSS基本介绍

CSS是层叠样式表，它用来控制html标签的样式，在美化网页中起到非常重要的作用。

CSS的编写格式

编写格式是键值对形式的，如：color: red

CSS的三种书写格式

行内样式:(内联样式)直接在标签的style属性中书写

<p style="color:blue;">这是段落标签1<p>

业内样式:在网页的style标签中书写

html代码内使用css样式,然后标签进行绑定，或者直接使用p{}绑定标签的方式

提取为公共的css文件

html 中用<link rel="stylesheet" href="common.css">进行css文件的引入

若业内样式与css文件引入，没有优先级，而是按顺序

选择器

选择器分为一下几种

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    .cs{
        color: red;
    }
    .dlcs{
        color: black;
    }
    #tom{
        color:yellow
    }
        
    </style>

</head>
<body>
    <P style="color: red; font-size: 30px;">这是一个段落标签1</P>

    <p class="cs dlcs" id='tom'>标签2</p>
    <p class="cs" id='tom'>标签2</p>
    <p class="dlcs">标签三</p>
</body>
</html>

这是行内样式的多种选择，通过class，id绑定样式

并列选择器/群组选择器

div, dlname{color: red;}

类名dlname，标签选择器div，如其名，并列，满足其一要求即可。

复合选择器

两个或多个基础选择器，通过不同的方式组合而成的。

div.dlname{color: red;}
含div标签及类名含dlname，可使用其样式，可任何组合。

后代选择器

后代选择器可以选择作为元素后代的标签。

<div>
    <p>div中的p标签</p>
    <span>div中的span标签</span>
    <span>
        <p>div里面span里面的p标签</p>
    </span>
</div>
<p>外面的p标签</p>

取值方式:

div p{
        color:red;
}

div下的p标签变颜色

直接后代选择器

<div>
    <p>div中的p标签</p>
    <span>div中的span标签</span>
    <span>
        <p>div里面span里面的p标签</p>
    </span>
</div>
<p>外面的p标签</p>

注意：直接后代，就是div中第一个p标签，下面的不算。

div>p{
        color:red;
}

div中的p标签变颜色

相邻兄弟选择器

<div>
    <p>div中的p标签</p>
    <span>div中的span标签</span>
    <span>
        <p>div里面span里面的p标签</p>
    </span>
</div>
<p>与div相邻的p标签</p>
<p>与p相邻的p标签</p>

div+p{
        color:red;
}

这里div与p同级别，与div相邻的p标签变为红色

属性选择器

<div name='tom'>1111</div>
<div name='cat'>2222</div>
<div>3333</div>

div[name]{
        color:red;
}

含name属性的变颜色

伪类选择器

:active          向被激活的元素添加样式
:focus           向拥有键盘输入焦点的元素添加样式
:hover           当鼠标悬浮在元素上方时，向元素添加样式
:link            向未背访问的链接添加样式
:visited         向已被访问的链接添加样式
:first-child     向元素的第一个子元素添加样式
:lang            向带有指定lang属性的元素添加样式

例如淘宝就用到了:hover