1、外部式css样式(也可称为外联式)是把css代码写一个单独的外部文件中，这个css样式文件以“.css”为扩展名，在内（不是在<style>标签内）使用<link>标签将css样式文件链接到HTML文件内，如下面代码：标签内）使用标签将css样式文件链接到HTML文件内，如下面代码：
<link href="base.css" rel="stylesheet" type="text/css" />
base.css" rel="stylesheet" type="text/css">
注意：
css样式文件名称以有意义的英文字母命名，如 main.css。
rel="stylesheet" type="text/css" 是固定写法不可修改。
<link>标签位置一般写在<head>标签之内。
2、类选择器
语法：.类选器名称{css样式代码;}
使用方法：
第一步：使用合适的标签把要修饰的内容标记起来，如下：
<span>胆小如鼠</span>
第二步：使用class="类选择器名称"为标签设置一个类，如下：
class="stress">胆小如鼠
第三步：设置类选器css样式，如下：
.stress{color:red;}/*类前面要加入一个英文圆点*/
3、取个唯一标识：ID选择器
使用ID选择器，必须给标签添加上id属性，为标签设置id="ID名称"，而不是class="类名称"。
ID选择符的前面是井号（#）号，而不是英文圆点（.）。
id属性的值既为当前标签的id，尽量见名思意，语义化。
4、类和ID选择器的区别
相同点：可以应用于任何元素
不同点：
①、ID选择器只能在文档中使用一次。与类选择器不同，在一个HTML文档中，ID选择器只能使用一次，而且仅一次。而类选择器可以使用多次。
②、可以使用类选择器词列表方法为一个元素同时设置多个样式。我们可以为一个元素同时设多个样式，但只可以用类选择器的方法实现，ID选择器是不可以的（不能使用 ID 词列表）。
下面的代码是正确的(完整代码见右侧代码编辑器)
5、子选择器：
大于符号(>),用于选择指定标签元素的第一代子元素。如右侧代码编辑器中的代码：
.food>li{border:1px solid red;}
这行代码会使class名为food下的子元素li（水果、蔬菜）加入红色实线边框。
6、包含选择器
加入空格,用于选择指定标签元素下的后辈元素。如右侧代码编辑器中的代码：
.first span{color:red;}
注意：>作用于元素的第一代后代，空格作用于元素的所有后代。
7、通过选择器：
功能最强大的选择器，它使用一个（*）号指定，它的作用是匹配html中所有标签元素，如下使用下面代码使用html中任意标签元素字体颜色全部设置为红色：
* {color:red;}
8、伪类选择器：
允许给html不存在的标签（标签的某种状态）设置样式，比如说我们给html中一个标签元素的鼠标滑过的状态来设置字体颜色：
a:hover{color:red;}
注意：其实 :hover 可以放在任意的标签上，比如说 p:hover，但是它们的兼容性也是很不好的，所以现在比较常用的还是 a:hover 的组合。
9、分组选择器：
为html中多个标签元素设置同一个样式时，可以使用分组选择符（，），如下代码为右侧代码编辑器中的h1、span标签同时设置字体颜色为红色：
h1,span{color:red;}
10、选择器的优先级：
一个元素使用了多个选择器，则会按照选择器的优先级给定样式： 内联样式 > id选择器 > 类选择器 > 标签选择器 > 通配符选择器
11、权值计算——特殊性
元素启用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*/
选择器最高层级 !important(注意样式优先级为：浏览器默认的样式 < 网页制作者样式 < 用户自己设置的样式，但记住!important优先级样式是个例外，权值高于用户自己设置的样式。)
12、font-family设置字体：
body{font-family:"宋体";}
一般网页喜欢设置微软雅黑：body{font-family:"Microsoft Yahei";}
13、font-weight设置粗体：p span{font-weight:bold;}
14、font-style设置字体样式：
①、正常字体为normal,也是font-style的默认值。
②、italic为设置字体为斜体，用于字体本身就有倾斜的样式。
③、oblique为设置倾斜的字体，强制将字体倾斜。
15、font样式的简写方式：body{ font:italic bold 12px/1.5em "宋体",sans-serif;}（在缩写时 font-size 与 line-height 中间要加入“/”斜扛）
16、text-decoration添加文本装饰：
span { text-decoration: line-through; }
①、text-decoration可以设置添加到文本的修饰。
②、text-decoration默认值为none, 定义标准的文本。
③、text-decoration的值为underline为定义文本下的一条线。
④、text-decoration的值为overline为定义文本上的一条线。
⑤、text-decoration的值为line-through为定义穿过文本下的一条线，一般用于商品折扣价。
17、text-indent 为文本添加首行缩进（开头空两格）
p{text-indent:2em;}
18、line-height 为文本设置行间距
p{line-height:1.5em;}
19、letter/word spacing 增加或减少字符间的空白
letter：字母之间的间距
word： 单词之间的间距
20、text-aline 设置文本对齐方式
h1{text-align: center;}
h1{text-align: left;}
h1{text-align: right;}
21、独占一行的块级元素： 将内联元素a转换为块状元素，从而使a元素具有块状元素特点
a{display:block;}
22、块状元素也可以通过代码display:inline将元素设置为内联元素
div{display:inline;}
23、内联块状元素
内联元素是不能设置宽高的，需要将其设置为内联块状元素：
display:inline-block
24、设置元素隐藏不显示
display: none;
25、使用border为盒子添加边框
①、border-style（边框样式）常见样式有：dashed（虚线）| dotted（点线）| solid（实线）。
②、border-color（边框颜色）中的颜色可设置为十六进制颜色，如: border-color:#888;//前面的井号不要忘掉。
③、border-width（边框宽度）中的宽度也可以设置为： thin | medium | thick（但不是很常用），最常还是用像素（px）。
26、使用border为盒子添加边框
css 样式中允许只为一个方向的边框设置样式：
div{border-bottom:1px solid red;
border-top:1px solid red;
border-right:1px solid red;
border-left:1px solid red;}
27、 border-radius圆角可分为左上、右上、右下、左下。如下代码：
div{border-radius: 20px 10px 15px 30px;}
