|
div：division,。理解為一個(gè)盆,，里面可以放很多盤子。即<div>...</div>之間相當(dāng)于一個(gè)容器,，可以容納段落,、標(biāo)題、表格,、圖片,、乃至章節(jié)、搞要和備注等各種html元素,。 注意：<p></p>標(biāo)簽之間不能嵌套div標(biāo)簽,。通常將p標(biāo)簽放于div標(biāo)簽內(nèi)1,、內(nèi)聯(lián)式樣式表:在標(biāo)簽內(nèi)部寫樣式代碼。方便但不靈活 2,、嵌入式樣式表：一般在head標(biāo)簽內(nèi),。以<style></style>這種方式，可以控制整個(gè)網(wǎng)頁里的某個(gè)標(biāo)簽的樣式 3,、處部樣式表：單獨(dú)將樣式定義成一個(gè)文件,，然后在需要引用樣式的文件內(nèi)調(diào)用樣式文件?？晒┧行枰奈募?，減少重復(fù)性工作 一般在head標(biāo)簽內(nèi)寫上：<link rel="stylesheet" type="text/css" src="style/aa.css"> 4,、輸入樣式表:在一個(gè)css文件中引入另一個(gè)css文件。比如： 在a.css文件中寫上@import url(b.css); 表示在a.css文件中引入b.css文件中的樣式,。 可以理解為級(jí)聯(lián)引用 樣式規(guī)則的選擇器(大括號(hào)前面)： 一,、html selector:直接在大括號(hào)前寫html的標(biāo)簽,。 格式 p {...} <p>p標(biāo)簽 的選擇器樣式應(yīng)用</p> 二,、class selector:在標(biāo)簽中定義class屬性（class的屬性值可以重復(fù)）,，然后在樣式中引用class屬性的值。 格式： p.one{...} p.two{...} <p class="one">aaaaaaaaaa</p> <p class="two">bbbbbbbbbbb</p> 如果寫成： .one{...} .two{...} <p class="two">bbbbbbbbbbb</p> <div class="two">bbbbbbbbbbb</div> 表示任何標(biāo)簽內(nèi),，class屬性的值為one或two的,，都可以應(yīng)用對(duì)應(yīng)的樣式 三、 id selector:在標(biāo)簽中定義id屬性(每個(gè)標(biāo)簽都可以有id屬性,，但一個(gè)頁面中的id值必須唯一),，然后在樣式中引用id屬性的值。一般應(yīng)用于單位個(gè)標(biāo)簽中,。 格式： #a{...} #b{...} #c{...} #d{...} <p id="a">aaaaaaaaa</p> <p id="b">bbbbbbbbb</p> <p id="c">ccccccccccc</p> <p id="d">dddddddd</p> 四、關(guān)聯(lián)選擇器：說白了就是嵌套使用,，用空格分開,。也可以延伸到class屬性的嵌套。 格式： div p em{...} //最普通的標(biāo)簽嵌套方式 <div> <p> <em>test biaoqian qiantao</em> </p> </div> 格式： .one .two em{...} //(類選擇器方式的關(guān)聯(lián)選擇器) <center class="one"> <p class="two"> <em>test class qiaotao</em> </p> </center> 當(dāng)然,，下面寫義也可以(延伸到id屬性的情況) 格式： #one .two em{...} <center id="one"> <p class="two"> <em>test class qiaotao</em> </p> </center> 五,、組合選擇器:大括號(hào)前寫多種標(biāo)簽并以逗號(hào)隔開。 格式： p,div,a,h1,#two,.one{...} //多個(gè)標(biāo)簽以逗號(hào)隔開 <p>test1</p> <div>test2</div> <h1>test3</h1> <em class="one">test4</em> <dl id="two">test5</dl> 六,、偽元素選擇器:對(duì)同一個(gè)標(biāo)簽的不同狀態(tài)使用樣式,。如a和p標(biāo)簽 格式： a:link{...} //鏈接狀態(tài) a:hover{...} //鼠標(biāo)放上去狀態(tài) a:visited{...} //訪問過的狀態(tài) <a href="www.baidu.com">百度</a> 上述方式，會(huì)使所有的a標(biāo)簽的樣式都一樣,。 如何做到不同的鏈接,，樣式不一樣呢？用偽元素與類同時(shí)使用的方法： 格式： a.one:link{...} a.two:hover{...} a.three:visited{...} <a class="one" href="www.baidu.com">baidu.com</a> <a calss="two" href="www.sina.com.cn">sina.com.cn</a> <a class="three" href="www.sohu.com">sohu.com</a> |
|
|
