CSS样式表的学习

一、 CSS样式表

1、 HTML仅仅只是做数据的显示，需要通过CSS来完成对页面的修饰

2、 样式表有三种方式进行编写

2.1、内嵌样式

 

2.2、在html的title通过style标签统一为该页面编写样式

 

2.3、将样式表文件编写到一个xxx.css的文件中，然后在head中引入该样式表文件

 

需要注意的是，对于样式表而言，后定义的会把先定义的样式表覆盖掉

3、 选择器

3.1、标签选择器（根据标签名称获取），会对页面中的所有标签都有效

 

3.2、ID选择器（获取id为xx的标签）：可以对页面中某个标签进行样式的设置

 

3.3、类选择器（获取标签中class=xxx的标签）：可以选择页面中的一组标签，class=”xxx的一组标签

 

3.4、包含选择符（获取某个标签中的所有的子标签）

 

3.5、子对象选择符(获取某个标签的第一级子标签)

 

3.6、分组选择符（可以同时设定多个标签，使用逗号进行分割）

 

4、 布局

4.1、盒子模型(box model)

 

4.2、span和a相类似的文本标签

在html，有一些标签仅仅只是用来设置文本，诸如:a和span对于这两个标签而言，在W3C的标准中默认是不能进行width等样式进行修饰的，所以直接为这些标签设置width是没有作用的，需要通过display:block之后才有作用。但是对于IE而言就是有作用。

4.3、padding的兼容性

对于padding而言，如果一个标签设置了height或者width,此时再进行padding的设置，对于IE而言，padding的值不会加到height或者width中（如果：一个div的高度为40,而padding-top:20;此时这个div的高度依然是40）；对于IE之外的所有浏览器，padding的值会加到height或者width中(如果：一个div的高度为40,padding-top为20，此时div的高度是60)。所以千万不要使用padding来进行对齐操作

4.4、定位

Absolute和relative

Absolute是绝对定位，它会针对父级标签中进行了absolute定位的标签来进行left、right等设置，如果父级标签中都没有这样的定位方式，就会针对body来进行定位，而且对于absolute而言，当设置之后该容器就不会再占用相应的空间，原有的空间会被其他元素所占据。

Relative是相对定位，都是针对父级元素进行定位的，而且空间会一直被占用，哪怕这个元素已经移动到其他位置

使用经验：经常会使用relative来实现文本位置的移动。所以如果要为某个容器设置里面的文本位置，可以按照如下方式处理<li><span>sssss</span></li>

4.5、float

当设置了float:left之后，里面的元素会自动向左面排列对齐（此时对于一些用来做列表导航操作的需求很有帮助），特别注意：如果外层标签的宽度不能满足进行float的标签的宽度，会自动换行，当设置了float:left之后，对于IE而言，该标签依然占用空间，但是对于其他浏览器而言，就不占用空间。

 

5、 其他知识点

5.1、超级链接的样式

 

5.2、让容器居中

 

5.3、包含样式的特点

 

5.4、其他知识点

 

6、