定义：
- 层叠样式表 (Cascading Style Sheets)
- 主要是用于定义HTML内容在浏览器内的显示样式，如文字大小、颜色、字体加粗等。
-
好处是通过定义某个样式，可以让不同网页位置的文字有着统一的字体、字号或者颜色等，设置文本和背景属性的能力，为任何元素创建边框及距离
语言特点：
- 易于修改、使用，将样式定义在HTML元素的style属性中，也可以将其定义在HTML文档的header部分，也可以将样式声明在一个专门的CSS文件中，以供HTML页面引用。总之，CSS样式表可以将所有的样式声明统一存放，进行统一管理。
- 多页面应用 多个页面中使用同一个CSS样式表。
- 层叠 对一个元素多次设置同一个样式，这将使用最后一次设置的属性值
- 页面压缩 将样式的声明单独放到CSS样式表中，可以大大的减小页面的体积，CSS样式表的复用更大程序的缩减了页面的体积，减少下载的时间
CSS代码语法：
css样式由选择符和声明组成，声明由属性和值组成，如图所示
选择符：又称选择器，指明网页中要应用样式规则的元素
声明：在英文大括号“｛｝”中的的就是声明，属性和值之间用英文冒号“：”分隔。当有多条声明时，中间可以英文分号“;”分隔。
注释：CSS中也有注释语句：用/*注释语句*/来标明（Html中使用<!--注释语句-->) ，即：ctrl+?
CSS中的基本样式：
3种：内联式、嵌入式、外联式
- 内联式：css代码直接写在现有的HTML标签中
<p style="color:red;font-size:12px">这是一个内联式。</p>
- 嵌入式：可以把css样式代码写在<style type="text/css"></style>标签之间，并且一般情况下嵌入式css样式写在<head></head>之间。
<style type="text/css"> span{ color:red;}</style>
- 外联式：css代码写在一个单独的外部文件中，这个css样式文件以“.css”为扩展名，在<head>内，使用<link>标签将css样式文件链接到HTML文件内，如下面代码：
<link href="text.css" rel="stylesheet" type="text/css" />
- 优先级： 内联式>嵌入式>外联式
认识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{ 50px; height: 50px; background-color:red; }
类选择器
- 使用合适的标签把要修饰的内容标记起来<p>你好<p>
-
用class="类选择器名称"为标签设置一个类 <div class="box1"><p>你好</p></div>
-
设置css样式 .box1{color:blue;}
.box1{ 160px; height: 80px; background-color:rosybrown; }
属性选择器：对带有指定属性的 HTML 元素设置样式。
input[type="text"] { 150px; display:block; margin-bottom:10px; background-color:yellow; font-family: Verdana, Arial; }
后代选择器：后代选择器是作用于所有子后代元素
<p>这是一个<span>文档</p>
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; }
子集选择器：子选择器是通过“>”进行选择。>作用于元素的第一代后代
<ul>
<li>1111</li>
<li>2222</li>
<li>33333</li>
<li>44444</li>
<ol>
<li>77777</li>
<li>88888</li>
<li>99999</li>
</ol>
<li>000000</li>
</ul>
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; }
伪元素：
<a href="#">点击</a>
CSS外联如下：a标签
/*________________伪元素____________*/ .pl:first-line{ color: pink; } .pl:first-letter{ font-size: 22px; } a:before{ content: "请点击"; //a标签前面添加文字 } a:after{ content: "嘿嘿"; //a标签后面添加文字
color:red; }
