一.CSS简介
CSS是什么？CSS，即“Cascading Style Sheet（层叠样式表）”，是用来控制网页的外观的一门技术。HTML、CSS和JavaScript是前端技术中最核心的三个元素。其中：
HTML控制网页的框架结构
CSS控制网页的外观
JavaScript控制网页的行为。
二.CSS的引入方法
css的引入方法有四种：
1.行内样式
<html> <head> <meta charset="utf-8"> <title></title> <body> <p style="color: #CC0000;">这个是红色字体</p> </body> </html>
2.内嵌样式
<html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .big{font-size: 30px;} </style> </head> <body> <p class="big">css样式内容写在style标签内</p> </body> </html>
3.外链样式
首先在css目录里建立一个1.css的css文件
p{ font-size:48px; }
html文件内容：
<html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" type="text/css" href="css/1.css" /> </head> <body> <p>我的大小是48px。</p> </body> </html>
4.导入
导入位置可以是在css文件中或者是style标签中。导入语法是@import url(’./xxx.css’)或者@import ‘./xxx.css’
@import url("css/1.css");
或者
@import './xxx.css';
三.层叠关系
1.当属性一致的时候，越在html后面的优先级越高，行内样式的优先级最高，因为行内样式最靠近元素。
<html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" type="text/css" href="css/css02.css"/> <style type="text/css"> .red{ color: #006400; } </style> </head> <body> <P>css优先级</P> <p class="red" style="color: pink;">宁静致远</p> </body> </html>
这里的显示结果是粉色，因为行内样式最靠近元素p。
2.当属性不一致则属性相加。
<html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" type="text/css" href="css/css02.css"/> <style type="text/css"> .red{ color: #006400; font-size: 48px; font-family: "simsun"; } </style> </head> <body> <P>css优先级</P> <p class="red" style="color: pink;">宁静致远</p> </body> </html>
显示结果:
3.加上 !important代表权重最大，不可以覆盖。
<html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" type="text/css" href="css/css02.css"/> <style type="text/css"> .red{ color: red !important; color: #006400; color: #DBCBE6; font-size: 48px; font-family: "simsun"; } </style> </head> <body> <p class="red" style="color: pink;">宁静致远</p> </body> </html>
显示结果:
四.CSS选择器
首先选择器类型有7种：
| 选择器类型 | 权重 |
| 通配符选择器 | 0.5 |
| 标签选择器 | 1 |
| class类选择器 | 10 |
| id选择器 | 100 |
| 包含选择器 | |
| 群组选择器 | |
| 直接子集选择器 |
选择器优先级
表格中的权重越大，优先级越高，而包含选择器，直接子集选择器的权重相加，权重越大，优先级越高。下面介绍这7种选择器：
1.通配符选择器，在style样式里直接加*{color: red;}，代表所有的文字颜色皆为红色。
2.标签选择器，在style样式里直接写标签然后加属性
p{ font-size:40px;} span{ color:red;}
代表html页面中所有的p标签的字大小为40px，所有span标签里的字体颜色均为红色。
3.class类选择器，在头部style里面加类及其属性，在body里面加class。
<html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .red{ color: red; font-size: 48px; font-family: "simsun"; } </style> </head> <body> <p class="red">宁静致远</p> </body> </html>
4.id选择器，在头部style里面加类及其属性，在body里面加class。
<html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .red{ color: #DBCBE6; font-size: 48px; font-family: "simsun"; } </style> </head> <body> <p id="red" >宁静致远</p> </body> </html>
5.包含选择器，类名1 类名2{属性}，其中类名2必须是类名1的后代。（中间用空格隔开。）
<html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> ul li{background-color: #125AA2;} /* 选择的li标签是ul的后代 */ /* 尽量在包含选择器中父辈选择类名或者id */ /* 一般选择器层级不超过三层 */ </style> </head> <body> <h1>包含选择器</h1> <ul> <li>ul中的li1</li> <li>ul中的li2</li> <li>ul中的li3</li> </ul> </body> </html>
6.群组选择器，类名1,类名2,类名3{属性}，类名1,类名2,类名3公用下面的属性。（中间用,隔开。）
<html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title></title> <style type="text/css"> h1,p,leiming{ color:red; } </style> </head> <body> <h1>css选择器</h1> <p>选择到html元素，应用css样式</p> <div class="leiming">宁静致远</div> </body> </html>
7.直接子集选择器,类名1>类名2>类名3，其中是类名3必须是类名2的子集，类名2必须是类名1的子集，这样直接控制类名3的属性。（中间用>隔开。）
<html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> ul>li>p{color: #125AA2;} </style> </head> <body> <h1>css选择器</h1> <p>选择到html元素，应用css样式</p> <ul> <li id="myid">id选择器</li> <li class="odd">class类选择器</li> <li>包含选择器</li> <li><p>标签选择器</p></li> <li>通配符选择器</li> </body> </html>
这里只有p标签选择器的文字颜色会变红。
五.css优先级
1.有！important 修饰符最高
2.css越靠近元素的优先级越高
3.选择器一致的情况下style行内样式优先级高，同样的css，后面的会覆盖前面。
