1.首先CSS的概念：
CSS即就是Cascading Style Sheet层叠样式表，的缩写；
是表现HTML文件样式的语言: 包括对字体，边距，高度，宽度，背景图片，网页定位等设定。
（目前市场企业主要使用CSS3.0）
2.CSS的优势：
内容和表现分离；网页的表现统一，容易修改；丰富的样式，使得页面的布局更加的灵活；减少网页的代码量，增加网页的浏览速度，节省网络带宽；有利于网页被搜索引擎收录。
3.CSS的基础语法：
选择器 {
声明1；
声明2； /* 声明：属性+值*/
}
Style标签：为于<Head> </Head>之间：
<style>
选择器{
声明1；
声明2； /* 声明：属性+值*/
}
</style>
示例代码：
1 <style type="text/css"> 2 /* 3 中写注释 4 */ 5 h1{ 6 color: black; 7 font-size: 20px; 8 font-family: 华文琥珀; 9 } 10 </style> 11 12 </head> 13 <body> 14 <h1> 15 hello world! 16 </h1>
4.三种引入CSS的方式：
行内样式：--->使用style属性导入
内部样式表；--->使用style标签导入
外部样式表；--->链接式（link标签），导入式（@import）
注意：链接式和导入式的区别 以及CSS样式的优先级（就近原则）：
<link/> 标签:是属于XHTML，@import是属于CSS2.1;
使用<link>链接的CSS文件先加载到网页中，再进行编译显示；
使用@import导入式的CSS文件，客户端显示HTML结构，再把CSS文件加载到网页当中；
导入式属于CSS2.1特有的。
就近原则：就近以所修饰的内容远近为标准；
1 <head> 2 <meta charset="UTF-8"> 3 <title>CSS的引入</title> 4 <!--2.采用style标签--> 5 <!-- 6 选择器{ 7 属性：属性值； 8 } 9 --> 10 <style> 11 h2{ 12 font-family: 隶书; 13 font-size: 15px; 14 color: aqua; 15 } 16 </style> 17 18 19 <!--3.外部样式表--> 20 <!--导入式--> 21 <style> 22 @import url(../Resource2/CSS/style_1.css); 23 </style> 24 25 <!--<!–链接式，需要link标签–>--> 26 <!-- 27 <link rel="stylesheet" href="../Resource2/CSS/style_1.css"> 28 --> 29 30 31 </head> 32 <body> 33 <!--1.行内属性（多个属性时，分号隔开）--> 34 <h1 style="font-family: 华文琥珀 ; font-size: 30px;color: darkred;"> 35 我爱学习！ 36 </h1> 37 38 <h2> 39 hello！ 40 </h2> 41 42 <div> 43 啦啦啦~ 44 </div> 45 46 </body>
5.CSS的三种基础选择器：
标签选择器：--->HTML的标签作为 标签选择器的内容；
类选择器；--->可在页面内多次使用；
<html lang="en"> <head> <meta charset="UTF-8"> <title>ID选择器</title> <style> /* ID选择器：定义在标签中，ID属性 ID属性全局唯一不能同名； #id{ 属性：属性值； } */ #a{ color: black; } #a{ color: blue; } #aa{ color: #e1533c; } #b{ color: aqua; } </style> </head> <body> <p id="a"> 这是一个晴朗的早晨！ 啊啊啊啊。 </p> <br> <a href="" id="aa"> 这是一条链接 </a> <br> <span ID="b"> 我是一个粉刷匠，啦啦啦啦~ </span> <br> <div ID="bb"> 嚯哈哈棒棒棒 </div> </body> </html>
ID选择器；--->在一个页面中只能使用一次；
1 <head> 2 <meta charset="UTF-8"> 3 <title>三种基础选择器-->类选择器</title> 4 <style> 5 /* 6 类名在标签中用 class属性定义； 7 类选择器： 8 .类名{ 9 属性：属性值； 10 } 11 */ 12 .a{ 13 color: blue; 14 font-family: 华文琥珀; 15 font-size: 30px; 16 } 17 </style> 18 19 </head> 20 <body> 21 <!--类选择器--> 22 <h1 class="a"> 23 又是正能量的一天！ 24 </h1> 25 <br> 26 <div class="a"> 27 啦啦啦！ 28 </div> 29 <br> 30 <span class="a"> 31 哈哈哈~ 32 </span> 33 <br> 34 <xbf class="a"> 35 这个人很吊！ 36 </xbf>
三种选择器的优先级： ID选择器 > 类选择器 > 标签选择器
1 <html lang="en"> 2 <head> 3 <meta charset="UTF-8"> 4 <title>基础选择器的优先级别</title> 5 <!--类选择器--> 6 <style> 7 .a{ 8 color: blue; 9 } 10 </style> 11 12 <!--标签选择器--> 13 <style> 14 p{ 15 color: #000; 16 } 17 </style> 18 19 <!--ID选择器--> 20 <style> 21 #id{ 22 color: red; 23 } 24 </style> 25 </head> 26 <body> 27 28 <p class="a" id="id"> 29 说明比的考试课代表。 30 不成熟课代表速度快举报的盛开的考虑不了 。 31 </p> 32 </body> 33 </html>
6.CSS的三种高级选择器：
6.1层次选择器：
后代选择器；
子代选择器；
相邻兄弟选择器；
兄弟选择器；
（注：找兄弟时都是向下找兄弟）
1 <html lang="en"> 2 <head> 3 <meta charset="UTF-8"> 4 <title>高级选择器---层次选择器</title> 5 6 <style> 7 p,ul{ 8 border: 1px solid red; 9 } 10 11 /* 12 1.层次选择器--->后代选择器 13 需求：获取body下面的所有p标签 14 body p{ --->中间用空格隔开 15 属性：属性值； 16 } 17 */ 18 body p{ 19 background: blueviolet; 20 } 21 22 /* 23 2.层次选择器--->子代选择器 24 需求：仅选择body下的第一层的p标签 25 body>p{ ---->大于号链接 26 属性：属性值； 27 } 28 */ 29 body>p{ 30 background: chartreuse; 31 } 32 33 /* 34 3.层次选择器---->相邻兄弟选择器（向下找相邻兄弟） 35 首先定位到一个元素 36 需求：获取指定元素的相邻兄弟元素 37 38 E+F{ 先定位到E，在选择相邻的标签F，用'+'连接 39 属性：属性值； 40 } 41 42 #a+p{ --->#a定位到ID->a,再将相邻下一个的p标签内容赋属性 43 属性：属性值； 44 } 45 */ 46 #a+p{ 47 border: 1px solid black; 48 } 49 50 /* 51 4.层次选择器--->通用兄弟选择器（向下找兄弟） 52 先定位到一个指定元素； 53 对指定元素下的，所有兄弟元素进行属性赋值 54 55 E~F{ -->E指定的元素，F是指定元素的兄弟元素的形式 56 属性：属性值； 57 } 58 59 #a~p{ 60 属性：属性值； 61 } 62 */ 63 .p~ul{ 64 background: darkblue; 65 } 66 67 68 69 </style> 70 71 </head> 72 <body> 73 <p>1</p> 74 75 <p id="a" >2</p> 76 77 <p class="p">3</p> 78 79 <ul> 80 <li> 81 <p>4</p> 82 </li> 83 84 <li> 85 <p>5</p> 86 </li> 87 88 <li> 89 <p>6</p> 90 </li> 91 </ul> 92 93 </body> 94 </html>
6.2结构伪类选择器：
结构伪类选择器：
概念：伪选择器，伪元素 是CSS已经定义好的，我们拿来就可以用
格式：
选择器：伪元素{
属性：属性值；
}
伪元素的几种形式：
1.E:first-child -->寻找E的父类选择器F，再找F下的第一个子元素，若不是E类型，就不会被选择。
2.E:last-child -->作为父类下的孩子标签 E 的最后一个元素
3.F E:nth-child(n)-->（可以不用写父级元素）
找到E的父级元素，再找父级元素的第N个子元素，
判断它是不是E元素，不是就不会被选择
4.(F) E:nth-of-type(n) -->找到E的父级元素，再找父级元素下的第N个E元素。
（注意：两者的差别，下面是只找该类型的第n个E元素）
1 <head> 2 <meta charset="UTF-8"> 3 <title>结构伪类选择器</title> 4 5 <style> 6 /*边框*/ 7 p,li{ 8 border: 1px solid red; 9 } 10 /* 11 结构伪类选择器： 12 概念：伪选择器，伪元素 是CSS已经定义好的，我们拿来就可以用 13 格式： 14 选择器：伪元素{ 15 属性：属性值； 16 } 17 伪元素的几种形式： 18 1.E:first-child -->作为父类下的孩子标签 E 的第一个元素 19 2.E:last-child -->作为父类下的孩子标签 E 的最后一个元素 20 */ 21 ul li:first-child{ 22 background: #000; 23 } 24 ul li:last-child{ 25 background: darkblue; 26 } 27 /* 28 3.F E:nth-child(n)-->（可以不用写父级元素） 29 找到E的父级元素，再找父级元素的第N个子元素， 30 判断它是不是E元素，不是就不会被选择 31 */ 32 /*body->父级元素； p->要选择的子元素的类型；n->第N个子元素 33 需求：选择body下面的第二个元素 34 */ 35 p:nth-child(2){ 36 background: black; 37 } 38 p:nth-child(1){ 39 background: black; 40 } 41 /* 42 4.需求：选择body下面的第二个P元素： 43 (F) E:nth-of-type(n) -->找到E的父级元素，再找父级元素下的第N个E元素 44 */ 45 p:nth-of-type(1){ 46 background: black; 47 } 48 </style> 49 50 </head> 51 <body> 52 <h1>结构伪类选择器</h1> 53 <p>1</p> 54 <p>2</p> 55 <p>3</p> 56 <ul> 57 <li>li1</li> 58 <li>li2</li> 59 <li>li3</li> 60 </ul> 61 </body> 62 </html>
6.3属性选择器：
E[attr]: 选择匹配具有属性attr的E元素；
E[attr=val]:选择匹配具有属性attribute的E元素，并且属性值为val;
E[attr^=val]:选择匹配元素E，E并定义了属性attr，属性值以val开头的；
E[attr$=val]:选择匹配元素E，E并定义了属性attr，属性值以val结尾的；
E[attr*=val]:选择匹配元素E，E并定义了属性attr，属性值中包含了val的；
1 <html lang="en"> 2 <head> 3 <meta charset="UTF-8"> 4 <title>高级选择器->属性选择器</title> 5 6 <style> 7 /* 8 给基础代码添加样式 9 */ 10 .demo a{ 11 /*浮动*/ 12 float: left; 13 display: block; 14 height: 50px; 15 width: 50px; 16 border-radius: 10px; 17 background: darkblue; 18 color:white; 19 text-align: center; 20 line-height: 50px; 21 /*取掉下划线*/ 22 text-decoration:none ; 23 margin: 5px; 24 } 25 26 /* 27 属性选择器： 28 */ 29 a[id]{ 30 background: red; 31 } 32 33 a[id=id1]{ 34 background: green; 35 } 36 37 a[href^="https"]{ 38 background: blueviolet; 39 } 40 41 a[class]{ 42 background: black; 43 } 44 </style> 45 </head> 46 <body> 47 <p class="demo"> 48 <a href="https://www.baidu.com" id="id1" class="class1">1</a> 49 <a href=""id="id2">2</a> 50 <a href="" class="class3">3</a> 51 <a href="">4</a> 52 <a href="">5</a> 53 <a href=""id="id6">6</a> 54 <a href="">7</a> 55 <a href="">8</a> 56 <a href="">9</a> 57 </p> 58 </body> 59 </html>
7.盒子模型（Box Model）：
所有的HTML元素都可以看作盒子，在CSS中，盒子模型是在设计和布局时使用。CSS盒子模型本质上是一个盒子，封装周围的HTML元素，它包括：边距（margin），边框（Border），填充（Padding）和实际内容（Content）。
不同部分的说明如下：
外边距（Margin）：清除边框外的区域，外边距是透明的；
边框（Border）：围绕在内边距和内容外的边框；
内边距（Padding）：清除内容外的区域，内边距是透明的；
实际内容（Content）：盒子的内容显示文本和图像。
实例代码：
1 <html lang="en"> 2 <head> 3 <meta charset="UTF-8"> 4 <title>盒子模型</title> 5 6 <style> 7 /* 8 style中写CSS代码 9 */ 10 /*标签选择器*/ 11 div{ 12 border: 8px solid red; 13 padding: 10px; 14 margin: 10px; 15 width: 300px; 16 height: 300px; 17 } 18 </style> 19 </head> 20 <body> 21 <p>盒子模型测试：</p> 22 <div> 23 平常设置的width属性只是作用于Content（实际内容，包括文本和图像）， 24 其实还包括了，Margin（外边距），和border（边框,透明的），padding（内边距,透明的）。 25 在上面的style中: 26 真实的宽：300+10*2+10*2+8*2; 27 真实的高：300+10*2+10*2+8*2。 28 </div> 29 </body> 30 </html>
8.浮动（Float）：
CSS的Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列，往往是用于图像，但它在布局时一样非常有用。
实例代码：
1 <html lang="en"> 2 <head> 3 <meta charset="UTF-8"> 4 <title>浮动</title> 5 <style> 6 img{ 7 width: 50px; 8 height: 50px; 9 float: left; 10 } 11 </style> 12 </head> 13 <body> 14 <p>浮动测试：<b>图片的浮动</b></p> 15 <img src="../Resource2/image/QQ图片.jpg" alt="本人"> 16 <div> 17 我最棒啦~我最棒啦~我最棒啦~我最棒啦~我最棒啦~我最棒啦~我最棒啦~我最棒啦~我最棒啦~ 18 我最棒啦~我最棒啦~我最棒啦~我最棒啦~我最棒啦~我最棒啦~我最棒啦~我最棒啦~我最棒啦~ 19 我最棒啦~我最棒啦~我最棒啦~我最棒啦~我最棒啦~我最棒啦~我最棒啦~我最棒啦~我最棒啦~ 20 我最棒啦~我最棒啦~我最棒啦~我最棒啦~我最棒啦~我最棒啦~我最棒啦~我最棒啦~我最棒啦~ 21 </div> 22 </body> 23 </html>