Cascading Style Sheets 基础整理(1)

//Priority 优先权 1 to 4 

1.Broswer default setting //浏览器默认设置

2.External Css[b] [/b](independent css file ) //外部Css样式表

3.Internal Css (between HTML )//内部Css样式描述  

4.Embedded style (inside of HTML elements)//内嵌元素的样式

//CSS Grammar CSS语法

//Css grammar ruler contains two components: selector + statement(s)
//Css语法规则包括两个部分: selector + statement(s)
    Selector{property : value} //property - style attrbute
    example: h1{color : red, font-size : 14px;}

//tips: font's color in different value unit.
//提示：字体颜色用不同单位的设置
    example: h1{color:red},h1{color:#dcd000} or h1{color:#dcd}
             h1{color: rgb(255,0,0)} or h1{color:rgb(100%,0%,0%)}

//Selector groups
//群组选择器
        h1,h2,h3,h4{color : green}

//inherit: normally childern inherit parents' attrubute to its own
//继承：一般情况下字元素都会继承父元素的属性

       body{font-family : sans-serif;}
       //all the children elements are setted 'sans-serif' as default fonts
       //however Netscape 4,IE6 DO NOT support inherit.
       //一些特殊情况
       //so we should BE KIND TO Netscape4&IE6
             body{font-family : sans-serif;}
             p,td,ul,ol,li,dl,dt,dd,div{font-family : sans-serif;}

//derive selector
            
     main-element sub-element(s){font-size : 12px;} 

     //descendant selector
     example:
             <div class='des1'>
                 <strong>Hello World</strong>
             </div>

             <div class='des2'>
                 <strong>Hello World</strong>
             </div>
             
             css: 
                  div .des1{color : red}
                  div .des2{color : green}

      //child selector
      example:
             <h1>this is <b>child selector</b> test paragraph</h1>
             <h1>this is <em><b>child selector</em> test paragraph</b></h1>
             css: 
                 h1 > b{color:red}//only the first paragraph will be effected

      //Ajacent sibling selector : select the element B which is closed follow element A and both of they have the same parent.
      example:
              <div>
                  <h1>Ajacent sibling selector</h1>
                  <p>this is the first paragraph</p>
                  <p>this is the second paragraph</p>
              </div>
              css:
                   h1 + p{color:red}//first paragraph will be effected.
              //special situation
              <ol>
                  <li>1</li> ...1
                  <li>2</li> ...2
                  <li>3</li> ...3
              </ol>
              css:
                  li + li{color : red}// only 2&3 will be effected.

 //id selector
 //id attribute only can be used once time in each document.
  <div id="idSelector"></div>
  css: 
      #idSelector{color:red}
  
 //class selector
 //class selector's first character could not be a NUMBER
    <div class="idSelector"></div>
    css: 
      .idSelector{color:red}

// attribute selector!!!!!!!!!!!!!!!
 refer to : http://www.w3school.com.cn/css/css_syntax_attribute_selector.asp