css语法、选择器
css简介
cascading style sheets 汉译 层叠样式表，WEB标准中的表现标准语言，表现标准语言在网页中主要对网页信息的显示进行控制，简单说就是如何修饰网页信息的显示样式。
目前推荐遵循的是W3C发布的CSS3.0
一、CSS语法
选择符{属性：属性值；属性：属性值 属性值 属性值；}
说明：
1）每个CSS样式由两部分组成，即选择符和声明，声明又分为属性和属性值；
2）属性必须放在大括号中，属性与属性值用冒号连接，属性和属性用分号隔开。
3）当一个属性有多个属性值的时候，属性值与属性值不分先后顺序，用空格隔开。
4）在书写样式过程中，空格、换行等操作不影响属性显示。
width:value+px;宽度 如：width:500px
height:value+px;高度 如：height:500px
background-color:red;背景颜色值 如：red #f00f00(十六进制)
color:red; 文本颜色值
border:1px solid red；边框
3.样式的建立：内部样式、外部样式和内联样式
内部样式语法：
<style type="text/css">
css语句
</style>
注：使用style标记创建样式时，最好将该标记写在<head></head>；
4.外部样式的建立及调用
a:外部样式表的创建
b:外部样式表的导入
*方法一
<link rel="stylesheet" type="text/css" href="目标文件的路径及文件名全称" />
*方法二
<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控制样式时的差别：当使用js控制dom区改变样式的时候，只能使用link标签，@import不是dom可以控制的
3）内联样式表（行间样式 行内样式 嵌入式样式）
语法：<标记 style=“属性：属性值；属性：属性值；”></标记>
内部样式表的作用域：
5.样式表的优先级
内联样式表的优先级别最高；
内部和外部样式表的优先级，跟他们在的位置有关系，谁的位置越靠下谁的优先级别就越高
alt+del填充前景色
ctrl+del填充背景色
6.CSS选择符（选择器）
选择符的定义：选择符表示要定义样式的对象，可以是元素本身，也可以是一类元素或者制定名称的元素
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名
如：#top{width:30px;height:30px;}
3)起名时要取英文名，不能用关键字：（所有的标记和属性都是关键字）
如：head标记
4）一个Id名称只能对应文档中一个具体的元素对象，因为id只能定义页面中某一个唯一的元素对象
5）最大的用处：创建网页的外围结构。
margin:0 auto;定义元素（块元素，并且有宽度）相对于父元素水平居中
3）class选择器也可以叫做类选择器
语法：.class名{属性：属性值；}
说明：
1）当我们使用类选择符时，应先为每个元素定义一个类名称
2）类选择符的语法格式如：<div class="top"></div>
用法：class选择符更适合定义一类样式
4）群组选择器
语法：选择符1，选择符2，选择符3{属性：属性值；}
说明：当有多个选择符应用相同的样式时，可以将选择符用“，”分隔的方式，合并为一组。
5）包含选择器
语法：选择符1 选择符2{属性：属性值；}
说明：选择符1和选择符2用空格隔开，含义就是选择符1包含的所有选择符2
6）伪类选择器（伪类选择符）
语法：
：link{属性：属性值} 超链接的初始状态；
：visited{属性：属性值} 超链接被访问后的状态；
：hover{属性：属性值} 鼠标悬停，即鼠标划过超链接时的状态；
：active{属性：属性值} 超链接被激活时的状态，即鼠标按下时超链接的状态
说明：
1）当这4个超链接伪类选择器联合使用时，应注意他们的顺序，正常顺序为：
a:link,a:visited,a:hover,a:active,错误的顺序有时会使超链接的样式失效
2）为了简化代码，可以把伪类选择符中相同的声明提出来放在a选择符中；
例如： a{color:red;} a:hover{color:green;}表示超链接的三种状态都相同，只有鼠标划过变颜色。
3）由于a:link在各个浏览器里显示的初始样式不同，我们可以把超链接的初始状态，直接写在a选择符中。
7）*通配符
语法： *{属性：属性值；}
说明：统配选择符的写法是“*”，其含义就是所有元素。
作用：常用来重置样式。
*{margin:0;padding:0;}
二、选择符的权重
css中用四位数字表示权重，权重的表达方式如：0.0.0.0
类型选择符的权重为0001
class选择符的权重为0010
id选择符的权重为0100
伪类选择符的权重为0010
包含选择符的权重：为包含选择符的权重之和
内联样式的权重为1000
继承样式的权重为0000
子选择符的权重为0000
属性选择符的权重为0010
伪元素选择符的权重为0010
三、注释语句
/*注释语句*/
D、网页上常用的图片格式（压缩图片）
1）.jpg：有损压缩格式，靠损失图片本身的质量来减小图片的体积，适用于颜色丰富的图像；（像素点组成的，像素点越多会越清晰）
2）.png:有损压缩格式，损失图片的色彩数量来减小图片的体积，支持透明，不支持动画，是firework的源文件格式，适用于颜色数量较少的图像；
3）.gif：有损压缩格式，靠损失图片的色彩数量来减小图片的体积，支持透明，支持动画，适用于颜色数量较少的图像；
