CSS全称为 “层叠样式表（Cascading Style Sheets）”，它主要是用于定义HTML内容在浏览器内的显示样式，如大小、颜色、字体加粗等。
一、CSS样式定义
/*css插入形式：内联式 > 嵌入式 > 外部式 (优先级)
内联式：css样式表就是把css代码直接现有的HTML标签中
嵌入式：把css样式写在<style type="text/css"></style>标签之间
外部式：把css代码写在一个单独的外部文件中，在<style>标签中使用<link>标签将css样式文件链接到HTML文件内
*/
/*内联式css样式定义及印用*/
标签：<h1 style="color: green"> 段落：<p style="color: green">
/*嵌入式css样式定义及引用*/
<style type="text/css">
/* 指定标题或者段落的属性 */
<h1> <h2> <h3> <h4> <h5> <h6> <p>
/*文字的属性，包含指定文字即可*/
span { /*第一文字属性*/
font-size:20px; /*设置文字字号*/
color:red; /*设置文字颜色*/
font-weight:bold; /*设置字体加粗*/
}
</style>
<p>大家好，我是vie。<span>爱因斯坦</span>是个科学家！</p>
/*外部式css样式定义及引用*/
index.html之外定义的 .css文件，于index.html文件中于<style>标签中引用
/*标签名称 样式表 文本类型*/
<link href="style.css" rel="stylesheet" type="text/css">
<p>
您已到达<span>因特网</span>的最后一页。祝您网上冲浪愉快。
现在，确实没有什么可浏览的内容了。您可以安全地关闭计算机，然后回到现实生活中。
</p>
二、CSS选择器
css选择器语法：
选择器 { /*body*/ 样式；}
p { font-size:12px; /*字体大小*/ line-height:1.6em; /*段落行间距*/ }
类选择器：
/*定义于<style></style>标签中*/
.类选择器名称{ css样式代码；}
.stress{ color:red; }
/*使用类选择器*/
<span class="stress">类选择器</span>
ID选择器：
/*定义于<style></style>标签中*/
#类选择器名称{ css样式代码；}
#stress{ color:red; }
/*使用ID选择器*/
<span id="stress">选择器</span>
/*特点
1.ID选择器只能在文档中使用一次；
2.可以使用类选择器词列表方法为一个元素同时设置多个样式；
*/
子选择器：
.food>li{border:1px solid red;}
<ul class="food">
<li>水果
<ul>
<li>香蕉</li>
<li>苹果</li>
<li>梨</li>
</ul>
</li>
<li>蔬菜
<ul>
<li>白菜</li>
<li>油菜</li>
<li>卷心菜</li>
</ul>
</li>
</ul>
/* .food>li 子元素li(水果、蔬菜)加入红色实线边框*/
包含（后代）选择器：
<ul class="food">
<li>水果
<ul>
<li>香蕉</li>
<li>苹果</li>
<li>梨</li>
</ul>
</li>
<li>蔬菜
<ul>
<li>白菜</li>
<li>油菜</li>
<li>卷心菜</li>
</ul>
</li>
</ul>
/* .food li 意思是到子集下面的后代子集选择器*/
通用选择器：
/*通用选择器于<style>中*/
*{ color:red; font-size:20px; }
伪类选择器：
/*鼠标滑过的状态：放于<style>中*/
a:hover{ color:red }
/*使用伪类选择器*/
<p>我是段落，<a href="http://www.imooc.com">点击我</a>修改字体颜色</p>
分组选择器：
/*给多个标签同时设置字体属性:直接在<style>中编写，body在直接使用*/
h1,span{ color:red; }
.first,#second span{color:green;}
三、CSS的继承、层叠和特殊性
CSS的继承：
<style type="text/css">
p{color:red;} /*此处所有的<p>段落下的文字都为红色，包括<span>中，这既是继承的特性*/
p{border:1px solid red;} /*border边框只针对外部的<p>段落，而<span>不继承*/
</style>
CSS特殊性：
/* 标签的权值为1；类选择符的权值为10，ID选择器的权值最高为100 */
p{color:red;} /* 权值为1 */
p span{color:green;} /*权值1+1=2*/
.warning{color:white;} /* 权值为10 */
p span .warning{color:purple;} /* 取值为1+1+10=12 */
#footer .note p{color:yellow;} /* 权值为100+10+1=111 */
/*注意：还有一个权值比较特殊--继承也有权值但很低，有的文献提出它只有0.1，所以可以理解为继承的权值最低。*/
CSS层叠：
/*层叠就是在html文件中对于同一个元素可以有多个css样式存在，当有相同权重的样式存在时，
会根据这些css样式的前后来决定，处于最后的css样式会被应用。*/
p{color:red;}
p{color:green;}
p{color:pink;} /*最后颜色会采用这个颜色*/
CSS重要性：
/*
!important
语句来改变样式权重（优先权重） 全局的<p>都为red
*/
<style type="text/css">
p{color:red!important;} /* !important 要写在分号的前面 */
p.first{color:green;}
</style>