4.CSS（cascading style sheet）

1. cascading:层叠式；多种选择器共同修饰一个内容
   
2. 常用属性

   字符颜色
    color:red;
   字符大小
    font-size:20px;
   背景颜色
    background-color:red;
   字符加粗
    font-weight:bold;//normal;
   字符斜体
    font-style:italic;//normal; 
   下划线
    text-decoration:underline;//none;
   字符阴影
    text-shadow:1px 1px 1px 1px;

3. 选择器(类上样式，id上行为）

   标签选择器:body/p/span/div/img/label/ul等
     P{
    }
   id选择器 id名不能重复<p id="pg1"></p>
     #pg1{
    }
   类选择器（复用） <div class="pg2"></p>
     .pg2{
    }
    类名可重复，可以有多个类名 
    <p class="cl1 cl2">我有两个名字</p>

4. 后代选择器（描述一种祖先结构，可不具体指明）

   .div1 #li2 p {
    color:red;
   }
   <div class="div1">
    <ul>
     <li>1</li>
     <li id="li2">
      <p>香蕉</p>
      <p>苹果</p>
      <p>橘子</p>
     </li>
     <li>3</li>
    </ul>
   </div>

5. 交集选择器（连写，）

   p.jj{
    color:red;
   }
   <p>hah</p>
   <p>haha</p>
   <p class="jj">hahaa</p>

6. 并集选择器/分组选择器（，同时具有这个style）

   p,.jiba{
    color:red;
   }
   <p>hah</p>
   <ul>
    <li class="jiba">hh</li>
    <li>gg</li>
   </ul>

7. 通配符

   * 通配所有元素，效率不高
    *{
      color:red;
    }

8. CSS3选择器

   儿子选择器(IE7开始兼容）
     div>p{
      color:red;
    }
   序选择器(IE8开始兼容)
    div li:first-child{}
    <div>
     <ul>
      <li></li>
      <li></li>
     </ul>
    </div>
   下一个兄弟选择器(+，紧跟第一个元素的元素)IE7
    h1+p{}
    <h1></h1>
    <p>我改变</p>
    <p></p>
   class为div1的div的后代class为li1的li
    div.div1 li.li1{
     color:red;
    }