HTML基础（二）CSS
一、CSS选择器
1. id选择器
a.写在head里面的属性，需要用<style></style>标签包裹住，# 代表通过id选择器查找
例：<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#i1{
height: 48px;
background-color: red;
}
</style>
</head>
b.写在body里面，直接在标签里面添加style属性，css style: 里面的写的就叫做css 每一个样式的间隔用；
例：<div id="i1" style="height: 48px;background-color: #6699CC"></div>
c.写在css文件中，在代码中通过引入css文件
css文件中写的格式与在head中写的格式一样
引入css文件，是在head中添加：<link rel="stylesheet" href="tmp.css">
2. class选择器
a.写在head里面的属性，需要用<style></style>标签包裹住，.（英文的点号）代表通过class选择器查找
例：<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{
height: 48px;
background-color: red;
}
</style>
</head>
b.写在body里面，直接在标签里面添加style属性，css style: 里面的写的就叫做css 每一个样式的间隔用；
例：<div class="c1" style="height: 48px;background-color: #6699CC"></div>
c.写在css文件中，在代码中通过引入css文件
css文件中写的格式与在head中写的格式一样
引入css文件，是在head中添加：<link rel="stylesheet" href="tmp.css">
3.标签选择器（方式与id和class的一样，这边就写一个简单的格式来举例，以下选择器同理）：标签名 代表通过标签选择器查找
例：span{
color: red;
background-color: blue;
}
4.标签层级选择器：标签内的标签 通过标签+空格+标签 代表通过标签选择器查找
例：span标签下面所有div标签颜色改变
span div{
color: aqua;
background-color: red;
}
5.class层级选择器：通过CLASS标签选择器定位第一层，在通过层级选择器定位第二层
例：.c1 div{
background-color: #336699;
height: 48px;
}
6.id层级选择器：通过ID标签选择器定位第一层，在通过层级选择器定位第二层
例：#i2 div{
background-color: black;
height: 48px;
}
7.id组合选择器：应用于以id选择器进行css样式设置的，可以通过id z1 z2 z3 共用一套css样式 组合 通过逗号间隔
例：#z1,#z2,#z3{
background-color: chocolate;
height: 48px;
}
8.class组合选择器：应用于以CLASS选择器进行css样式设置的，可以通过CLASS s1 s2 s3 共用一套css样式 组合 通过逗号间隔
例：.s1,.s2,.s3{
background-color: darkmagenta;
height:48px;
}
9.属性选择器：对选择到的标签 在通过属性进行筛选 可以和层级选择器连用
例：div[s='dsx']{
background-color: darkred;
height: 48px;
}
总结：
CSS可以写在三个地方，分别是1、标签中增加属性style，
2、header中添加标签style标签，在标签中添加CSS，
3、引入CSS样式表，实际就是将header中的style标签复制到一个以css为结尾的文件中，通过在header中添加link标签，引入css样式表<link rel="stylesheet" href="tmp.css">
二、CSS优先级
标签中style优先级最高，其次在代码中就近找，即：由内而外，由近及远
id、class、标签之间的优先级为：id>class>标签
如果要同时引用两个class的css的样式，可以在标签里直接写两个class的name c1 c2，中间用空格隔开
例：<body>
<div class="c1 c2" style=" font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important;">></div>
</body>
三、CSS属性
1.heigth：高 width：宽 border：边框 像素（1px） 实线（solid） dotted（虚线）颜色（red）
a.宽高的设定是像素
例：<div style="height: 48px;width: 48px;border: 1px solid red"></div>
b.宽高的设定是百分比，这边需要注意的是，高度不能设置百分比，因为有滚动条，设置百分比没有意义
例：<div style="height: 48px;width: 80%;border: 1px dotted red"></div>
c. 边框 border 上下左右边框 都可单独配置
例：<div style="height: 48px;border-left: 1px dotted red"></div>
2.font-size:字体大小 px font-weight:字体加粗 bold
例：<div style="height: 48px;width: 80%;border: 1px solid red;font-size: 14px;font-weight: bold"></div>
3.text-align 水平文本对齐方式 left:文本左对齐 right:文本右对齐 center:中间对齐 inherit:父类继承
a.平行方向左右居中：text-align: center
例：<div style="height: 48px;width: 80%;border: 1px solid red;font-size: 14px;text-align: center">测试</div>
b.垂直方向居中 line-height：垂直方向要根据标签高度
例：<div style="height: 48px;width: 80%;border: 1px solid red;font-size: 14px;text-align: center;line-height: 48px">测试</div>
3.float:浮动 块级标签浮动后 相当于分层 都向左浮动 块级标签会便在一行 如果超过宽度超过100则会换行
通过浮动可以将块及标签放到一行，相当于不同层，但是超过100%的宽度就会换行，超过100%的宽度，是相对于外层div来判断的。 none:默认不浮动、inherit:父类继承
例：<div style="width: 20%;float: left">1</div>
<div style="width: 20%;float:left;">2</div>
<div style="width: 20%;float:right;">3</div>
块及标签的占满100%是相对来说，相对与他外层的div
例：<div style="width: 400px;height: 400px;border: 1px solid black;">
<div style="width: 100px;height: 40px;float:left;"></div>
<div style="width: 100px;height: 40px;float:left;"></div>
<div style="width: 100px;height: 40px;float:left;"></div>
<div style="width: 100px;height: 40px;float:left;"></div>
<div style="width: 100px;height: 40px;float:left;"></div>
4.display：展示属性 块级标签和行内标签之间切换的属性
块级标签和行内标签之间切换的属性 display:inline，块级标签转换为行内标签 display:block 行内标签转换为块级标签
行内标签无法设置无法设置高度、宽度、padding、margin，可以通过display的display:inline-block，行内标签的自己多大就占多大的特性 又有块级标签使用 宽、高、内外边距的特性
a.display:inline 块级标签转换为行内标签
例：<div style="height: 100px;background-color: black;display: inline">外联标签</div>
b.display：block 内联标签转换为块及标签
例：<span style="height: 100px;background-color: red;display: block;">内联标签</span>
c.通过display:inline-block 可以完美的解决这个问题 他既有行内标签的自己多大就占多大的特性 又有块级标签使用 宽、高、内外边距的特性
例：<span style="background-color: blue;width: 100px;height: 100px;display: inline-block;">测试</span>
d.display：none 让标签消失，这个属性很重要，在UI自动化测试定位元素的时候很重要
例：<span style="background-color: #336699;display: none">我不显示的</span>
5.外边距 margin 内边距 padding
a.margin 外边距 自己针对外围的div产生变化 外边距撑大外层
例：<div style="border: 1px solid red;height: 100px">
<div style="height: 70px;margin-top: 30px"></div>
</div>
b.padding 内边距 自身的边距增加 从上到下增加 内边距扩大自身
例：<div style="border: 1px solid red;height: 100px">
<div style="height: 70px;padding: 10px">内边距增加</div>
</div>
