一.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，后面的会覆盖前面。