css （Cascading style sheet）样式表

1 css(Cascading style sheet)?
  作用？：对html标签添加各种样式。
          使数据和显示进行分开；
          降低网络流量
2 css语法
   p{color:red}
   
   选择器名{属性名1：属性值；属性名2：属性值;......}
   存在一个问题？：假如一个标签没设置的那个属性？
3 在html如何使用css？
  1 行级样式表：
    采用style属性，范围值针对此标签试用
    例子：<div style="border:1">//多个属性之间用 ； 分割；
  2 内嵌样式表:
    采用<style>.....<style/>标签完成;值针对本页面试用
  3 外部样式表：
    在单独的css文件中编辑样式：
    如何引入外部样式表？
    <link rel="stylesheet" type="text/css" href="a.css">
4 如何编写内嵌&外部样式表
    选择器?
    选择器：相当于一个变量名，就是为所定义的那些属性集，取了别名。在html中使用该别名来应用所定义的属性。但变量名的取名有一定的规则；
    
     1 基本选择器:
       a 标签选择器:选择器的名字就是html页面上的标签如：
        p{ color:red}
       在html中直接使用<p/>就能应用在css中定义好的样式
       b 类选择器:使用.来定义(名字可以自定)
        .one{bacnkground-color:red}
       在html中使用标签的class属性来引用该定义的样式
        <p class="one">
       c ID选择器：使用#来定义
         #one{cursor:hand}
         <p id="one"/>
         ID选择器只能供特定的（一个）标签使用；在同一个html页面上只能出现一次
       d 通用选择器：使用*来定义，代表页面上所有的标签
         *{font-size:30px}
     2 扩展选择器
       a 组合选择器: 采用逗号隔开
          h4,p1,h2，.one,#id{color:red};// 当多个标签定义的属性相同时，可提高代码的复用性
        
       b 关联选择器(后代选择器):采用空格隔开
         h4 span font{color:red};//表示h4标签中的span标签中的font标签的样式；
       c 伪类选择器：事件选择器当对应标签放生某种事件是引发的样式
          1 静态伪类：使用：来定义;静态伪类选择器只有2个；只能用于超链接
            :link 表示点击超链接之前的颜色
            :visited :表示点击超链接之后的颜色
          2 动态伪类:针对所有的标签都试用
              :hover:鼠标移动到某个标签上的时候的样式
               如: p:hover{font-size:36px}
              :focus:当某个标签获得焦点的时候所体现出来的样式
               input:focus{background-color:red}
              :active: 当点击某个标签没有放松鼠标时
               input:ative{color:red}
              
5 Css各种样式之间的冲突
      CSS样式的冲突:当存在多个不同作用范围的样式表对同一个标签进行修饰时
      1 ID 选择器>类选择器>标签选择器
      2 行级样式表>内嵌样式>外部样式
       就近原则
       
6 css 的各种属性
   1 css中尺度单位的介绍
      a 绝对单位  lin=2.54cm=25.4mm=72pt=6pc  pt是磅
      b 相对单位  px,em(印刷单位相当于12个点),%(相对周围的文字）
   2 字体设置
      p{
         font-size:50px;
         font-style:italic;//斜体
         font-weight:bold;//粗体
         font-family:幼圆；//字体类型
         font-variant:small-caps;//大小写
        }  
   3  文本设置
       p{
          letter-spacing:0.5cm;/字母间距/
          word-spacing:1cm;// 单词间距
          text-align:center;//在所包含的容器中间
          text-decoration:overline;//字体上划线
          text-transform:lowercase;//小写
          color:red;
         }

   4 背景设置
     body{
            background-color:red;//背景颜色
            background-image：url(...)/背景图片
            background-repeat：no-repeat;//背景不重复
            background-postion:center right//背景位置
            background-attachment:scroll;背景是否随着滚动条滚动
          }

    5 列表设置
       ul li{
               list-style:none;//清除列表当前样式
               list-style-image:url(images/2.gif)//列表当前图片
               margin-left:80px;// 相对于父容器的距离
             }
    6 定位设置(position ,float,clear,z-index)
      
      #d{
          postion:absolute;//绝对定位：定义了横纵坐标，脱离了本身(以浏览器左上角为参考点)
          left:100px;
          top:100px;
          border:1px solid red;
          height:100px;
          backgorund-color:#ff66ff;
         }

       #d1{
            postion:relative;//相对位置;相对父容器？？

            left:100px;
            border:1px solid red;
            height:100px;
            backgorund-color:#ff66ff;
    
          }
       z-index:值为任意值，值越大离我们越近
       设置鼠标：cursor;