前端基础之css

参考博客：http://www.cnblogs.com/liwenzhou/p/7999532.html

一、 CSS选择器  

  --> CSS如何引入?
   1. 直接写在标签里面 style="样式1;样式2;"
   2. 在head中通过style标签定义
   3. 把样式单独写在css文件中,然后在html文件中通过link标签导入
  
  
  --> CSS语法
   
   选择器 {样式1;样式2}

 1. 基本选择器   　　

　　 1. 标签选择器
     　2. ID选择器 ：前加"#"
   　  3. 类选择器(class="c1 c2 ..."):前加"." 

  2. 通用选择器(*)     

 3. 组合选择器
   　　 1. 后代选择器(空格)
   　　 2. 儿子选择器(>)
  　　  3. 毗邻选择器(div+p)
  　　  4. 弟弟选择器(~)
   
   4. 属性选择器
   　　 1. [s9]
   　　 2. [s9="hao"]
 　　   3. 其他不常用的(有印象即可)
   
   5. 分组和嵌套
  　　  1. 分组(用逗号分隔的多个选择器条件)
  　　  2. 嵌套(选择器都可以组合起来使用)
   
    
   6. 选择器的优先级
  　　  1. 越靠近标签的优先级越高(就近原则)
  　　  2. 权重的计算
 　　   　　 1. 内联样式1000
  　　  　　 2. ID选择器100
 　　  　　  3. 类选择器10
  　　  　　 4. 元素选择器1
     
    div#d1(101)/div.c1(11)/div .c1

　　7. 伪类和伪元素
　　　　1. 伪类
　　　　　　1. :link
　　　　　　2. :visited
　　　　　　3. :hover (重要)
　　　　　　4. :active
　　　　　　5. :focus(input标签获取光标焦点)
　　　　2. 伪元素
　　　　　　1. :first-letter
　　　　　　2. :before(重要 在内部前面添加)
　　　　　　3. :after(重要 在内部后面添加)

2. CSS选择器补充

http://www.cnblogs.com/liwenzhou/p/7999532.html

3. CSS属性

 1. 文字属性  

　　 1. font-family   

　　2. font-size  　

　　 3. font-weight   

　　4. color   

　　　　 1. rgb(255, 255, 255)   

　　　　 2. #f00   　　

　　　　 3. red    

　　　　4. rgba()

 2. 文本属性  

　　 1. text-align  

　　 2. text-decoration  

3. 背景属性   

　　1. background-color  

　　 2. background-image   

 4. 边框属性   

　　1. border   

　　2. border-radius  --> 变圆    

5. display属性   

　　1. inline  　　

　　 2. block   

　　3. inline-block  

　　 4. none (隐藏)   

 6. CSS盒子模型(从外到内)   

　　1. margin: 边框之外的距离(多用来调整 标签和标签之间的距离)  

　　 2. border边框  

　　 3. padding:内容区和边框之间的距离(内填充/内边距)   

　　4. condent: 内容  

 7. 浮动:   

div配合float 来做 页面的布局   任何元素浮动之后都会变成块元素。      float:    1. left    2. right    3. none  

8. clear 清除浮动--> 清除浮动的副作用(内容飞出,父标签撑不起来)
　　1. 结合伪元素来实现
　　　　.clearfix:after {
　　　　content: "",
　　　　display: "block",
　　　　clear: both;
　　　　}

　　2. clear取值:
　　　　1. left
　　　　2. right
　　3. both

9. overflow
　　1. 标签的内容放不下(溢出)

　　2. 取值:
　　　　1. hidden --> 隐藏
　　　　2. scroll --> 出现滚动条
　　　　3. auto
　　　　4. scroll-x
　　　　5. scroll-y

　　例子:
　　圆形头像的例子
　　　　1. overflow: hidden
　　　　2. border-radius: 50% (圆角)

10. 定位:   

　　1. static   --> 默认的   　　

　　2. relative --> 相对定位(相对于原来的位置来说)   

　　3. absolute --> 绝对定位(相对于最近的一个被定位过的祖宗标签) (完全脱离文档流)  　　

　　 4. fixed    --> 固定在某个位置(返回顶部按钮)    left   right   top   bottom

　　补充:
　　脱离文档流的3种方式
　　　　float
　　　　absolute
　　　　fixed

11. opacity (不透明度)
　　1. 取值0~1
　　2. 和rgba()的区别:
　　　　1. opacity改变元素子元素的透明度效果
　　　　2. rgba()只改变背景颜色的透明度效果

12. z-index
　　1. 数值越大,越靠近你
　　2. 只能作用于定位过的元素

　　3. 自定义的模态框示例