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 name="code">// attribute selector!!!!!!!!!!!!!!! refer to : http://www.w3school.com.cn/css/css_syntax_attribute_selector.asp