網(wǎng)站建設(shè)CSS文件內(nèi)定義CSS
網(wǎng)站建設(shè)將各種CSS編輯在一個特定的文件里,只耍按照1.6.1節(jié)格式一、二、二進行CSS定義即吋,文件內(nèi)不作任何HTML標(biāo)簽。保存文件時,文件客也耍用半角ASCII字符,擴展名規(guī)定為.css。這桿保存的文件就是CSS文件《 CSS文件內(nèi)容的一般形式如下:
標(biāo)簽名1 [屈性1:值1;屈性2:值2; . }
標(biāo)簽名2 (屈性1:值1;廟性2:值2; . }
......
•類名1(屈性1:值1;廟性2:值2;……}
•類名2 (屈性1:值1;廟性2:值2;……}
#ID名1{.網(wǎng)性1:值1;屈性2:值2;
學(xué)ID名2{.網(wǎng)性1:值1;屈性2:值2;
實際編輯時,為便丁閱讀,葉將每個M性單獨寫成一行。
例如,有一個typel.css文件的內(nèi)容如下。
p{ /*定義標(biāo)簽P的樣式*/
font-family: ’黑體";
font-size:16px;
color:rgb(255,0,0);
text-align:center;)
* fontclassl( /*定義一個名為fontclassl的類樣式*/
font-family:"諧體";
font-size:12px;
color:rgb{0,0,255);
text-align:center? }
#fontidl{ /*定義一個名為fontidl的ID樣式*/
font-family:"宋體";
font-size:13px;
color:rgb{0,255,0); }
1.6.2在網(wǎng)頁里應(yīng)用CSS
標(biāo)簽樣式定義好以后,在網(wǎng)頁中應(yīng)用該標(biāo)簽時,標(biāo)簽樣式會『丨動控制元崠的顯示樣式,如1.6.1節(jié)介紹的p標(biāo)簽樣式和h卜h4標(biāo)簽#式的定義與應(yīng)用《類#式定義好以后,該樣式時應(yīng)用丁•一類(多個}標(biāo)簽元裹中,釆用名為“class”的柄性來引用類柞式,應(yīng)用格式如下:
<標(biāo)簽名class: ”類名">……"標(biāo)簽名>
ID樣式定義好以后,該樣式只能應(yīng)用丁•某一個標(biāo)簽元裹內(nèi),采用客為“id”的屆性來引用ID樣式,應(yīng)用格式如下:
<標(biāo)簽名id= "ID名">……
書寫各種名、屆性和域性值時,耍注意釆ffl半角字符(屈性值為漢字寧體名稱例外),并區(qū)分大小寫。雖然HTML規(guī)范對CSS不區(qū)別大小寫,但XHTML規(guī)范卻是嚴(yán)格區(qū)別CSS的大小寫。我們應(yīng)按照XHTML規(guī)范執(zhí)行。
在網(wǎng)頁中應(yīng)用CSS時,常常耍用到div和span這兩種HTML標(biāo)簽。標(biāo)簽div用丁定義塊(或?qū)?元素,span用定義行內(nèi)元態(tài)-這兩個標(biāo)簽都nj•應(yīng)用樣式類和id柞式,以確定相應(yīng)元態(tài)的顯示禪式。
span與div的不同之處在: span是內(nèi)聯(lián)的,用于一小塊內(nèi)聯(lián)HTML中,可嵌套于多種標(biāo)簽(如div、p、table等)之內(nèi),如果不給span冗態(tài)指定樣式,則它什么也不做:而div是塊級的標(biāo)簽,用于組合一大塊代碼,div元裹內(nèi)可眹套div元素、span元素和其他HTML元素,它的前后有斷行。
如例1-10.htm在網(wǎng)頁.頭部
#簽內(nèi),按如下方式定義并應(yīng)用類#式和ID樣式。
------------------淸笮 1-10 l-10.htm-----------
注意:當(dāng)網(wǎng)頁中出現(xiàn)元素嵌套時,一般情況下,內(nèi)屋元素會繼承外屋元素的樣式,但內(nèi)展元索設(shè)有獨立樣式時,按獨立設(shè)定的樣式顯示.當(dāng)多種樣式作用于一個網(wǎng)頁對象時,最里展的樣式?jīng)Q定這個對象的顯示形式,這是樣式表的層金特性,
1.6.3 CSS 文件
1.CSS文件的建立
網(wǎng)頁以將一系列CSS定義集中起來,不包栝任何HTML標(biāo)簽,爭獨保存為一個文件,文件擴展名為.css-然沿采用鏈接或?qū)氲姆绞?,能夠使這個CSS文件被網(wǎng)站內(nèi)所有網(wǎng)頁文件所共享。
2. CSS文件的應(yīng)用
其在HTML網(wǎng)頁的head頭部元崠中,將匕經(jīng)建立CSS文件鏈接或?qū)脒M來,則CSS文件里所有定義的CSS,就能夠被網(wǎng)頁元裹直接使
1)鏈接CSS文件與樣式應(yīng)用
鏈接CSS文件盅耍在網(wǎng)頁head頭部進•設(shè)CSS文件所在的路徑和文件名是path/filename.css,則在HTML網(wǎng)UT.頭部鏈接CSS文件的格式如下:
<head>
<link hre£="path/£ilenajne.css" rel="stylesheet" type= "text/css" />
</head>
若在網(wǎng)頁里鏈接了 CSS文件,則網(wǎng)頁body ±體內(nèi)備種標(biāo)簽元裹就nj•以很方便地應(yīng)用CSS文件里已定義的各種樣式,使用方式與1.6.2節(jié)所講的方式一柞。當(dāng)用戶瀏覽網(wǎng)頁時,元裹中有應(yīng)fflCSS的地方,就會1H動地到CSS文件里i•査找相應(yīng)的樣式,并發(fā)送給用戶瀏覽器,控制對應(yīng)元裹的顯示樣式《
若有一個網(wǎng)頁文件1-11.htm(與typel.css在同一口錄下),其內(nèi)容如下》
------------------清單 1-12 l-ll.htm------------
<html>
<head>
<link hre£="typel.css" rel="tylesheet" type="text/css" />
</head>
<body>
<div class="textl"
<p id="titlel”>靜夜思</p>
<p>床前明月光光,疑是地上霜。</p>
不頭望明月,低頭思故鄉(xiāng)。
</div>
<P>
<table><capital id=“wtitlel”>課程表</capital>
<tr><th>第12書</以><化>第 34 節(jié)</th><th>^ S6 甘</th></tr>
<tr><td> 語文 </td><td> 數(shù)學(xué) </td><td> 英語 </td></tr>
</table>
</p>
</body>
<html>