简识CSS
1.CSS：样式表，级联样式表，层叠样式表
2.CSS的基础语法：
CSS代码写在style标签里面，放在head标签中；大括号中写键值对语法 ；
color ：文字颜色
font—family：字体
font—size：字号
text—indent：首行缩进，单位是em，代表一个文字的间距
text—alight：文本对齐方式，默认是left，还可以设置center居中，right居左
实体化三属性：
width：宽度
height：高度
background：背景颜色属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
p{ color: red; font-size: large; font-family: 楷体; text-indent: 2em;
text-align: left; width: 300px; height: 100px; background: lightskyblue}
</style>
</head>
<body>
<p>小猪猪猪猪哈哈哈哈<br>111111111111111</p>
</body>
</html>
3.标签选择器
直接在CSS中写标签的名字就可以选中对应的标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
p{ color: orangered;}
div{
color: yellow; }
span{
color: green;}
</style>
</head>
<body>
<p>小猪猪猪猪哈哈哈哈111111111111111</p>
<div>我是div标签，代表大盒子（容器用来存放内容的）</div>
<span>我是span标签，代表小盒子（容器用来存放内容的）</span>
</body>
</html>
4.id和class选择器
id选择器语法：#名字，特点：不能重复，也不能一个标签拥有多个id；
class类选择器语法：.名字，特点：可以重复使用，一个标签可以有多个类名（就类似于人的称号一样）；
注意：class类选择器使用频率高于id选择器。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#p1{ color: yellow;}
#div1{ color: deeppink;}
#span1{color: green;}
.div1{color: chocolate;}
.pig {color: blueviolet; font-size: 20px}
/*.p2{font-size: 50px;}*/
</style>
</head>
<body>
<p id="p1">小猪猪猪猪哈哈哈哈111111111111111</p>
<br>
<div id="div1">我是div标签，代表大盒子（容器用来存放内容的）</div>
<br>
<span id="span1">我是span标签，代表小盒子（容器用来存放内容的）</span>
<br>
<p class="p2 pig">小猪猪猪猪哈哈哈哈222222222222222222</p>
<br>
<p class="p2">99999999999</p>
<br>
<div class="div1">我是div标签33333333333</div>
<br>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
span{font-size: 100px}
.google_blue{color: blue}
.google_juhong{color: #cc3300}
.google_orange{color: orange}
.google_green{color: green}
</style>
</head>
<body>
<span class="google_blue">G</span>
<span class="google_juhong">o</span>
<span class="google_orange">o</span>
<span class="google_blue">g</span>
<span class="google_green">l</span>
<span class="google_juhong">e</span>
</body>
</html>
5.CSS的引入方式：
内嵌式：
style标签中放在head中；
优势：电商网站的首页必须用这种方式，因为点上首页要求嫁在速度必须快，内嵌式比外嵌式更快；
劣势：html和css代码没有实现分离，不方便修改；
外链式：
通过link放在head标签中，吧外部的css文件引入到html文件中；
优势：实现了代码分离，方便修改和管理；
劣势：运行速度比内嵌式慢；
行内式：
这种形式一定不要用，它会让代码量变得非常庞大，不方便修改；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="CSS_1.css">
</head>
<body>
<span class="google_blue">G</span>
<span class="google_juhong">o</span>
<span class="google_orange">o</span>
<span class="google_blue">g</span>
<span class="google_green">l</span>
<span class="google_juhong">e</span>
<br>
<!--行内式-->
<span style="color: crimson; font-size: 50px">哈哈哈哈哈哈哈哈哈哈哈哈哈</span>
</body>
</html>
css代码：
span{font-size: 100px}
.google_blue{color: blue}
.google_juhong{color: #cc3300}
.google_orange{color: orange}
.google_green{color: green}
注意：
基础选择器权重问题：
id选择器>class选择器>标签选择器
6.后代选择器和并集选择器
后代选择器：
span div，用空格来连接，意思是找到后代元素；
注意：后代可以是儿子，孙子，重孙。。。。。。。。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> div span{color: crimson;font-size: 30px} </style> </head> <body> <div> <span> <p>111111111111</p> </span> <span><h>我是标题</h></span> </div> </body> </html>
并集选择器：
div,h1,span,.span,#h2
用逗号连接选择器，这些元素将会同时被选中；
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> h1{color: darkblue} div,.div1,h2,span,#span2{color: coral; font-size: 25px} </style> </head> <body> <div>11111111</div> <br> <div class="div1">0000000000</div> <h1>222222222222</h1> <h2>44444444444</h2> <span>33333333333</span> <br> <span id="span2">99999999999</span> </body> </html>
7.标签指定式（指定标签式）
div.类名
注意：标签和类名之间没有空格。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> div{color: deeppink;font-size: 20px} div.div1{color: gold;font-size: 30px} div.div2{color: lime;font-size: 50px} </style> </head> <body> <div >1111111111</div> <div class="div1">2222222222</div> <div class="div2">3333333333</div> </body> </html>
8.高级权重对比
引入方式对比：
外链和内嵌权重相同，先写的会被后写的覆盖；
内嵌式权重最大，如果想覆盖它，就只能给样式中添加！important来把权重提高————但是这种方式只是了解，不随意用的。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>有个人爱你很久很久</title> <style type="text/css"> p{color: #cc3300!important;} </style> </head> <body> <p style="color:blue">有个人爱你很久很久</p> </body> </html>
复合选择器权重：
id为100斤，class类名为10斤，标签为1斤；
综合起来大的权重就高，如果权重是一样的，先写的被后写的覆盖。
9.css常用属性：
font-weight:——设置字体粗细的，normal代表不加粗，bold代表加粗；
font-style——设置字体倾斜，italic代表倾斜，normal代表不倾斜；
text-decoration——设置线，none没有线，underline下划线，overunder上划线，line-though贯穿线删除线（）
world-break：bbreak-all 强制换行；
：hover——伪类写法，代表鼠标悬停状态的样式。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title ></title> <style type="text/css"> <!-- 不加粗，加粗--> h1{font-weight: normal} p{font-weight: bold} /*不倾斜，倾斜*/ em{font-style: normal} h1{font-style: italic} /*贯穿线，下划线，上划线，没有*/ #a1{text-decoration: line-through} #a2{text-decoration: underline} #a3{text-decoration: overline} #a4{text-decoration: none} #div1{width: 100px;height: 200px;background: deeppink;} #div2{width: 100px;height: 200px;background: yellow;word-break: break-all} /*:hover 伪类，鼠标悬停状态的样式设置，这种写法叫伪类*/ #div3:hover{color: #cc3300} </style> </head> <body> <h1>我是h1标签，我想不加粗</h1> <p>我是p标签，但是我想加粗</p> <em>我是em标签，我不想倾斜</em> <h2>我是h2标签，但是我想倾斜</h2> <a href="###" id="a1">哈哈哈哈哈哈我是默认的，我也不知道去哪儿</a> <br> <br> <a href="###" id="a2">哈哈哈哈哈哈我是默认的，我也不知道去哪儿</a> <br> <br> <a href="###" id="a3">哈哈哈哈哈哈我是默认的，我也不知道去哪儿</a> <br> <br> <a href="###" id="a4">哈哈哈哈哈哈我是默认的，我也不知道去哪儿</a> <br> <div id="div3">有个人爱你很久很久</div> <br> <div id="div1">哦啊数据库小女子本单位劳动呢的哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈很到位毫无二打哈电话我饿额度和</div> <br> <br> <div id="div2">qsgeyiefhbxa;DJEUDHGFGSASBFDSEIFHDSDUUEqsgeyiefhbxa;DJEUDHGFGSASBFDSEIFHDSDUU</div> </body> </html>
10.行高属性和边框属性
行高属性：
一行文字结束到上一行文字结束的间距：line-height；
边框属性：
border：1px solid（dashed） red
边框 粗细 实线（虚线） 颜色
如果想单独设置某个方向只需要：border-left（right、top、bottom）
注意：边框属性只有实线和虚线是没有兼容性问题的，其他方式的线都会有不同程度的兼容问题，如果程序员使用了，一定会报错
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> p{width: 200px;height: 300px;background: yellow;line-height: 50px;border:10px solid red } div{width: 500px;height: auto; background: yellowgreen;border-left: 10px dashed green; border-right: 10px dashed blue; border-top: 10px dashed orange; border-bottom: 10px dashed purple;} </style> </head> <body> <p>哈哈哈哈啊啊哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈啊啊啊啊啊啊啊啊</p> <br> <div>从国家二胎政策开放之后，就有不少宝妈加入了备战二胎的大军中。但是有很多宝妈在备孕的过程中是不顺利的，发现怀二胎比头胎要困难很多，用尽了各种方法，就是怀不上。很多宝妈就有一个疑问，备孕多长时间算是不孕了呢？虽然说二胎备孕的时间长短可能与宝妈的身体素质有关系，但是与宝妈受孕的最佳时间也是分不开的。如果在夫妻双方身体都健康的情况下，75％会在宝妈备孕的6个月以内就会备孕成功，90％的会在一年以内备孕成功。如果说宝妈备孕的时间已经超过一年，还是没有成功，那可能就是不孕，这时候宝妈就需要去医院进行相关检查。</div> </body> </html>
11.css盒子模型组成
盒子模型的组成=宽高+边框+内边距（内容和边框的距离）+外边距（盒子和盒子之间的距离）
当然测试人员不需要了解更多的这个，只需要能够描述边距之间的关系就好。
12.HTML5中的一些新标签
注意：这些HTML5的新标签只能使用在手机端网站的书写中，可以提升搜索引擎对网站的优化，不能用在PC端网站，因为IE低版本不能识别这些新标签
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <header>头部</header> <nav>导航条</nav> <aside>侧导航</aside> <article>文章块</article> <footer>底部导航</footer> </body> </html>
浙公网安备 33010602011771号