1、 样式分类
在CSS的样式中，存在内联式、嵌入式以及外部式三种引用方式。
内联式：<p style="color:red;"></p>
嵌入式：<head>
<title>Lable标签的使用</title>
<style type="text/css" media="screen">
p{
color:red;
font-size: 12px;
}
.newStyle{
color:red;
font-size: 12px;
}
#newStyle2{
color:red;
font-size: 12px;
}
</style>
</head>
这种方式表示将某个html或者JSP中的CSS样式统一放置在head标签中
外部式：单独创建一个css文件，然后作为外部文件引用到某个html文件中
例如：
<link rel="stylesheet" type="text/css" href="<c:url value="/resources/custom/css/extends.css" />" />
<link href="style.css" rel="stylesheet" type="text/css" />
优先级：这3中样式存在着优先级，那就是内联式>嵌入式>外部式 秉承着就近原则
2、 选择器
一般的CSS样式会有选择符+声明构成；所谓选择符指的就是选择器(选择器可分为标签选择器、类选择器以及ID选择器)，例如需要对网页中的所有p标签作样式修改，那就会如下设置样式
p{
color:red;
}
从上可知，p就表示选择器，而{}中的内容就表示声明。另外声明中又包含属性和值，color表示属性，需要对p标记中的内容的颜色作设置，而值为red。
(1) 标签选择器：用于定义网页内容中某个标签所属的样式，例如：p{color:red;}
表示的就是将网页中所有标签为p的内容颜色定义为红色。
(2) 类选择器：表示以圆点开头所定义的样式，这个样式可以用于html中任意一个标签内
例如：
样式定义：.newStyle{font-size:12px;}
使用方式：<span classs="newStyle"></span>
(3) ID选择器：表示以#号开头所定义的样式，这个样式同类选择其一样可以用于定义html中任意一个标签内的样式
例如：
样式定义：#newStyle2{font-weight:bold;}
使用方式：<span id="newStyle2"></span>
(4) 区别：类选择器和ID选择器比较
A、类选择器可以在文档中使用多次，而ID选择器只能使用一次
例如：
<p>三年级时，我还是一个<span class="stress">胆小如鼠</span>的小女孩，上课从来不敢回答老师提出的问题，生怕回答错了老师会批评<span id="stress2">我</span>。就一直没有这个<span class="stress">勇气</span>来回答老师提出的问题。 </p>
B、类选择器可以对同一个元素设置多个样式，但是ID选择器只能设置一个样式
例如：
.stress{ color:red; } .bigsize{ font-size:25px; } <p>到了<span class="stress bigsize">三年级</span>下学期时，我们班上了一节公开课...</p>
总结：ID选择器类似于ID一样，表示一种唯一性，因此对于需要多种样式进行引用，比较适合使用类选择器
三者比较：ID选择器>类选择器>标签选择器
3、 补充
(1)子选择器
a、概念
子选择器主要可以用于对已经设定样式的子元素再次设置样式
b、使用方式
通过‘>’号的形式
.food{
font-size:12px;
}
.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"样式后的第一代子元素的样式的边框设置为红色(仅限于最靠近的子元素)
(2) 包含选择器
a、概念
包含选择器一般指的是对于选择标签下的后辈元素
b、使用方式
通过空格的形式
.first{
font-size:12px;
}
.first span{border:1px solid red;}
<ul class="first">
<li>水果
<ul>
<li>香蕉</li>
<li>苹果</li>
<li>梨</li>
</ul>
</li>
<li>蔬菜
<ul>
<li>白菜</li>
<li>油菜</li>
<li>卷心菜</li>
</ul>
</li>
</ul>呈现：
含义：表示将"first"样式后的所有为li的后辈元素的样式的边框都设置为红色
(3) 通用选择器
a、 概念
从字面上看，即表示可以适用于整个HTML中的样式
b、使用方式
*{color:red;}
(4) 伪类选择器
a、 概念
伪类选择器主要针对于HTML中不存在的标签(即标签的某种状态，例如a标签【鼠标滑过、鼠标点击等状态】)设置样式
b、 使用方式
a:hover{color:red;}
(5) 分组选择器
a 、概念
对于多个不同标签设置同样的样式
b、 使用方式
h1,span{color:red;}
4、 重要性【!important】
在设置样式时，有时需要为某个样式设置最高权值，使用!important设置样式的权值，可以对同类型的样式设置更高的优先级。例如：
案例一
p{color:red;}
p{color:blue;}
<p>你们好！</p>
案例二
p{color:red !important;}
p{color:blue;}
<p>你们好！</p>
讲解：按照正常的规则案例一中会根据就近原则，后面的样式会覆盖之前的样式，因此在界面上会显示蓝色的字体；
案例二中由于在前一个样式中添加!important，则对前一个样式增加了权值，且权值高于后者样式，因此在界面中会显示红色字体。
案例三
#Box div{
color:red;
}
.important_false{
color:blue;
}
.important_true{
color:blue !important;
}
<div id="Box">
<div class="important_false">这一行末使用important</div>
<div class="important_true">这一行使用了important</div>
</div>
讲解：首先需要明白一点是ID选择器的权值要高于类选择器，因此第一行字体一定会显示红色字体；第二行字体中的样式由于应用到了!important，因此即使ID选择器高于类选择器，但是!important的权值要高于ID选择器，所以第二行字体会显示蓝色字体。
5、 字体样式
1.4.1 text-indent
(1) 概念
属性规定文本块中首行文本的缩进
(2) 使用方式
例如为p标签设置样式： .p{text-indent:2em;}
1.4.2 line-height
(1) 概念
属性规定文本块中行间距
(2) 使用方式
例如为p标签设置样式：
.p{line-height:2em;}
1.4.3 letter-spacing/word-spacing
(1) 概念
以上两个属性表示的是文字或者单词的间距
(2) 使用方式
<head>
<title>!important的使用方式</title>
<style type="text/css">
.test1{letter-spacing:10px;}
.test2{word-spacing:20px;}
</style>
</head>
<body>
<p class="test2">你们好</p>
<p class="test2">hello world!</p>
</body>截图如下：
强调：此处在使用letter-spacing属性是，对于中文间距以及字母间距，word-spacing仅仅针对于单词间的排版，对字母使用letter-spacing属性之后，截图如下
