一、css介绍
css：层叠样式表，用于美化网页；使用css，可以将html页面的内容和样式分开，让结构更加健壮，就像一棵树，枝干分明，才能茁壮成长。开发中，往往html和css（外部样式表）文件分开，再通过link引用css文件，这样，浏览器就会加载css，按照css文件中的样式渲染html文件。
css语法：1、选择器 2、声明（带图） #选择器就是html中的标签
css引入方式：（1）外部样式表（重要）、（2）内联样式、（3）行内样式表
（1）外部样式表分链接式和导入式 链接式（常用）：
1 <!-- 有一个test.css文件 2 ?3 然后在html文件中通过link标签引入： --> 4 <!DOCTYPE html> 5 <html lang="en"> 6 <head> 7 ????<meta charset="UTF-8"> 8 ????<!-- 在html文件中通过link标签引入 --> 9 ????<link rel="stylesheet" href="test.css">10 </head>11 <body>12 ????<p>这是一个标签</p>13 </body>14 </html>
（2）（3）内联样式和行内样式表
<!-- 内联样式 ?通过style标签 --><!doctype html><html> ???<head> ???????<meta charset="utf8"> ???????<style> ???????????p { ???????????????color: red; ???????????} ???????</style> ???</head> ???<body> ???????<p>这是一个p标签！</p> ???</body></html><!-- 行内样式 --><!doctype html><html> ???<head> ???????<meta charset="utf8"> ???</head> ???<body> ???????<p style="color: blue;">这是一个p标签！</p> ???</body></html>二、选择器
（1）基本选择器
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 ????<meta charset="UTF-8"> 5 ????<title>Document</title> 6 ????<style> 7 ????????/*标签选择器p 将所有p标签字体颜色设为红色*/ 8 ????????p{ 9 ????????????color: red;10 ????????}11 ????????12 ????????/*ID选择器 将id="a"的元素字体设为红色*/13 ????????#a{14 ????????????color: red;15 ????????}16 17 ????????/*类选择器 将所有样式类含c1的元素字体颜色设为红色*/18 ????????.c1{19 ????????????color: red;20 ????????}21 22 ????????/*通用选择器 用*选择所有元素*/23 ????????*{24 ????????????color: green;25 ????????}26 ????</style>27 </head>28 <body>29 ????<p id="a">这是一份标签</p>30 ????<p class="c1">这也是一份标签</p>31 </body>32 </html>（2）组合选择器
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 ????<meta charset="UTF-8"> 5 ????<title>高级选择器</title> 6 ????<style type="text/css"> 7 ?????????8 ????????/*后代选择器 在css中使用非常频繁*/ 9 ????????/*div ?p{10 ????????????color: red;11 ????????}12 13 ????????div div p{14 ????????????color: yellow;15 ????????}16 17 ????????.container div p{18 ????????????color: green;19 ????????}*/20 ????????/*子代选择器*/21 22 ????????.container>p{23 ????????????color: yellowgreen;24 ????????}25 26 ????????/*交集选择器*/27 28 ????????h3{29 ????????????width:300px;30 ????????????color: red;31 ????????}32 33 ????????.active{34 ????????????font-size: 30px;35 ????????}36 37 ????????h3.active{38 ????????????background-color: yellow;39 ????????}40 41 ????????/*并集选择器 （组合） ?设置多个标签中的统一样式*/42 ????????a,h4{43 ????????????color: #666;44 ????????????font-size: 20px;45 ????????????text-decoration: none;46 ????????}47 ????????48 ????????/* * ??通配符选择器 ??*/49 ????????/* 性能有点差*/50 ????????html,body,div,p,span,a{51 52 ????????????color: red;53 ????????54 ????????}55 56 57 ????</style>58 </head>59 <body>60 61 ????<div class="container">62 ????????<p>我是另一个段落</p>63 ????????<div>64 ????????????<p>我是个段落</p>65 ????????????<a href="#">luffy</a>66 ????????</div>67 ????????<p>我是另外一个段落2</p>68 69 ????????<ul>70 ????????????<li class="item">71 ????????????????<h3 class="active">我是一个H3</h3>72 ????????????????<h4>我是一个h4标题</h4>73 ????????????</li>74 ????????????<li> ???75 76 ????????????????<h4>我是一个h4标题</h4>77 ????????????????<a href="#">BAT</a>78 ????????????</li>79 ????????</ul>80 ????</div>81 ????82 </body>83 </html>（3）属性选择器
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 ????<meta charset="UTF-8"> 5 ????<title>属性选择器</title> 6 ????<style type="text/css"> 7 ????????label[for]{ 8 ????????????color: red; 9 ????????????font-size: 20px;10 ????????}11 12 ????????label[for=‘pwd‘]{13 ????????????color: yellow;14 ????????}15 ????????16 ????????/*以...开头*/17 ????????label[for^=‘vip‘]{18 ????????????font-size: 30px;19 ????????}20 ????????/*以...结尾*/21 ????????label[for$=‘p2‘]{22 ????????????font-size: 20px;23 ????????}24 ????????/*包含...*/25 ????????label[for*=‘ser‘]{26 ????????????color: green;27 ????????}28 29 ????????input[type=‘text‘]{30 ????????????background-color: purple;31 ????????}32 33 ????</style>34 </head>35 <body>36 ????37 ????<!-- 属性选择器 通常在 表单控件中 使用比较频繁-->38 ????<div class="box">39 ????????<form action="">40 ????????????<label for="user">用户名：</label>41 ????????????<input type="text" name="" id="user">42 ????????????<label for="pwd">密码：</label>43 ????????????<label for="vip1">vip1</label>44 ????????????<label for="vip2">vip2</label>45 ????????????<label for="user2">用户名2：</label>46 ????????????<label for="user3">用户名3：</label>47 ????????</form>48 ????</div>49 </body>50 </html>（4）伪类选择器
?1 <!DOCTYPE html> ?2 <html lang="en"> ?3 <head> ?4 ????<meta charset="UTF-8"> ?5 ????<title>伪类选择器</title> ?6 ????<style type="text/css"> ?7 ??8 ????????/*‘爱恨原则‘ love hate*/ ?9 ????????/*没有被访问的a标签的样式*/ 10 ????????/*.box ul li.item1 a:link{ 11 ?????????????12 ????????????color: #666; 13 ????????} 14 ????????/*访问过后的a标签的样式*/ 15 ????????/*.box ul li.item2 a:visited{ 16 ?????????????17 ????????????color: yellow; 18 ????????}*/ 19 ????????/*鼠标悬停时a标签的样式*/ 20 ????????/*.box ul li.item3 a:hover{ 21 ?????????????22 ????????????color: green; 23 ????????}*/ 24 ????????/*鼠标点住的时候a标签的样式*/ 25 ????????/*.box ul li.item4 a:active{ 26 ?????????????27 ????????????color: yellowgreen; 28 ????????}*/ 29 ?????????30 ????????/*选中第一个元素*/ 31 ????????/*div ul li:first-child{ 32 ????????????font-size: 20px; 33 ????????????color: red; 34 ????????}*/ 35 ????????/*选中最后一个元素*/ 36 ????????/*div ul li:last-child{ 37 ????????????font-size: 20px; 38 ????????????color: yellow; 39 ????????}*/ 40 ?????????41 ????????/*选中当前指定的元素 ?数值从1开始*/ 42 ????????div ul li:nth-child(3){ 43 ????????????font-size: 30px; 44 ????????????color: purple; 45 ????????} 46 ?????????47 ????????/*n表示选中所有 从0开始的 ?0的时候表示没有选中*/ 48 ????????/*div ul li:nth-child(n){ 49 ????????????font-size: 40px; 50 ????????????color: red; 51 ????????}*/ 52 ?????????53 ????????/*偶数*/ 54 ????????/*div ul li:nth-child(2n){ 55 ????????????font-size: 50px; 56 ????????????color: gold; 57 ????????}*/ 58 ????????/*奇数*/ 59 ????????/*div ul li:nth-child(2n-1){ 60 ????????????font-size: 50px; 61 ????????????color: yellow; 62 ????????}*/ 63 ????????/*隔几换色 ?隔行换色*/ 64 ?????????65 ????????/*div ul li:nth-child(5n+1){ 66 ????????????font-size: 50px; 67 ????????????color: red; 68 ????????}*/ 69 ?70 ?71 ????</style> 72 </head> 73 <body> 74 ?75 ????<div class="box"> 76 ????????<ul> 77 ????????????<li class="item1"> 78 ????????????????1 79 ????????????????<a href="#">张三</a> 80 ????????????</li> 81 ????????????<li class="item2"> 82 ????????????????2 83 ????????????????<a href="#">李四</a> 84 ????????????</li> 85 ????????????<li class="item3"> 86 ????????????????3 87 ????????????????<a href="#">王八</a> 88 ????????????</li> 89 ????????????<li class="item4"> 90 ????????????????4 91 ????????????????<a href="#">赵六</a> 92 ????????????</li> 93 ????????????<li class="item4"> 94 ????????????????5 95 ????????????????<a href="#">赵六</a> 96 ????????????</li> 97 ????????????<li class="item4"> 98 ????????????????6 99 ????????????????<a href="#">赵六</a>100 ????????????</li>101 ????????????<li class="item4">102 ????????????????7103 ????????????????<a href="#">赵六</a>104 ????????????</li>105 ????????????<li class="item4">106 ????????????????8107 ????????????????<a href="#">赵六</a>108 ????????????</li>109 ????????????<li class="item4">110 ????????????????9111 ????????????????<a href="#">赵六</a>112 ????????????</li>113 ????????????<li class="item4">114 ????????????????10115 ????????????????<a href="#">赵六</a>116 ????????????</li>117 ????????</ul>118 ????</div>119 ????120 </body>121 </html>（5）为元素选择器
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 ????<meta charset="UTF-8"> 5 ????<title>伪元素选择器</title> 6 ?7 ????<style type="text/css"> 8 ?????????9 ????????/*设置第一个首字母的样式*/10 ????????p:first-letter{11 ????????????color: red;12 ????????????font-size: 30px;13 14 ????????}15 ????????16 ????????/* 在....之前 添加内容 ??这个属性使用不是很频繁 了解 ?使用此伪元素选择器一定要结合content属性*/17 ????????p:before{18 ????????????content:‘alex‘;19 ????????}20 ????????21 ????????22 ????????/*在....之后 使用非常频繁 通常与咱们后面要讲到布局 有很大的关联（清除浮动）*/23 ????????p:after{24 ????????????content:‘&‘;25 ????????????color: red;26 ????????????font-size: 40px;27 ????????}28 ????</style>29 </head>30 <body>31 32 ????<p>33 ????????我是一个段落34 35 ????</p>36 ????37 </body>38 </html>（6）选择器的权重
内联样式1000
id选择器100
类选择器10
元素选择器1
CSS的选择器
原文地址：https://www.cnblogs.com/NuoMiGao/p/10044831.html