CSS（Cascading Style Sheets 层叠样式表）
允许同时控制多重页面的样式和布局，能够为HTML元素（每个标签）定义样式，并将改变后的样式显示到页面中。对整个html全局进行更新。
（一）设置样式的三种方法：
（1）id选择器
id 就是在控件或者标签中设置的一个属性，这个属性叫做id，id属性的值不能重复
#id的值；
（2）class选择器
指代的是一个属性，这个属性叫做class，.class的值
（3）标签选择器
通过标签来找到控件，设置样式。通常两种或者两种以上的标签共同设置选择器
标签 #id（混合选择器）：input #name，select #select
一个好的CSS需要合理的混合使用这三种选择器
div span : 表示设定div标签中的span标签 的样式
span .our: 表示设定span标签中 class名称为 our的标签的样式
a#women : 表示设定a标签中id名称为women的a标签的样式
【class 用于元素组（类似的元素，或者可以理解为某一类元素），而 id 用于标识单独的唯一的元素。】
【如果设置了多个一样的id：在网页表现上是不会有太大问题的,但是如果你的页面引用了js文件的话,浏览器就有可能报错了.id和class对于CSS来说,其实区别不是特别大,但是网页不是单纯的HTML+CSS,还有一系列的其他元素,这些元素有自己的运行规则,ID选择器对于它们来说,就表示指代唯一的元素.】
div：
<div></div>是通过把整个页面分成不同的层和不同块，带到一个布局的目的
<div> 可定义文档中的分区或节。
<div> 标签可以把文档分割为独立的、不同的部分。
<div> 是一个块级元素。这意味着它的内容自动地开始一个新行。实际上，换行是 <div> 固有的唯一格式表现。
span：
<span> 标签被用来组合文档中的行内元素。
（二）引入方式
（1）内联样式引入:不推荐
（就是把style写在标签里面）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<div style="background-color: darkturquoise;height: 50px;width: 50px;"></div>
</body>
</html>
（2）内部（内部指的是html里面）样式引入：
写在head里面，用style双标签，主要用到了三个选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
/* id选择器 */
#div_id {
background-color: cornflowerblue;
height: 100px;
width: 100px;
}
/* class选择器 */
.div_class {
background-color: coral;
height: 100px;
width: 100px;
}
/* 标签选择器 */
span {
color: darkcyan;/*文字颜色*/
}
</style>
</head>
<body>
<div id="div_id">我是div_id1</div>
<div class="div_class">我是div_class_one</div>
只要方法正确，总会有<span>突破瓶颈，柳暗花明</span>的那一天。<br/> 人生如路，需要耐心。走着走着，说不定就会在
<span>凄凉中走出繁华的风景</span>。
</body>
</html>
（3）外部样式引入：推荐
将css部分单独写成一个.css文件，然后link引入
/* new_file.css */
/* id选择器 */
#div_id {
background-color: wheat;
height: 100px;
width: 100px;
}
/* class选择器 */
.div_class {
background-color: coral;
height: 100px;
width: 100px;
}
/* 标签选择器 */
span {
color: darkcyan;
}
<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="css/new_file.css" />
</head>
<body>
<div id="div_id">我是div_id1</div>
<div class="div_class">我是div_class_one</div>
只要方法正确，总会有<span>突破瓶颈，柳暗花明</span>的那一天。<br/> 人生如路，需要耐心。走着走着，说不定就会在
<span>凄凉中走出繁华的风景</span>。
</body>
</html>
rel表示文档与被链接文档之间的关系，比如rel="stylesheet"表示链接文档为文档的外部样式表，rel="contents"表示链接文档为文档的目录。
运行优先级：内联样式 > 内部样式 > 外部样式
（同时设置多种方式的时候，比如说同一个效果又设置了内联又设置了内部，效果是内联的样式）
使用优先级：内联样式 < 内部样式 < 外部样式
backgound系列（对于背景设置）
（1）设置背景图片：background-image:路径
（2）设置图片平铺（即图片小，就多来几张图片，直至铺满）: background-repeat: repeat;
background-repeat 属性设置是否及如何重复背景图像。
<!-- text.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link href="css/new_file.css" rel="stylesheet" />
</head>
<body >
</body>
</html>
/* new_file.css */
body{
background-image:url(../img/亚丝娜.png) ;
background-repeat: repeat;
}
（3）background-attachment： 属性设置背景图像是否固定或者随着页面的其余部分滚动（默认滚动）。
background-attachment: fixed;不滚动
文字设置（字体系列）
color：设置字体颜色
font-size：设置字体大小（以px像素为单位），可以很大，没有限制
font-family：设置字体
text-align：设置块级元素内文本的水平对齐方式，所以要在div里面，center居中（left，center，right）
font-weight：加粗（100最细 - 900最粗）
font-style: italic; 倾斜（方法一）
双标签<i></i>：设置倾斜（方法二）
text-decoration:none;去掉下划线（可以用在超链接）
超链接：未访问、已访问、悬浮和活动链接时候的不同状态
初始状态
<!-- text.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
a:link {
background: #008B8B;
}
</style>
</head>
<body>
<a href="www.baidu.com" target="_self">言承</a>
</body>
</html>
鼠标被访问过
a:visited {
background: #008B8B;
}
鼠标悬在上面
a:hover {
background: #008B8B;
}
鼠标点击链接的一刹那
a:active {
background: #008B8B;
}
【css注释：/* */】