css基础
一：CSS简介
CSS是cascading style sheets层叠样式表的简称
二:DIV+CSS
用DIV来搭建网页的结构，用CSS来排版网页中的元素内容
优点：
缩减页面代码，提高访问速度：代码减少，页面文件就会变小，占用网络带宽就少，客户端打开速度就快，用户体验就会好。
结构清晰，有利于seo：有利于搜索引擎优化，缩短改版时间，对网站的重构有很好的支持，弥补html语言的不足。
三：CSS样式表的分类
1：内部样式表（嵌套到页面中）
2：内联样式（行间样式，行内样式，嵌入样式）；就是直接写在html代码后面，用style来引用
3：引用外部样式表
四：样式表详解
内部样式表:在head头部添加，写在<head></head>之间
<style type="text/css">
/*css语句*/
</style>
内联样式
<标签 style="属性：属性值；属性：属性值;"></标签>
<div style="width:100px;height=100px;"></div>
外部样式表
a:外部样式表的引入是在head头部添加如下语句
<link rel="stylesheets" type="text/css" href="../style/index.css"/>
注：href中的路径是css文件的路径
b:在head头部使用如下语句：
<style type="text/css">
@import url(目标文件的路径及文件名全称);
</style>
link和import导入外部样式的区别：
差别1：老祖宗的差别：link属于XHTML标签，而@import完全是CSS提供的一种方式。link标签除了可以加载CSS外，还可以做很多其它的事情，比如定义RSS,定义rel属性等，@import就只能加载CSS.
差别2：加载顺序的差别：当一个页面被加载的时候，link引用的CSS会同时被加载，而@import引用的CSS会等到页面全部被下载完再被加载。所以有时候浏览@import加载CSS的页面时开始会没有样式。
差别3：兼容性的差别：@import是css2.1提出的，所以老的浏览器不支持，@import只在IE5以上的才能识别，而link标签无此问题。
差别4：使用dom控制样式时的差别：当使用javascript控制dom去改变样式的时候，只能使用link标签，因为@import不是dom可以控制的。
五：CSS样式表的优先级
!important;的优先级别最高，但是其是针对于某一个属性的。
内联样式表的优先级别最高
内部样式表与外部样式表的优先级和书写的顺序有关，后书写的优先级别高。
六：CSS语法
CSS语法由两部分组成：选择符、声明
选择符{属性：属性值;属性：属性值;}
例如：h1{color:red;font-size:12px;}其中h1叫做选择符，color:red;和font-size:12px;叫做声明。color和font-size叫属性，red和12px叫属性值。
七：CSS选择符（选择器）
选择符表示要定义样式的对象，可以是元素本身，也可以是一类元素或者制定名称的元素。
CSS选择符包括4大类：
类型选择符、id选择符、class选择符、和特殊选择符；
常用的选择符有10种左右
类型选择符（标记选择器）
类选择符（class选择符）
ID选择符（id选择器）
伪类选择器
群组选择符（集合选择器）
通配符（*）
伪对象选择符
包含选择符（后代选择器）
八：CSS选择符详解（伪类选择符）
a:link{属性：属性值；}超链接的出事状态
a:visited{属性：属性值；}超链接被访问后的状态
a:hover{属性：属性值；}鼠标悬停，即鼠标划过超链接时的状态
a:active{属性：属性值；}超链接被激活时的状态，即鼠标按下时超链接的状态
其他伪类（CSS3）
设置首、末或未指定元素样式：
:first-child(CSS2.1,适用于除IE6之外的所有浏览器，选择父级元素的第一个子元素)
:last-child(选择父元素的最后一个子元素)
:only-child(获取父元素中只有一个子元素的元素)
:first-of-type(选择某类型元素的第一个子元素)
:last-of-type(选择某类型元素的最后一个子元素)
:only-of-type(选择子元素中无相同类型兄弟元素的那一个)
根据项目在列表中的位置设置样式：
:nth-child(n)(选择父元素的第n个子元素)
:nth-last-child(n)(选择父元素的倒数第n个子元素，从后王前数)
:nth-of-type(n)(匹配属于父元素的特定类型的第n个子元素的每个元素)
：nth-last-of-type(n)（选择器匹配属于父元素的特定类型的第n个子元素的每个元素，从最后一个子元素开始计数）
九：伪对象选择器
:after与content属性一起使用，定义在对象后的内容。
:before与content属性一起使用，定义在对象前的内容。
:first-letter定义对象内第一个字符的样式（该伪元素只能用于块级元素）
:first-line定义对象内第一行的样式（该伪元素只能用于块级元素）
*ie6一下版本浏览器不支持伪对象选择符。
十：子选择器
语法：选择符1>选择符2{属性：属性值;}
作用：只对选择符1下的子元素选择符2起作用；
十一：属性选择器
属性选择器可以根据元素的属性及属性值来选择元素
[attribute]用于选取带有指定属性的元素
[attribute=value]用于选取带有指定属性和指定属性值的元素
[attribute~=]用于选取属性值中包含指定词汇的元素
[attribute|=value]用于选取带有以指定属性值开头的元素，该值必须是整个单词
[attribute^=value]匹配属性值以指定值开头的每个元素
[attribute$=value]匹配属性值以指定值结尾的每个元素
[attribute*=value]匹配属性值中包含指定值的每个元素
十二：选择符权重
在层叠样式表中，可能会出现多个相同的声明作用于同一个选择器，那么最终该使用哪一个声明来作用于该选择器呢？这时，我们需要比较选择器的权重。权重大的选择器的声明最终会作用与该选择器。
在CSS中用四位数字表示权重，权重的表达方式如：0，0，0，0
类型选择器的权重为0001
class选择符的权重为0010
id选择符的权重为0100
子选择符的权重为0000
属性选择符的权重为0010
伪类选择符的权重为0010
伪元素选择符的权重为0010
包含选择符的权重：包含的选择符权重值之和
内联样式的权重为1000
继承样式的权重为0000
!important的权重比所有的选择符的权重都大。
当不同选择符的样式设置有冲突的时候，高权重选择符的样式会覆盖低权重选择符的样式。
相同权重的选择符，样式遵循就近原则：哪个选择符最后定义，就采用后面那个选择符的样式。
优秀不够，必须卓越。
