CSS基础

一、CSS简介

cascading style sheets 层叠样式表
WEB标准中的表现标准语言,表现标准语言在网页中主要对网页信息的显示进行控制，简单说就是如何修饰网页信息的显示样式。
目前推荐遵循的是W3C发布的CSS3.0.
用来表现XHTML或者XML等样式文件的计算机语言。
1998年5月21日由w3C正式推出的css2.0

div+css的优点：
缩减页面代码，提高访问速度;
- 代码减少，页面文件就会小，占用网络带宽就少，客户端打开速度就快，用户体验会更好
结构清晰，有利于seo
- 有利于搜索引擎优化
- 缩短改版时间
- 对网站的重构有很好的支持
- 弥补html语言的不足

二、CSS样式表的建立

1、内部样式表（嵌套到页面中）

<style type="text/css">
/*css语句*/
</style>

注：使用style标记创建样式时，最好将该标记写在 ;

2、内联样式（行间样式，行内样式，嵌入式样式）
<标签 style=”属性:属性值; 属性:属性值;”>

<div style=“width:100px; height:100px; border:1px solid #eee; background:#fff;">
</div>

3、引用外部样式表文件
*方法 一

<link rel="stylesheet" type="text/css" href="目标文件的路径            及文件名全称" />

说明：使用link元素导入外部样式表时，需将该元素写在文档头部，即与之间。
rel：用于定义文档关联，表示关联样式表；
type：定义文档类型；

*方法二

<style type="text/css">
@import   url(目标文件的路径及文件名全称);
</style>

注：@和import之间没有空格 url和小括号之间也没有空格；必须结尾以分号结束；

*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样式表的优先级
内联样式表的优先级别最高
内部样式表与外部样式表的优先级和书写的顺序有关，后书写的优先级别高。
CSS语法由两部分组成：选择符、声明
选择符{属性：属性值；属性：属性值；}
说明：
1）每个CSS样式由两部分组成，即选择符和声明，声明又分为属性和属性值；
2）属性必须放在花括号中，属性与属性值用冒号连接。
3）每条声明用分号结束。
4）当一个属性有多个属性值的时候，属性值与属性值不分先后顺序。
5）在书写样式过程中，空格、换行等操作不影响属性显示

四、css选择符
选择符表示要定义样式的对象，可以是元素本身，也可以是一类元素或者制定名称的元素.
CSS选择符包括4大类：类型选择符、id选择符、class选择符、和特殊选择符；
常用的选择符有十种左右
类型选择符（标记选择器）
类选择符 （class选择符）
ID选择符 （id选择器）
伪类选择器
群组选择符（集合选择器）
通配符（*）
伪对象选择符
包含选择符（后代选择器）

1） 元素选择符/类型选择符（element选择器 )
语法：元素名称{属性：属性值；}
说明：
a)元素选择符就是以文档语言对象类型作为选择符，即使用结构中元素名称作为选择符。例如body、div、p、img、em、strong、span……等。
b)所有的页面元素都可以作为选择符;
用法：
1)如果想改变某个元素得默认样式时，可以使用类型选择符；2)当统一文档某个元素的显示效果时，可以使用类型选择符；

2) id选择器
语法：#id名{属性：属性值;}
说明：
1）当我们使用id选择符时，应该为每个元素定义一个id属性，
如：<div id="top"></div>
2）id选择符的语法格式是“#”加上自定义的id名
如：#box{width:300px; height:300px;}
3) 起名时要取英文名，不能用关键字：(所有的标记和属性都是关键字)
如：head标记
4）一个id名称只能对应文档中一个具体的元素对象，因为id只能定义页面中某一个唯一的元素对象。
5) 最大的用处：创建网页的外围结构。

3）class选择器
语法：.class名{属性：属性值;}
说明：
1）当我们使用类选择符时，应先为每个元素定义一个类名称，
2）类选择符的语法格式是：”如：<div class="top"></div>"
用法：class选择符更适合定义一类样式

4)*通配符
语法：*{属性：属性值；}
说明：通配选择符的写法是“*”，其含义就是所有元素。用法：常用来重置样式。

5）群组选择器
语法：选择符1,选择符2,选择符3{属性：属性值;}
说明：当有多个选择符应用相同的样式时，可以将选择符用“，”分隔的方式，合并为一组。
做页面居中设置 ：选择符{margin:0 auto;}

6） 包含选择器
语法：选择符1 选择符2{属性：属性值;}
选择符父级 选择符子级{属性：属性值;}
说明：选择符1和选择符2用空格隔开，含义就是选择符1中包含的所有选择符2;

7） 伪类选择器(伪类选择符)
语法 ：
a:link{属性：属性值;}超链接的初始状态;
a:visited{属性：属性值;}超链接被访问后的状态;
a:hover{属性：属性值;}鼠标悬停，即鼠标划过超链接时的状态;
a:active{属性：属性值;}超链接被激活时的状态，即鼠标按下时超链接的状态;
说明：1）当这4个超链接伪类选择符联合使用时，应注意他们的顺序，正常顺序为：a:link,a:visited,a:hover,a:active,错误的顺序有时会使超链接的样式失效；2）为了简化代码，可以把伪类选择符中相同的声明提出来放在a选择中；
例如：a{color:red;} a:hover{color:green;} 表示超链接的三种状态都相同，只有鼠标划过变颜色。其他伪类（CSS3）

9） 子选择器
语法：选择符1>选择符2{属性：属性值;}
作用：只对选择符1下的子元素选择符2起作用;

10） 属性选择器
属性选择器可以根据元素的属性及属性值来选择元素。
[attribute]用于选取带有指定属性的元素。
[attribute=value]用于选取带有指定属性和值的元素。
[attribute~=value]用于选取属性值中包含指定词汇的元素。
[attribute|=value]用于选取带有以指定值开头的属性值的元素，该值必须是整个单词。
[attribute^=value]匹配属性值以指定值开头的每个元素。
[attribute$=value]匹配属性值以指定值结尾的每个元素。
[attribute*=value]匹配属性值中包含指定值的每个元素。

其他伪类（CSS3）
设置首、末或指定元素样式：:first-child（ CSS2.1，适用于出IE6之外的所有浏览器，选择父级元素内嵌的第1个子元素）
:last-child （ 选择父级元素内嵌的最后1个子元素）
:only-child（目标仅仅指向父对象中唯一的子元素。 ）
:first-of-type（选择父级元素内嵌的第1个指定类别的子元素）
:last-of-type （选择父级元素内嵌的最后1个指定类别的子元素）
:only-of-type（选择子元素中无相同类型兄弟元素的那一个）根据项目在列表中的位置设置样式：:nth-child(n)（匹配属于其父元素的第 N 个子元素，与类型无关）
:nth-last-child(n)（选择器匹配属于其元素的第 N 个子元素的每个元素，不论元素的类型，从最后一个子元素开始计数）
:nth-type(n) （匹配属于父元素的特定类型的第 N 个子元素的每个元素）
:nth-last-of-type(n)（选择器匹配属于父元素的特定类型的第 N 个子元素的每个元素，从最后一个子元素开始计数。 ）
使用这些伪类时，在括号内填入目标元素在列表中的位置作为参数。这个参数可以是数字、关键字、或者一个公式8） 伪对象选择器（第九章）
1）:after:与content属性一起使用，定义在对象后的内容。
如：div:after{content:url(logo.jpg);}
div:after{content:”文本内容”;}
2）:before:与content属性一起使用，定义在对象前的内容。
如：div:before{content:”在其前放内容”;}
3）:first-letter:定义对象内第一个字符的样式。
说明：(该伪元素只能用于块级元素。)
4）:first-line:定义对象内第一行的样式。
说明：
*(该伪元素只能用于块级元素。)
*ie6以下版本浏览器不支持伪对象选择符。

选择符的权重
css中用四位数字表示权重，权重的表达方式如：0，0，0，0
类型选择符的权重为0001
class选择符的权重为0010
id选择符的权重为0100
子选择符的权重为0000
属性选择符的权重为0010
伪类选择符的权重为0010
伪元素选择符的权重为0010
包含选择符的权重：包含的选择符权重值之和
内联样式的权重为1000
继承样式的权重为0000

第一等：代表内联样式，如: style=””，权值为1000。
第二等：代表ID选择器，如：#content，权值为0100。
第三等：代表类，伪类和属性选择器，如.content，权值为0010。
第四等：代表类型选择器，如div p，权值为0001。
当不同选择符的样式设置有冲突的时候，高权重选择符的样式会覆盖低权重选择符的样式。
例如：p.demo的权重是1+10=11。
相同权重的选择符，样式遵循就近原则：哪个选择符最后定义，就采用哪个选择符样式。（注意：是样式中定义该选择符的先后，而不是html中使用先后）