CSS

css页面引入方法：
1、外联式[推荐]：通过link标签，连接外部样式到页面中：
<head>
<link rel="stylesheet" href="css/main.css">
</head>

2、嵌入式[部分推荐]：通过style标签，在网页上创建嵌入的样式表：
<head>
<style type="text/css">
div{width:100px;height:100px;color:gold}
....
</style>
</head>
3、行内样式[不推荐]：直接在 标签中写样式：
<a herf="http://www.xx.com" style="font-size:20px;color:red">link</a>

常用的应用文本的css样式:
color:设置文字颜色，如color:red;

font-size:设置文字大小，如font-size:12px;

font-family:设置文字字体，如font-family:'微软雅黑';字体名建议用英文

font-style:设置字体是否倾斜，如font-style:normal为倾斜，font-style:italic设置倾斜

font-weight:设置文字是否加粗，加粗：font-weight:bold,normal为不加粗

line-height:设置文字行高，在每行文字上下同时增加距离，如：line-height:24px

font:同时设置文字的几个属性，写的顺序有兼容问题，必须按照如下顺序：font:是否加粗 字号/行高 字体，如：font:normal 12px/36px '微软雅黑'

text-decoration:设置文字的下划线，如：text-decoration:underline设置下划线；text-decoration:none将下划线去掉

text-indent:设置文字首行缩进，如text-indent:24px,设置首行缩进24px

text-align:设置文字水平对齐方式，如text-align:center设置文字水平居中

css颜色表示法：
1、颜色名表示，比如red,gold
2、rgb表示，比如rgb(255,0,0)
3、16禁止数值表示，比如#ff0000

css选择器
1、标签选择器：
影响范围大，建议尽量用在层级选择器中。例如：
div{}
*{} # *号选择器应用于所有元素。

2、id选择器：
通过ID名来选择元素，元素的ID名称不能重复，所以一个样式设置项只对应页面上的一个元素，不能复用，ID名一般给程序使用，所以不推荐使用id名作为选择器。例如：
#box{color:red}

<div id="box">....</div>

3、类选择器：
通过类名选择元素，一个类可以应用于多个元素，一个元素上也可以使用多个类，应用灵活，可复用，是css中应用最多的一种选择器。例如：
.red{color:red}
.big{font-size:20px}
.mt10{margin-top:10px}

<div class="red">...</div>
<div class="red big mt10">...</div>
<div class="red mt10">...</div>

4、层级选择器：
主要应用在选择父元素下的子元素，或子元素下的子元素，可与标签元素结合使用，减少命名，同时也可以通过层级，防止命名冲突。例如：
.box span{color:red}
.box .red{color:pink}
.red{color:red}

<div class="box">
<span>...</span>
<a herf="#" class="red">...</a>
</div>

<h3 class="red">...</h3>

5、组选择器：
多个选择器，如果有同样的样式设置，可以使用组选择器，例如：
.box1,.box2,.box3{width:100px;height:100px}
.box1{background:red}
.box2{background:pink}
.box3{background:gold}

<div class="box1">...</div>
<div class="box2">...</div>
<div class="box3">...</div>

6、伪类及伪元素选择器：
常用的伪类选择器有hover,表示鼠标悬浮在元素上时的状态，伪元素选择器有before和after,它们可以通过样式在元素中插入内容。 例如：
.box1:hover{color:red}
.box2:before{content:"首行文字"}
.box3:after{content:"行尾文字"}

<div class="box1">...</div> # 鼠标悬停时颜色变红色
<div class="box2">...</div> # 在行首插入“首行文字”
<div class="box3">...</div> # 在行尾插入“行尾文字”