定义：
- 层叠样式表 (Cascading Style Sheets)
- 主要是用于定义HTML内容在浏览器内的显示样式，如文字大小、颜色、字体加粗等。
-
好处是通过定义某个样式，可以让不同网页位置的文字有着统一的字体、字号或者颜色等，设置文本和背景属性的能力，为任何元素创建边框及距离
语言特点：
- 易于修改、使用，将样式定义在HTML元素的style属性中，也可以将其定义在HTML文档的header部分，也可以将样式声明在一个专门的CSS文件中，以供HTML页面引用。总之，CSS样式表可以将所有的样式声明统一存放，进行统一管理。
- 多页面应用 多个页面中使用同一个CSS样式表。
- 层叠 对一个元素多次设置同一个样式，这将使用最后一次设置的属性值
- 页面压缩 将样式的声明单独放到CSS样式表中，可以大大的减小页面的体积，CSS样式表的复用更大程序的缩减了页面的体积，减少下载的时间
CSS代码语法：
css样式由选择符和声明组成，声明由属性和值组成，如图所示
选择符：又称选择器，指明网页中要应用样式规则的元素
声明：在英文大括号“｛｝”中的的就是声明，属性和值之间用英文冒号“：”分隔。当有多条声明时，中间可以英文分号“;”分隔。
注释：CSS中也有注释语句：用/*注释语句*/来标明（Html中使用<!--注释语句-->) ，即：ctrl+?
CSS中的基本样式：
3种：内联式、嵌入式、外联式
- 内联式：css代码直接写在现有的HTML标签中
这是一个内联式。
- 嵌入式：可以把css样式代码写在<style type="text/css"></style>标签之间，并且一般情况下嵌入式css样式写在<head></head>之间。
- 外联式：css代码写在一个单独的外部文件中，这个css样式文件以“.css”为扩展名，在<head>内，使用<link>标签将css样式文件链接到HTML文件内，如下面代码：
- 优先级： 内联式>嵌入式>外联式
认识CSS中的选择器：
标签选择器/元素选择器
-
标签选择器就是html代码中的标签，比如<html><body><h1><p><img><ul>等
p{ font-size: 20px;}
id 选择器
- 为标签设置id="ID名称"，而不是class="类名称"。
-
ID选择符的前面是井号（#）号,<div id ="box1"></div>
-
ID选择器只能在文档中使用一次。与类选择器不同，在一个HTML文档中，ID选择器只能使用一次，而且仅一次。而类选择器可以使用多次。
#box1{ width: 50px; height: 50px; background-color:red;} 类选择器
- 使用合适的标签把要修饰的内容标记起来<p>你好<p>
-
用class="类选择器名称"为标签设置一个类 <div class="box1"><p>你好</p></div>
-
设置css样式 .box1{color:blue;}
.box1{ width: 160px; height: 80px; background-color:rosybrown;}
属性选择器：对带有指定属性的 HTML 元素设置样式。
input[type="text"]{ width:150px; display:block; margin-bottom:10px; background-color:yellow; font-family: Verdana, Arial;} 后代选择器：后代选择器是作用于所有子后代元素
这是一个文档
span{ color: darkblue;}
分组选择器：
/*同类兄弟第 第n个被选中*/li:nth-child(7){ background-color: pink;}/*同类兄弟倒数第n个选中*/li:nth-last-child(7){ background-color: blueviolet;}/*同类兄弟倒数第1个选中*/li:first-child{ background-color: aquamarine;}/*同类兄弟倒数最后1个选中*/li:last-child{ background-color: brown;}/*奇数项选中*/li:nth-child(odd){ background-color: darkblue;}/*偶数项*/li:nth-child(even){ background-color: coral;}/*_每。。。。一个循环，（_n从0开始，数字3可以随便更改—）—*/li:nth-child(3n){ background-color: darkred;} 子集选择器：子选择器是通过“>”进行选择。>作用于元素的第一代后代
- 1111
- 2222
- 33333
- 44444
- 77777
- 88888
- 99999
- 000000
CSS外联如下：
ul>li{ border: solid red;} 
ol>li:nth-child(2){ border:solid red;} 
并集选择器：同时选中所有标签，一并给予属性值
h1,h2,h3,h4,h5,h6{ font-weight: normal;} 伪类选择器：允许给html不存在的标签（标签的某种状态）设置样式
/*a初始颜色/未被访问*/a:link{ color: red;}/*访问以后*/a:visited{ color:gold;}/*当鼠标悬停/移入*/a:hover{ color: blue;}/*点击时*/a:active{ font-size: 33px;} 伪元素：
CSS外联如下：a标签
/*________________伪元素____________*/.pl:first-line{ color: pink;}.pl:first-letter{ font-size: 22px;}a:before{ content: "请点击"; //a标签前面添加文字}a:after{ content: "嘿嘿"; //a标签后面添加文字 color:red;} 