一、什么是CSS？
1.CSS 指层叠样式表 (Cascading Style Sheets)。
2.样式定义如何显示 HTML 元素。
3.样式通常存储在样式表中。
4.把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题。
5.外部样式表可以极大提高工作效率。
6.外部样式表通常存储在 CSS 文件中。
7.多个样式定义可层叠为一个。
二、CSS基础语法
1.代码结构
CSS代码由“选择器”和“声明”两部分组成。
#choose{
属性:值;
}
/*#choose就是选择器的名字，#代表的含义在后续选择器中会介绍。
{}里面的就是声明，由各个属性和值组成。*/
CSS代码的注释方法与HTML中的不同，是“/* */”，在两个星号中间写注释内容。
2.CSS的引用方法
CSS一般有三种的引用方法，分别是：
（1）内联式
在起始标签内添加style样式属性，如：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div style="width: 100px; height: 100px; background-color: #f00;">
123
</div>
</body>
</html>
（2）嵌入式
写在style标签里，并且要定义type值为"text/css"，最好放置在head标签里，比如：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#square1{
width: 100px;
height: 100px;
background-color: #f00;
}
</style>
</head>
<body>
<div id="square1">
123
</div>
</body>
</html>
（3）链接式
把CSS样式写在外部文件中，形如：扩展名.css，需要用到link标签：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="square.css"/>
<!--link也要放在head标签里-->
<title></title>
</head>
<body>
<div id="square1">
123
</div>
</body>
</html>
/*square.css*/
#square1{
width: 100px;
height: 100px;
background-color: #f00;
}
（4）导入式
使用@import引入外部CSS，并且@import需写在style标签里，或者是CSS文件里（相当于是向某一个CSS文件导入另一个CSS文件）。如：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
@import "square.css";
/*也可以写作：@import url("square.css");*/
</style>
<title></title>
</head>
<body>
<div id="square1">
123
</div>
</body>
</html>
/*square.css*/
#square1{
width: 100px;
height: 100px;
background-color: #f00;
}
以上四种方法写出来的结果都是一样的：
四种方法的优劣对比：
| 类型 | 执行效率 | 可复用性 | 可维护性 | 兼容性 |
|---|---|---|---|---|
| 内联式 | 高 | 无法复用 | 低 | 高 |
| 嵌入式 | 高 | 无法复用 | 高 | 高 |
| 链接式 | 中高 | 高 | 高 | 高 |
| 导入式 | 低 | 高 | 高 | 低 |
三、CSS选择器
1.标签选择器
定义：以html标签作为选择器。如：
h1{
color: red;
}
p{
color: black;
font-size: 50px;
}
这样子的话，html文件里的h1标签和p标签都会相应地改变样式。
2.类选择器
类选择器使用时首先要在html标签里定义class属性，具体使用如下：
/*类选择器的写法*/
.选择器名{
属性: 值;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.demo1{
font-size: 30px;/*设置字体大小*/
color: #f40;
}
</style>
</head>
<body>
<div class="demo1">
这是类选择器的演示
</div>
</body>
</html>
效果如图：
一个标签也可以拥有多个类选择器：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.size{
font-size: 30px;
}
.color{
color: #f40;
}
</style>
</head>
<body>
<div class="size color">
这是类选择器的演示
</div>
</body>
</html>
效果和上面是一样的：
如果要为拥有相同类名的不同标签设置不同的样式，只需在类选择器前加标签即可：
一个标签也可以拥有多个类选择器：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div.size{
font-size: 30px;
}
div.color{
color: #f40;
}
p.size{
font-size: 20px;
}
p.color{
color: #000;
}
</style>
</head>
<body>
<div class="size color">
这是类选择器的演示
</div>
<p class="size color">
这是类选择器的演示
</p>
</body>
</html>
虽然class的值相同，但是样式却不是一样的：
3.ID选择器
ID选择器的用法和类选择器类似，使用前需要给标签加上id属性，但与类选择器不同的是，ID选择器的id是唯一的，不能像class那样子设置多个的选择器，并且id不能与其他的id同名，具体使用如下：
/*ID选择器的写法*/
#选择器名{
属性: 值;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#pa{
color: #f00;