最近一直在學JS,但老是以爲有些吃力,因此想把CSS和html的基礎知識再整理一下,如今先複習一下CSS的導入,相對單位來常見的和選擇器中常見的。
css
CSS的的外部樣式表導入的兩種方法:html
1)使用<link>標籤導入瀏覽器
<link href="001.css" type="text/css"/>
href能夠是相對地址也能夠是絕對地址;ide
2)使用@import關鍵字導入url
<style type="text/css"> @import url("001.css"); </style>
css中的相對單位:spa
em:一個em等於font-size的屬性值,若是設置font-zize屬性的單位爲em,則em的值將根據父元素的font-size值來肯定;如code
p{ font-size:12px; line-height:2em;//行高爲24px }
px:通常參考父對象中相同屬性的值;若是父元素高爲500,子元素爲50%,則子元素的實際高度爲250 px;orm
基本選擇器:htm
1)標籤選擇器:標籤名{ 屬性:屬性值 }
對象
p{font-size:12px; color:red;}
2 )類選擇器:.類名{ 屬性:屬性值 }
<style type="text/css"> .size{font-size:14px;} </style> <body> <div class="size">世界,你好!</div> <p class="size">你好!</p> </body>
它能夠精準到某個具體的元素對象;
3)ID選擇器;#box{ 屬性:屬性值}
<style type="text/css"> #box{height:200px;width:200px;} </style> <div id="box">四月裂帛</div>
div#box的優先級>#box 的優先級
4)通配選擇器:*{ magin:0;padding=0;}
通配選擇器能夠影響到頁面中全部的元素,通常都用來,清楚頁面的原有格式,使他兼容各瀏覽器;
複合選擇器:
1)子選擇器:指定父元素所包含的子元素的樣式:用>表示,如
<style type="text/css"> #box>.yangshi{ height:200px;width:200px; } </style> <body> <div id="box"><span class="yangshi">世界這麼大,我想去看看</div> </body
2)相鄰選擇器:指定一個元素相鄰的下一個元素的樣式,用+表示,如
<style type="text/css"> h2{font-size:12px;} h2+div{font-size:20px;}//爲div元素指定樣式 </style> <body> <h2>結構</h2> <div>春眠不覺曉</div> </body>
3)包含選擇器:經過空格表示符來表示,如
<style type="text/css"> #header p{}; </style> <body> <div id="header> <p></p> <p></p> <p></p> </div> </body>
#header p{}定義了header中全部p元素的樣式;
4)僞選擇器:僞類和僞元素以(:)爲前綴表示,而且與先後名稱之間不要有空格;
下面是利用超連接的4個僞類選擇器定義超連接文本的4中不一樣顯示狀態:
<style type="text/css"> a:link{color:#ff0000;} a:visited{color:#0000FF;} a:hover{color:00ff00;} a:active{color:ff00ff;} </style> <body> <a href="#">超連接文本</a> </body>
5)選擇器分組:把樣式相同的元素寫在一塊兒,定義樣式,如
html,body,h1,h2,h3,h4,h5,p,table,caption,tr,td,th,ul,li,ol,di,dl,dt,dd,form,legend,fidest { margin:0; padding:0; }
這樣能夠把全部元素的樣式清楚爲0;除了能夠對標籤元素進行分組,還能夠給類選擇器和ID選擇器進行分組,用,隔開;