HTML负责网页的结构和内容，CSS负责页面的样式
CSS的三种引入方式，存在优先级问题，哪个样式离元素最近，那个样式的优先级就越高
外联式：通过link标签，将外部的CSS样式链接进来
<link rel="stylesheet" type="text/css" href="CSS文件">
内嵌式：在head头内通过style标签设置页面的样式，各个属性都要用分号隔开
<style type="text/css">
div{
font-size: 30px;
color:red;
}
</style>
内联式：通过标签的style属性，设置标签的样式，各个属性都要用分号隔开
<div style="color:blue; font-size:40px;">文本内容</div>
常用的选择器
所有选择器都要在head头里的style标签中定义
标签选择器，前面写要增加样式的标签名
<html>
<head>
<style>
div{
color: red;
font-size: 30px;
}
</style>
</head>
<body>
<div>文本内容</div>
</body>
</html>
id选择器，通过id名来选择元素，页面上只有一个唯一的ID值，不能重复，所以id选择器只能选择到一个元素，使用方法就是#id属性的值
#box{font-size: 30px;}
<div id="box">123</div>
类选择器，通过class类名选择元素，一个类可以应用于多个元素，一个元素也可以有多个类，类选择器是使用最多的选择器之一，使用方法 .类属性的值
.odiv{font-size: 30px;}
<!--一个类可以有多个值中间用空格隔开-->
<div class="odiv odiv2 odiv3">文本</div>
注意：影响范围越大的选择器优先级就越低，所以 id>class>元素选择器。如果同时设置了三种基本选择器，那么就会使用id选择器的样式
层级后代选择器
<!--多种选择器之间可以混合使用，类选择器后跟标签选择器，这个类下面的所有子级div标签都会改变样式>
.odiv1 div{width:300px; height:500px; color:red;}
<!--也可以定位到类odiv1下面的子级的子级类odiv3的元素-->
.odiv1 .odiv3{width:400px; height:500px; color:red;}
<div class="odiv1">
<div class="odiv2">
<div class="odiv3">文本内容</div>
</div>
</div>
分组选择器
<!--分组选择器可以设置需要相同样式的不同元素， 各个选择器之间用逗号隔开，可以统一设置样式>
.odiv1, .odiv2, .p1, .odiv3{
width: 300px;
height: 300px;
}
.odiv1{background-color: red;}
.odiv2{background-color: blue;}
.pi{background-color: pink;}
odiv3{ background-color: green;}
<div class="odiv1"></div>
<div class="odiv2"></div>
<p class="p1"></p>
<div class="odiv3"></div>
单冒号(:)用于CSS3伪类，双冒号(::)用于CSS3伪元素。（伪元素由双冒号和伪元素名称组成）
常用伪类选择器 :hover
:hover设置当鼠标悬停在元素上时展现的样式
.box{ width: 300px; height: 300px; background-color: red;}
<!--鼠标悬停在类box元素上时的样式-->
.box:hover{background-color: yellow;}
<div class="box"></div>
常用伪元素选择器
::before设置显示在元素前面的内容
::after设置显示在元素后面的内容
.box::before{ content: "I"; }
.box::after{ content: "you"; }
<div class="odiv"> love </div>