css 选择器

1. css基础

1.1. 什么是css *
1) css即cascading stylesheet（级联样式表）
2) css为网页提供表现的形式，即按照w3c的建议，实现一个比较好的网页设计，应该按照如下的规则：
 网页的结构不数据，应该写在.html文件里
 网页的表现形式，应该写在.css文件里
 网页的行为，应该写在.js文件里
 这样做的原因是，将网页的数据、表现、行为分离，方便代码的维护

常用的选择器 **

  标记选择器(简单选择器) **

        标记的名称{ 

                 属性名：属性值 ; ... ;

   }

1.2.2.2. class选择器 ***
 第一种形式 匿名的class选择器

. 选择器的名称{ 

      属性名：属性值 ; ... ;

  } 

注：标记的class属性值不选择器的名称相等

第二种形式 有名的class选择器 

标记的名称 . 选择器的名称{ 

            属性名：属性值 ; ... ; 

} 

注：除了标记的class属性值不选择器的名称相等以外，还要求标记的名称匹配

1.2.2.3. id选择器 **

# 选择器的名称{

             属性名：属性值 ; ... ;

 } 

标记的id属性值不选择器的名称相等。 

注意，在同一个html文件当中，id值必须唯一

1.2.2.4. 选择器的分组 *

h1 , h2 , h3{

      color : green ;

 } 

对以" , "隔开的选择器施加相同的样式

1.2.2.5. 选择器的派生 *

#d2 p{ 

    font-size :120px ;

 } 

表示id为d2的标记内部的所有p标记的字体为120px

案例：五种选择器 *

1.4. 样式的优先级 *
1) 默认样式： 浏览器默认的样式
2) 外部样式： 样式写在一个.css文件里
3) 内部样式： 样式写在html文件里

4) 内联样式： 样式写在标记里

注意：从上到下，优先级越来越高

1.5. 两个关键属性 **
1) display
display的3个值
 none : 丌显示该标记
 block : 按块标记的方式显示
 inline : 按行内标记的方式来显示
2) position
position的3个值
 static(缺省值)： 浏览器在默认情况下，会按从左到右，从上到下来依次摆放各
个标记
 absolute： 相对父标记偏移
 relative： 先按照默认的方式摆放，然后再偏移

1.6. 块标记和行内标记 *
1) 块标记（另起一行）

常见的块标记：
 div
 p
 img
 form
 table
 h1...h6
 ul
 li
2) 行内标记（不用另起一行）
常见的行内标记
 span
 strong
 a

1.7. 一些常见的属性 *
1.7.1. 文本 *

font-size :30px ; /* 字体大小 */ 

font-family : "宋体" //字体

 font-style : italic/normal //风格

 font-weight : 100 ; //粗绅 100~900 

text-align :center ; //对齐方式  left , right , center 

text-decoration : underline ; //加下划线

 cursor : pointer ; //光标的形状 wait

1.7.2. 背景 *

background-color : red ; //背景颜色

 background-image : url(images/b1.jpg) ; //背景图片

 background-repeat : no-repeat ; //平铺方式 repeat-x repeat-y 

background-position : 20px 10px ; //位置 

background-attachment : fixed ; //依附方式 scroll(缺省) 

也可以简化为：background : 背景颜色 背景图片 平铺方式 依附方式 水平位置 垂直位置

1.7.3. 边框 *

border : 1px solid red ; //宽度 风格 颜色

 border-left : 

border-right : 

border-bottom :

 border-top :

1.7.4. 定位 *

width : 100px ;

 height : 200px ;

 margin : //外边距 

margin-left : 20px ; 

margin-top : 30px ; 

margin-right : 40px ; 

margin-bottom : 50px ; 

也可以简化为 margin : 30px 40px 50px 20px ; //顶、右、底、左

此外，还有这样一些形式

 margin : 0px ;

 margin : 20px auto ; //上、下各20px，左右平均分配 

                             //一般用于居中

“混杂模式" : 在一个html文件当中，如果没有添加文档类型声明，ie浏览器默认会打开"混杂模式" , 即将浏览器的级别降低，以兼容老的网页。如果添加了文档类型声明，则ie会打开“标准模式"。

 padding : //内边距

 padding-left : 20px ; 

padding-top : 30px ; 

padding-right :40px ;

 padding-bottom : 50px ; 

也可以简化为 :

 padding :30px 40px 50px 20px ; //顶、右、底、左 

还可以 : padding : 0px ;

 注意：子标记会将父标记撑开