Cascading Style Sheets 基础整理(1)

最新推荐文章于 2021-08-24 10:24:24 发布

原创最新推荐文章于 2021-08-24 10:24:24 发布 · 222 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#CSS

CSS HTML 专栏收录该内容

1 篇文章

订阅专栏

本文详细介绍了CSS样式表的使用方法，包括优先级、语法、选择器等核心概念，并提供了丰富的实例帮助理解。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >


//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)//内嵌元素的样式

[/code]


//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