CSS中的注释语句：用/*注释语句*/
css 样式由选择符和声明组成，而声明又由属性和值组成，如下图所示：
从CSS 样式代码插入的形式来看基本可以分为以下3种：内联式、嵌入式和外部式三种
- 内联式
直接写在现有的html标签中
例：<p style="color:red;font-size:12px">这里文字是红色。</p>
<span style="color:blue">超酷的互联网</span>
- 嵌入式
把css样式代码写在<style type="text/css"></style>标签之间
例1：
<style type="text/css">
span{
color:red;
}
</style>
<style type="text/css">
例2：
<style type="text/css">
p{
font-size:20px;/*设置文字字号*/
color:red;/*设置文字颜色*/
font-weight:bold;/*设置字体加粗*/
}
</style>
- 外部式
在<head>内,使用<link>标签将css样式文件链接到HTML文件内
例：<link href="base.css" rel="stylesheet" type="text/css" /> //rel和type固定
会出现base.css文件在文件中编辑即可。
- 三种方法的优先级
就近原则（离被设置元素越近优先级别越高）。
相同权值的情况下：内联式 > 嵌入式 > 外部式
嵌入式>外部式有一个前提：嵌入式css样式的位置一定在外部式的后面。如，<link href="style.css" ...>代码在<style type="text/css">...</style>代码的前面（实际开发中也是这么写的）
- 选择器
每一条css样式声明（定义）由两部分组成，形式如下：
选择器{ //“选择器”指明了{}中的“样式”的作用对象
样式;
}
例：
p{ //选择器
font-size:12px;
color:red;
}
- 标签选择器：html中的标签。
- 类选择器：
.类选器名称{css样式代码;} //只能用span
注意：1.英文圆点开头2.类选择器名称为英文名称
使用方法：
第一步：使用class="类选择器名称"为标签设置一个类，如下：
<span class="stress">胆小如鼠</span>
第二步：设置类选器css样式，如下：
.stress{color:red;}/*类前面要加入一个英文圆点*/
3. ID选择器类似于类选择符，区别：
1、为标签设置id="ID名称"，而不是class="类名称"。
2、ID选择符的前面是井号（#）号，而不是英文圆点（.）
例：<span id="setGreen">公开课</span>
#setGreen{color:green;}
区别：
1、ID选择器只能在文档中使用一次。
2、可以使用类选择器词列表方法为一个元素同时设置多个样式。ID选择器不可以。
例：.stress{
color:red;
}
.bigsize{
font-size:25px;
}
<p>到了<span class="stress bigsize">三年级</span>下学期时，<span class="stress">我们班<span>上了一节公开课...</p>
效果：
4.子选择器:
大于符号(>),用于选择指定标签元素的第一代子元素。
例：
.first>span {border:1px solid red;}
<p class="first">三年级时，<span>我还是一个<span>胆小如鼠</span>的小女孩</span>
效果：
5.包含(后代)选择器
加入空格,用于选择指定标签元素下的后辈元素
例：.first span {border:1px solid red;}
<p class="first">三年级时，<span>我还是一个<span>胆小如鼠</span>的小女孩</span>
效果：
区别：子选择器>作用于元素的第一代后代，后代选择器空格作用于元素的所有后代。
6.通用选择器
它使用一个（*）号指定，它的作用是匹配html中所有标签元素
例：* {color:red;} //html中任意标签元素字体颜色全部设置为红色
7. 伪类选择符
它允许给html不存在的标签（标签的某种状态）设置样式
例：我们给html中一个标签元素的鼠标滑过的状态来设置字体颜色：
a:hover{color:red;} // a 标签鼠标滑过的状态设置字体颜色变红
关于伪类选择符：:hover 可以放在任意的标签上,但是它们的兼容性也是很不好的,目前为止，可以兼容所有浏鉴器的“伪类选择符”就是 a 标签上使用 :hover
:link 选择器对指向未被访问页面的链接设置样式，:visited 用于设置指向已访问页面的链接的样式，:hover 选择器用于设置鼠标指针浮动到链接上时的样式，:active 选择器用于选择活动链接（当鼠标点击时）。:hover 必须位于 :link 和 :visited 之后（如果存在的话），这样样式才能生效。
8.分组选择符
想为html中多个标签元素设置同一个样式时，可以使用分组选择符（，）
例：
h1,span{color:red;}
它相当于下面两行代码：
h1{color:red;}
span{color:red;}
继承：
CSS的某些样式是具有继承性的，那么什么是继承呢？继承是一种规则，它允许样式不仅应用于某个特定html标签元素，而且应用于其后代。
例1：p{color:red;} //有继承性
<p>三年级时，我还是一个<span>胆小如鼠</span>的小女孩。</p>
效果：
例2：p{border:1px solid red;} //无继承性
<p>三年级时，我还是一个<span>胆小如鼠</span>的小女孩。</p>
效果：
权值：
标签的权值为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*/
层叠：同一个元素的多个css样式具有相同权重值的解决方法
同一个元素的多个css样式具有相同权重值时，会根据这些css样式的前后顺序来决定，处于最后面的css样式会被应用。
重要：
当特殊情况需要为某些样式设置具有最高权值时我们可以使用!important来解决。注意：!important要写在分号的前面
例：
p{color:red!important;}
p{color:green;}
<p class="first">三年级时，我还是一个<span>胆小如鼠</span>的小女孩。</p>
这时 p 段落中的文本会显示的red红色。
样式优先级为：浏览器默认的样式 < 网页制作者样式 < 用户自己设置的样式，但!important优先级样式是个例外，权值高于用户自己设置的样式。