CSS基础

层叠样式表。
CSS的引用方法（4种）
1. 行内样式：<h1 style="font-size:14px;"></h1>
2. 内嵌样式：放在<style type="text/css></style>中。
3. 链接样式：<link href="css/xxx.css" type="text/css" rel="stylesheet">
4. 导入样式：与链接样式功能同，格式和位置不同。需要插入@import url（路径）。

<style type="text/css">
@import url(css/index.css);
</style>

CSS中也可以导入其他CSS。

选择器
“p/h1/div·····”——标记选择器
“*”——表示html文件中所有的元素
“.class名”——类别选择器
“#id名”——ID选择器

在html中，可以同时给一个标记运用多个class类别选择器，<h4 class="one two">可以同时使用两种类别样式</h4>，但在ID选择器中不能。

复合选择符
1.“交集“选择器：标记选择器+类别/id选择器，两者中间不能有空格。例如：p.special、h1#one——选择同时满足两者的元素。
2.“并集”选择器：同时选择各个选择器，通过“，”连接。例如：h1,h2,p.sepcial,#one
3.“后代”选择器：嵌套方式，内外层间用空格隔开。可多层嵌套。例如：h1 span{·····}、h2 .two{·····}
4.属性选择器：html中的属性可添加样式，基本格式：a[x=y]{属性1：值1;·············}。（表示具有属性x，属性值为y的a）例如：

input[x=y]{
    border:1px solid #111;
}

伪类和伪元素选择器
1.伪类选择器：
伪类选择器与类别选择器的区别：类别选择器可根据需要随时命名。伪类选择器不能命名，只能使用。是根据css中已经定义好的伪类为某些选择器设置特殊效果。
常用的伪类选择器如下：
(1) a:link 向未被访问过的超链接设置样式，仅限于<a>
(2) a:visited 向已访问过的超链接设置样式，仅限于<a>
(3) E:hover 向鼠标悬停的元素设置样式，可用于任何元素
(4) E:active 向被用户激活的元素设置样式，可用于任何元素
E为某标记、类别、ID或符合选择器等等。冒号后为伪类。两者间不能有空格。以上四个伪类主要用于<a>。
应用顺序很重要，建议采用：link-visited-hover-active 顺序。例如：

h3:hover{
    background:#00f;
}
a.one:link{
    color:red;
    text-decoration:none;
}

(5)E:focus 向获得焦点的元素设置样式，例如：input:focus{border:1px solid #333;}
(6)E:first-child E元素作为其他元素的第1个子元素。
(7)E:last-child E元素作为其他元素的最后一个子元素。例如：

h2:first-child{
    text-align:center;
}
<!--h2作为其他元素的第一个子元素时设置为这个样式-->
h2:last-child{
    text-align:left;
}
<!--h2作为其他元素的最后一个子元素时设置为这个样式-->

2.伪元素选择器
利用CSS中已经定义的伪元素向某些选择器设置特殊效果，使用方法：
E::伪元素{属性1：值1,··············}
（双冒号，用以区别伪类元素选择器。CSS3以前写法 E:伪元素{属性1：值1,··············}仍有效。）
常用伪元素选择器：
(1)E::first-letter 设置元素E内的第一个字符的样式
(2)E::first-line 设置元素E内的第一行字符的样式，常用于<p>
(3)E::before 设置在元素E前插入内容的样式，与content属性一起使用。
(4)E::after 设置在元素E后插入内容的样式，与content属性一起使用。
伪元素选择器仅作用于块级元素，行内元素要使用，必须先设置为块级元素。

<style type="text/css">
    p::first-letter{    /*第一个字*/
        font-size:20px;
    }
    p::first-line{     /*第一行*/
        color:#00f;
    }
    li::before{
        content:url(img/list.jpg);   /*列表前插入图像*/
    }
    li::after{  
        content:"仅用于测试";   /*列表后插入文字*/
        color:#ff0;
    }
</style>

CSS继承性
CSS样式具有继承性，子元素继承父元素样式。
也并不是所有的CSS属性都会被子元素集成。
子元素样式改变不影响父元素。

CSS层叠特性
也就是样式优先顺序。
行内样式（style引用法）>id选择器>类别选择器>标记选择器。
CSS还可以利用“!important”声明来设置优先级，被它声明过的属性优先级最高，但有些浏览器不支持。例如：

p{
    color:green!important;
}
/*这里这个样式最高*/

CSS常用单位
1.颜色。两种方式：颜色名称/#6位十六进制
2.长度单位。
（1）绝对单位：in（英寸）、cm、mm、pt（磅）、pc（印刷单位）。很少用到
（2）相对单位：em（以当前文字大小为基础，12pt的字，1em就是12pt。）、px（像素，根须设备分辨率变化。）

CSS书写规范
1. 记得标utf-8或其他编码。
2. 自定义选择器名称只能使用：字母、数字、下划线、中横线，第一个字符必须是字母。
3. 字符串或中文需要双引号或单引号。
4. 代码量大，维护需求大时要使用宽松风格。