css學(xué)習(xí)第一天
1．你可以制作出體積更小下載更快的網(wǎng)頁
沒有樣式表時(shí)，如果我想更新整個(gè)站點(diǎn)中所有主體文本的字體，我必須一頁一頁地修改每張網(wǎng)頁。即便站點(diǎn)用數(shù)據(jù)庫提供服務(wù)，我仍然需要更新所有的模板，而且更新每一模板中每一個(gè)實(shí)例實(shí)例的<FONT FACE>。
樣式表的主旨就是將格式和結(jié)構(gòu)分離。利于樣式表，我可以將站點(diǎn)上所有的網(wǎng)頁都指向單一的一個(gè)CSS文件，我只要修改CSS文件中某一行，那么整個(gè)站點(diǎn)都會(huì)隨之發(fā)生變動(dòng)。
對(duì)繼承性的理解
- 使用特別說明的樣式表規(guī)則，例：
BODY { color: green }
P { color: red }
有一項(xiàng)規(guī)則特別說明<P> 中的文字一紅色顯示，但它同時(shí)也繼承了<BODY>的綠色規(guī)定。但是特別說明了的規(guī)則的重要性要大于繼承的規(guī)則，所以<P>之內(nèi)的文字一紅色顯示。
2．我們已經(jīng)學(xué)了將樣式表加到網(wǎng)頁的一種方法。實(shí)際上你可以使用4種方法。每種方法都有其不同的優(yōu)點(diǎn)：
- 將樣式表植入HTML文件中。
- 將一個(gè)外部樣式表鏈接到HTML文件上。
- 將一個(gè)外部樣式表輸入到HTML文件中。
- 將樣式表加入到HTML文件行中。
（生物里的胚胎移植）植入樣式表（內(nèi)聯(lián)樣式表：內(nèi)外相連）：
(外聯(lián)樣式表)
這就是我們?cè)谏弦豁撝杏玫姆椒ǎ械臉邮奖硇畔⒍剂杏?span lang="EN-US">HTML文件的頂部，同<BODY>分列，例：
<HTML>
<STYLE TYPE="text/css">
<!--
H1 { color: green; font-family: impact }
P { background: yellow; font-family: courier }
-->
</STYLE>
<HEAD>
<TITLE>My First Stylesheet</TITLE>
</HEAD>
<BODY>
<H1>Stylesheets: The Tool of the Web Design Gods</H1>
<P>Amaze your friends! Squash your enemies!</P>
</BODY>
</HTML>
植入樣式表規(guī)則后，瀏覽器在整個(gè)HTML頁面中都執(zhí)行該規(guī)則。如果你想對(duì)網(wǎng)頁一次性加入樣式表，就可采用該方法。
你可能注意到代碼中有兩處很奇怪： TYPE="text/css"屬性和注釋標(biāo)簽。 TYPE="text/css" 設(shè)定采用MIME類型，這樣以來，不支持CSS的瀏覽器可以忽略樣式表。
注釋標(biāo)簽(<!-- and -->)更為重要。有些老的瀏覽器（如MAC機(jī)用的IE 2.0）即使在設(shè)定了TYPE="text/css" 屬性時(shí)也不能忽略樣式表繼續(xù)執(zhí)行下面的命令，而且還會(huì)顯示樣式表的代碼。而使用注釋標(biāo)簽則可以避免發(fā)生這種情況。
鏈接（link ）到樣式表上
這里是樣式表功能發(fā)揮得淋漓盡致的地方。你可以將多個(gè)HTML文件都鏈接到一個(gè)中心樣式表文件。這個(gè)外部的樣式表文件將設(shè)定你所有網(wǎng)頁的規(guī)則。如果你改變樣式表文件中的額某一細(xì)節(jié)，所有頁面都會(huì)隨之改變。如果你維護(hù)的站點(diǎn)很大，則這項(xiàng)功能絕對(duì)會(huì)有其用武之地。
它的使用方法：產(chǎn)生一個(gè)普通的網(wǎng)頁，但使用<STYLE>規(guī)則，而是在<HEAD>內(nèi)使用<LINK>標(biāo)簽：
<HTML>
<HEAD>
<TITLE>My First Stylesheet
</TITLE>
<LINK REL=stylesheet HREF超鏈接
Hyperlink Reference ="mystyles.css" TYPE="text/css">（rel是relation縮寫）, rel屬性（relation）,描述了當(dāng)前頁面與href所指定文檔的關(guān)系
</HEAD>
<BODY>
<H1>Stylesheets: The Tool of
the Web Design Gods</H1>
<P>Amaze your friends! Squash
your enemies!</P>
</BODY>
</HTML>
(使用鏈接的樣式表時(shí)，你無須使用注釋標(biāo)簽。)
現(xiàn)在生成一個(gè)單另的文本文件，起名mystyles.css (或者其任何你喜歡的名字)。文件內(nèi)容如下：
H1 { color: green; font-family: impact }
P { background: yellow; font-family: courier }
如同發(fā)布HTML文件那樣，將這個(gè)CSS文件布到你的服務(wù)器中。在瀏覽器中觀看網(wǎng)時(shí)，你會(huì)發(fā)現(xiàn)瀏覽器將依照鏈接標(biāo)簽將有鏈接了的HTML網(wǎng)頁按照樣式表的規(guī)則示，在HREF屬性中你可以選擇使用絕對(duì)相對(duì)URL。
輸入(import)樣式表
輸入外部樣式表的方法同鏈接的方法類似。不同之處在于鏈接法不能同其它方法結(jié)合使用，但輸入法則可以。例：
<HTML>
<STYLE TYPE="text/css">
<!--
@import url(company.css);
H1 { color: orange; font-family: impact }
-->
</STYLE>
<HEAD>
<TITLE>My First Stylesheet
</TITLE>
</HEAD>
<BODY>
<H1>Stylesheets: The Tool of
the Web Design Gods</H1>
<P>Amaze your friends! Squash
your enemies!</P>
</BODY>
</HTML>
而其中輸入的 company.css文件內(nèi)容如下：
H1 { color: green; font-family: times }
P { background: yellow; font-family: courier }
在本例中，瀏覽器首先輸入 company.css的規(guī)則 ( @import 必須打頭), 然后加入移植的規(guī)則從而為這個(gè)網(wǎng)頁產(chǎn)生規(guī)則集合。
請(qǐng)注意，對(duì)于H1在外部樣式表文件和植入的樣式表中都設(shè)定了規(guī)則。在兩者沖突的情況下，瀏覽器應(yīng)執(zhí)行哪一項(xiàng)規(guī)則呢？植入的規(guī)則此時(shí)將占上風(fēng)。所以文字顯示效果如下：
Stylesheets: The Tool of the Web Design Gods
Amaze your friends! Squash your enemies!
如果你的瀏覽器不支持CSS請(qǐng)點(diǎn)擊這里觀看顯示效果。
輸入樣式表的靈活性可以使你輸入無數(shù)多個(gè)樣式表，并可以按照自己的喜好用植入的樣式表凌駕于輸入的樣式表之上。
但是目前只有IE 4.0支持輸入法。
在行內(nèi)加入樣式
最后，你還可以在HTML行中加入樣式規(guī)則，如下：
<HTML>
<HEAD>
<TITLE>My First Stylesheet
</TITLE>
</HEAD>
<BODY>
<H1 STYLE="color: orange; font-family: impact">Stylesheets: The Tool of the Web Design Gods</H1>
<P STYLE="background: yellow; font-family: courier">Amaze your friends! Squash your enemies!</P>
</BODY>
</HTML>
在這個(gè)例子中，你無須在HTML頂部加入樣表代碼。加入行內(nèi)的樣式表屬性將使瀏器同樣執(zhí)行樣式表規(guī)則。
該方法不方便之處在于：你必須在每行指中都中加入樣式規(guī)則，否則下一行時(shí)瀏器將轉(zhuǎn)回到文件的缺省設(shè)置。
加入行內(nèi)的樣式表相比不如植入、鏈接及輸入的樣式表那樣功能強(qiáng)大，但有時(shí)候你會(huì)發(fā)現(xiàn)它也很有用。
記住，你可以同時(shí)使用幾種方法，其實(shí)，樣式表的能力就在于綜合你加入網(wǎng)頁的各種樣式。
(只有link沒有用style標(biāo)簽)
3． CSS 格式設(shè)置規(guī)則由兩部分組成:選擇器和聲明。選擇器是標(biāo)識(shí)已設(shè)置格式元素(如 P、H1、類名稱或 ID)的術(shù)語，而聲明則用于定義樣式元素
分類
我先前已經(jīng)講過所有的HTML標(biāo)簽都可以用作選擇，并附加樣式表說明.但是如果你想達(dá)到的目的比這還要復(fù)雜該如何處理呢？比如,你想讓主體文字的1段用綠色顯示，第2段用紫色顯示，而第3段用灰色顯示，你能做到嗎？
這種情況下分類將發(fā)揮作用。你可以將段落P分成3種不同的類別，每一類應(yīng)用不同的樣式表說明。這些規(guī)則（不論是植入的還是外部樣式表文件）將以以下方式顯示：
P.first { color: green }
P.second { color: purple }
P.third { color: gray }
- 你的HTML代碼如下：
<P CLASS=first>The first paragraph,
with a class name of "first."</P>
<P CLASS=second>The second paragraph, with a class name of "second."</P>
<P CLASS=third>The third paragraph,
with a class name of "third."</P>
你可以給類別起任何一種名字，但不要忘了在樣式表規(guī)則中類別名稱前加一個(gè)句號(hào)（即英文中的 .）
你還可以生成不加任何HTML標(biāo)簽的分類：
.first { color: green }
這種方式更加靈活，因?yàn)楝F(xiàn)在我們可以將CLASS=first用于任何HTML標(biāo)簽，并應(yīng)用到網(wǎng)頁<BODY>中，而設(shè)定的文字將以綠色顯示。
根據(jù)正式的規(guī)定，以下為樣式表的串接順序：
- Inline styles （行內(nèi)樣式）
- Embedded styles （植入樣式）
- Linked styles （鏈接樣式）
- Imported styles （輸入樣式）
- Default browser styles（缺省瀏覽器樣式）
瀏覽器將按照上述順序執(zhí)行樣式表的指令。
如對(duì)本文有疑問，請(qǐng)?zhí)峤坏浇涣髡搲?，廣大熱心網(wǎng)友會(huì)為你解答??！ 點(diǎn)擊進(jìn)入論壇
