1、什么是CSS
是一组样式设置的规则，用于控制页面的外观样式。
2、为什么使用CSS
（1）实现内容与样式的分离，便于团队开发
（2）样式复用，便于网站的后期维护
（3）页面的精准控制，让页面更精美
3、CSS的作用
（1）页面外观美化
（2）布局和定位
4、CSS应用方式
也称为CSS引用方式，有三种方式：内部样式、行内样式、外部样式。
（1）内部样式
在title标签下面建一个style标签，在style标签里面写css代码。
优点：在同一个页面内部便于复用和维护。
缺点：在多个页面之间可重用性不高。
（2）行内样式
也称为嵌入样式，使用HTML标签的style属性定义，只对设置style属性的标签起作用。
<div style="在这里写CSS代码"></div>
优点：方便、直观。
缺点：缺乏可重用性。
（3）外部样式
使用单独的.css文件定义，然后在页面中使用link标签引入。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>外部样式</title>
<!-- 引入CSS文件 -->
<link rel="stylesheet" href="./我的样式.css">
</head>
<body>
</body>
</html>
优点：使得CSS样式与HTML页面分离，便于整个页面系统的规划和维护，可重用性高。
缺点：CSS代码由于分离到单独的CSS文件中，容易出现CSS代码过于集中，若维护不当则容易造成混乱。
5、选择器
CSS选择器是用来选择标签的，选出来以后给标签加样式。
（1）标签选择器
也称为元素选择器，使用HTML标签作为选择器的名称。
特点：根据标签来选择标签，以标签开头，这种选择器影响范围大，一般用来做一些通用的设置。
<style>
div{
color: red;
}
</style>
<body>
<div>我是div标签</div>
</body>
（2）类选择器
使用自定义的名称（类名可以随便取），以.号作为前缀，然后再通过HTML标签的class属性调用类选择器。
<style>
.name{
color: red;
}
.sex{
color: orangered;
}
</style>
<body>
<div class="name">我是div标签</div>
<div class="name">我是div标签</div>
<div class="sex">我是div标签</div>
</body>
（3）层级选择器（后代选择器）
层级选择器要有层级关系，根据层级关系获取子标签，给子标签添加样式。
层级选择器不一定必须是父子关系，祖孙关系的子标签也可以，有后代关系都适用于这个层级选择器。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 层级选择器，要有层级关系，根据层级关系获取子标签，给子标签添加样式
通过空格隔开 找它的后代*/
/* 如果下面出现了相同的属性，那么下面的会覆盖上面的属性*/
div div{
color: red;
}
div .box1{
color: aqua;
}
/* div div p{
color: brown;
} */
div p{
color: brown;
}
</style>
</head>
<body>
<div>
<div>哈哈哈</div>
<div class="box1">嘿嘿嘿</div>
<div>
<!-- 层级选择器不一定必须是父子关系，祖孙关系的子标签也可以找到 有后代关系都适用于这个层级选择器 -->
<p>大家好，我叫灰太狼</p>
</div>
</div>
<div>同学们好</div>
</body>
</html>
（4）id选择器
根据id选择标签，以#开头，后面跟的是id的名字，元素的id名称不能重复，所有id选择器只能对应于页面上一个元素，不能复用，所以不推荐使用id作为选择器。
（5）组选择器
根据组合的选择器选择不同的标签，以,分割，如果有公共的样式设置，可以使用组选择器。
组选择器，多个选择器的组合，一般把相同的样式放到组选择器中。
同一个属性在前面设置完样式后，后面再设置样式时，后面的不会覆盖，会在前面的基础上增加样式。
6、CSS属性
（1）字体属性
font-size:字体大小
font-weight:字体粗细
font-family:设置字体
（2）文本属性
text-align:设置文字水平对齐方式，可取值：left、center、right。
text-decoration:设置文字的下划线，取值：underline
（3）颜色
color:文本颜色
background-color:背景颜色
（4）CSS元素溢出
overflow（对父标签设置）：元素溢出，取值为visible（默认值）时，显示子标签溢出部分；当取值为hidden时，隐藏子标签溢出部分；当取值为auto时，如果子标签溢出，则可以滚动查看其余的内容。
（5）盒子模型
单位都是px
width:宽度
height:高度
border:设置边框，有三个值，分别是边框的 粗细、样式、颜色
padding:内边距，1个值代表上下左右都是相同的边距；2个值代表上下相同值，左右相同值；4个值代表上、右、下、左分别一个值
margin:外边距
border-radius:设置边框四个角
div {
height: 100px;
width: 100px;
border: 1px solid #000;
padding: 10px;
margin: 10px;
border-radius: 10px;
}
# 清除自带的网页外边距
* {
margin: 0;
padding: 0;
}
