CSS速查手冊(1).doc

CSS速查手冊(1)hve 2001年 60期 Dreamweaver4是現(xiàn)今最好的網(wǎng)站編輯工具之一，用它來給網(wǎng)頁制作CSS樣式表會更簡單、更方便。本教程教你如何利用Dreamweaver4在頁面中加入CSS，你不用死記硬背代碼標(biāo)記，也不用去看很厚的CSS手冊，就可以輕松自如的在網(wǎng)頁中運(yùn)用CSS。不過首先你要對CSS有一定的了解。因此，本教程的前面4章為CSS理論知識，主要是對CSS的全面介紹，希望讀者看后對CSS的語法、結(jié)構(gòu)、應(yīng)用有一個全面的了解；后面4章為DW實戰(zhàn)，主要是教你如何把Dreamweaver4的CSS靈活運(yùn)用在網(wǎng)頁中。閱讀此文前，你需要對HTML有一定的了解，并會使用Dreamweaver4。#1 一、 認(rèn)識CSSCSS就是Cascading Style Sheets，中文翻譯為“層疊樣式表”，簡稱樣式表，它是一種制作網(wǎng)頁的新技術(shù)。網(wǎng)頁設(shè)計最初是用HTML標(biāo)記來定義頁面文檔及格式，例如標(biāo)題、段落、表格、鏈接等，但這些標(biāo)記不能滿足更多的文檔樣式需求，為了解決這個問題，在1997年W3C（The World Wide Web Consortium）頒布HTML4標(biāo)準(zhǔn)的同時也公布了有關(guān)樣式表的第一個標(biāo)準(zhǔn)CSS1， 自CSS1的版本之后，又在1998年5月發(fā)布了CSS2版本，樣式表得到了更多的充實。W3C把DHTML（Dynamic HTML）分為三個部分來實現(xiàn)：腳本語言（包括JavaScript、Vbscript等）、支持動態(tài)效果的瀏覽器（包括Internet Explorer、Netscape Navigator等）和CSS樣式表。你可以用CSS精確地控制頁面里每一個元素的字體樣式、背景、排列方式、區(qū)域尺寸、四周加入邊框等。使用CSS能夠簡化網(wǎng)頁的格式代碼，加快下載顯示的速度，外部鏈接樣式可以同時定義多個頁面，大大減少了重復(fù)勞動的工作量。注意：CSS需要IE4（Internet Explorer 4.0）和NC4（Netscape 4.0）以上的瀏覽器支持，有些效果需要更高版本的瀏覽器支持。#1 二、 語法 1. 基本語法CSS的定義是由三個部分構(gòu)成：選擇符（selector），屬性（properties）和屬性的取值（value）?；靖袷饺缦拢簊elector property: value （選擇符 屬性：值）選擇符可以是多種形式，一般是你要定義樣式的HTML標(biāo)記，例如BODY、P、TABLE，你可以通過此方法定義它的屬性和值，屬性和值要用冒號隔開：body color: black選擇符body是指頁面主體部分，color是控制文字顏色的屬性，black是顏色的值，此例的效果是使頁面中的文字為黑色。如果屬性的值是多個單詞組成，必須在值上加引號，比如字體的名稱經(jīng)常是幾個單詞的組合：p font-family: sans serif（定義段落字體為sans serif）如果需要對一個選擇符指定多個屬性時，我們使用分號將所有的屬性和值分開：p text-align: center; color: red（段落居中排列；并且段落中的文字為紅色）為了使你定義的樣式表方便閱讀，你可以采用分行的書寫格式：ptext-align: center;color: black;font-family: arial（段落排列居中，段落中文字為黑色，字體是arial） 2. 選擇符組 你可以把相同屬性和值的選擇符組合起來書寫，用逗號將選擇符分開，這樣可以減少樣式重復(fù)定義：h1， h2， h3， h4， h5， h6 color: green （這個組里包括所有的標(biāo)題元素，每個標(biāo)題元素的文字都為綠色）p， table font-size: 9pt （段落和表格里的文字尺寸為9號字）效果完全等效于：p font-size: 9pt table font-size: 9pt 3. 類選擇符用類選擇符你能夠把相同的元素分類定義不同的樣式，定義類選擇符時，在自定類的名稱前面加一個點號。假如你想要兩個不同的段落，一個段落向右對齊，一個段落居中，你可以先定義兩個類：p.right text-align: rightp.center text-align: center然后用不在不同的段落里，只要在HTML標(biāo)記里加入你定義的class參數(shù)：這個段落向右對齊的?這個段落是居中排列的注意：類的名稱可以是任意英文單詞或以英文開頭與數(shù)字的組合，一般以其功能和效果簡要命名。類選擇符還有一種用法，在選擇符中省略HTML標(biāo)記名，這樣可以把幾個不同的元素定義成相同的樣式：.center text-align: center（定義.center的類選擇符為文字居中排列）這樣的類可以被應(yīng)用到任何元素上。下面我們使h1元素（標(biāo)題1）和p元素（段落）都?xì)w為“center”類，這使兩個元素的樣式都跟隨“.center”這個類選擇符：這個標(biāo)題是居中排列的這個段落也是居中排列的注意：這種省略HTML標(biāo)記的類選擇符是我們今后最常用的CSS方法，使用這種方法，我們可以很方便的在任意元素上套用預(yù)先定義好的類樣式。 4. ID選擇符在HTML頁面中ID參數(shù)指定了某個單一元素，ID選擇符是用來對這個單一元素定義單獨(dú)的樣式。ID選擇符的應(yīng)用和類選擇符類似，只要把CLASS換成ID即可。將上例中類用ID替代：這個段落向右對齊定義ID選擇符要在ID名稱前加上一個“#”號。和類選擇符相同，定義ID選擇符的屬性也有兩種方法。下面這個例子，ID屬性將匹配所有id=intro的元素：#introfont-size:110%;font-weight:bold;color:#0000ff;background-color:transparent（字體尺寸為默認(rèn)尺寸的110%；粗體；藍(lán)色；背景顏色透明）下面這個例子，ID屬性只匹配id=intro的段落元素：p#introfont-size:110%;font-weight:bold;color:#0000ff;background-color:transparent注意：ID選擇符局限性很大，只能單獨(dú)定義某個元素的樣式，一般只在特殊情況下使用。 5. 包含選擇符可以單獨(dú)對某種元素包含關(guān)系定義的樣式表，元素1里包含元素2，這種方式只對在元素1里的元素2定義，對單獨(dú)的元素1或元素2無定義，例如：table afont-size: 12px在表格內(nèi)的鏈接改變了樣式，文字大小為12象素，而表格外的鏈接的文字仍為默認(rèn)大小。 6. 樣式表的層疊性層疊性就是繼承性，樣式表的繼承規(guī)則是外部的元素樣式會保留下來繼承給這個元素所包含的其他元素。事實上，所有在元素中嵌套的元素都會繼承外層元素指定的屬性值，有時會把很多層嵌套的樣式疊加在一起，除非另外更改。例如在DIV標(biāo)記中嵌套P標(biāo)記：div color: red; font-size:9pt這個段落的文字為紅色9號字（P元素里的內(nèi)容會繼承DIV定義的屬性）注意：有些情況下內(nèi)部選擇符不繼承周圍選擇符的值，但理論上這些都是特殊的。例如，上邊界屬性值是不會繼承的，直覺上，一個段落不會同文檔BODY一樣的上邊界值。另外，當(dāng)樣式表繼承遇到?jīng)_突時，總是以最后定義的樣式為準(zhǔn)。如果上例中定義了P的顏色：div color: red; font-size:9ptp color: blue這個段落的文字為藍(lán)色9號字我們可以看到段落里的文字大小為9號字是繼承div屬性的，而color屬性則依照最后定義的。不同的選擇符定義相同的元素時，要考慮到不同的選擇符之間的優(yōu)先級。ID選擇符，類選擇符和HTML標(biāo)記選擇符，因為ID選擇符是最后加到元素上的，所以優(yōu)先級最高，其次是類選擇符。如果想超越這三者之間的關(guān)系，可以用!important提升樣式表的優(yōu)先權(quán)，例如：p color: #FF0000!important .blue color: #0000FF#id1 color: #FFFF00我們同時對頁面中的一個段落加上這三種樣式，它最后會依照被!important申明的HTML標(biāo)記選擇符樣式為紅色文字。如果去掉!important，則依照優(yōu)先權(quán)最高的ID選擇符為黃色文字。 7. 注釋你可以在CSS中插入注釋來說明你代碼的意思，注釋有利于你或別人以后編輯和更改代碼時理解代碼的含義。在瀏覽器中，注釋是不顯示的。CSS注釋以/* 開頭，以*/ 結(jié)尾，如下：/* 定義段落樣式表 */ptext-align: center; /* 文本居中排列 */color: black; /* 文字為黑色 */font-family: arial /* 字體為arial */#1 三、 偽類動態(tài)鏈接偽類可以看作是一種特殊的類選擇符，是能被支持CSS的瀏覽器自動所識別的特殊選擇符。它的最大的用處就是可以對鏈接在不同狀態(tài)下定義不同的樣式效果。 1. 語法偽類的語法是在原有的語法里加上一個偽類（pseudo-class）：selector:pseudo-class property: value（選擇符:偽類 屬性: 值）偽類和類不同，是CSS已經(jīng)定義好的，不能象類選擇符一樣隨意用別的名字，根據(jù)上面的語法可以解釋為對象（選擇符）在某個特殊狀態(tài)下（偽類）的樣式。類選擇符及其他選擇符也同樣可以和偽類混用：selector.class:pseudo-class property: value（選擇符.類:偽類 屬性: 值） 2. 錨的偽類我們最常用的是4種a（錨）元素的偽類，它表示動態(tài)鏈接在4種不同的狀態(tài)：link、visited、active、hover（未訪問的鏈接、已訪問的鏈接、激活鏈接和鼠標(biāo)停留在鏈接上）。我們把它們分別定義不同的效果：a:link color: #FF0000; text-decoration: none /* 未訪問的鏈接 */a:visited color: #00FF00; text-decoration: none /* 已訪問的鏈接 */a:hover color: #FF00FF; text-decoration: underline /* 鼠標(biāo)在鏈接上 */a:active color: #0000FF; text-decoration: underline /* 激活鏈接 */（上面這個例子中，這個鏈接未訪問時的顏色是紅色并無下劃線，訪問后是綠色并無下劃線，激活鏈接時為藍(lán)色并有下劃線，鼠標(biāo)在鏈接上時為紫色并有下劃線）注意：有時這個鏈接訪問前鼠標(biāo)指向鏈接時有效果，而鏈接訪問后鼠標(biāo)再次指向鏈接時卻無效果了。這是因為你把a(bǔ):hover放在了a:visited的前面，這樣的話由于后面的優(yōu)先級高，當(dāng)訪問鏈接后就忽略了a:hover的效果。所以根據(jù)疊層順序，我們在定義這些鏈接樣式時，一定要按照a:link， a:visited， a:hover， a:actived的順序書寫。 3. 偽類和類選擇符將偽類和類組合起來用，就可以在同一個頁面中做幾組不同的鏈接效果了，例如，我們定義一組鏈接為紅色，訪問后為藍(lán)色；另一組為綠色，訪問后為黃色：a.red:link color: #FF0000a.red:visited color: #0000FFa.blue:link color: #00FF00a.blue:visited color: #FF00FF現(xiàn)在應(yīng)用在不同的鏈接上：這是第一組鏈接這是第二組鏈接 4. 其他偽類此外CSS2還定義了首字和首行（first-letter和first-line）的偽類，可以對元素的首字或首行設(shè)定不同的樣式。下面看這個例子，我們在段落標(biāo)記里定義文本首字尺寸為默認(rèn)大小的3倍：p:first-letter font-size: 300%這是一個段落，這個段落的首字被放大了。我們再定義一個首行樣式的例子：div:first-line color: red這是段落的第一行這是段落的第二行這是段落的第三行（上例中段落的第一行為紅色，第二、三行為默認(rèn)顏色）注意：首字和首行的偽類需要IE5.5以上的版本支持。#1 四、 如何在網(wǎng)頁中插入CSS前面我們講解了CSS的語法，但要想在瀏覽器中顯示出效果，就要讓瀏覽器識別并調(diào)用。當(dāng)瀏覽器讀取樣式表時，要依照文本格式來讀，這里介紹四種在頁面中插入樣式表的方法：鏈入外表樣式表、內(nèi)部樣式表、導(dǎo)入外表樣式表和內(nèi)嵌樣式。 1. 鏈入外部樣式表鏈入外部樣式表是把樣式表保存為一個樣式表文件，然后在頁面中用標(biāo)記鏈接到這個樣式表文件，這個標(biāo)記必須放到頁面的區(qū)內(nèi)，如下：上面這個例子表示瀏覽器從mystyle.css文件中以文檔格式讀出定義的樣式表。Rel=stylesheet是指在頁面中使用這個外部的樣式表。Type=text/css是指文件的類型是樣式表文本。Href=mystyle.css是文件所在的位置。一個外部樣式表文件可以應(yīng)用于多個頁面。當(dāng)你改變這個樣式表文件時，所有頁面的樣式都隨之而改變。在制作大量相同樣式頁面的網(wǎng)站時，非常有用，不僅減少了重復(fù)的工作量，而且有利于以后的修改、編輯，瀏覽時也減少了重復(fù)下載代碼。樣式表文件可以用任何文本編輯器（例如：記事本）打開并編輯，一般樣式表文件擴(kuò)展名為.css。內(nèi)容是定義的樣式表，不包含HTML標(biāo)記，mystyle.css這個文件的內(nèi)容如下：hr color: siennap margin-left: 20pxbody background-image: url（images/back40.gif）（定義水平線的顏色為土黃；段落左邊的空白邊距為20象素；頁面的背景圖片為images目錄下的back40.gif文件） 2. 內(nèi)部樣式表內(nèi)部樣式表是把樣式表放到頁面的區(qū)里，這些定義的樣式就應(yīng)用到頁面中了，樣式表是用標(biāo)記插入的，從下例中可以看出標(biāo)記的用法：hr color: siennap margin-left: 20pxbody background-image: url（images/back40.gif）注意：有些低版本的瀏覽器不能識別style標(biāo)記，這意味著低版本的瀏覽器會忽略style標(biāo)記里的內(nèi)容，并把style標(biāo)記里的內(nèi)容以文本方式直接顯示到頁面上。為了避免這樣的情況發(fā)生，我們用加HTML注釋的方式（）隱藏內(nèi)容而不讓它顯示： 3. 導(dǎo)入外部樣式表導(dǎo)入外部樣式表是指在內(nèi)部樣式表的里導(dǎo)入一個外部樣式表，導(dǎo)入時用import，看下面這個實例：上例中import “mystyle.css”表示導(dǎo)入mystyle.css樣式表，注意使用時外部樣式表的路徑。方法和鏈入樣式表的方法很相似，但導(dǎo)入外部樣式表輸入方式更有優(yōu)勢。實質(zhì)上它是相當(dāng)于存在內(nèi)部樣式表中的。注意：導(dǎo)入外部樣式表必須在樣式表的開始部分，在其他內(nèi)部樣式表上面。 4. 內(nèi)嵌樣式內(nèi)嵌樣式是混合在HTML標(biāo)記里使用的，用這種方法，可以很簡單的對某個元素單獨(dú)定義樣式。內(nèi)嵌樣式的使用是直接將在HTML標(biāo)記里加入style參數(shù)。而style參數(shù)的內(nèi)容就是CSS的屬性和值，如下例：這是一個段落（這個段落顏色為土黃，左邊距為20象素）在style參數(shù)后面的引號里的內(nèi)容相當(dāng)于在樣式表大括號里的內(nèi)容。注意：style參數(shù)可以應(yīng)用于任意BODY內(nèi)的元素（包括BODY本事），除了BASEFONT、PARAM和SCRIPT。 5. 多重樣式表的疊加上一章里我們已經(jīng)提到樣式表的層疊順序，這里我們討論插入樣式表的這幾種方法的疊加，如果在同一個選擇器上使用幾個不同的樣式表時，這個屬性值將會疊加幾個樣式表，遇到?jīng)_突的地方會以最后定義的為準(zhǔn)。例如，我們首先鏈入一個外部樣式表，其中定義了h3選擇符的color 、text-align和font-size屬性：h3 color: red;text-align: left;font-size: 8pt（標(biāo)題3的文字顏色為紅色；向左對齊；文字尺寸為8號字）然后在內(nèi)部樣式表里也定義了h3選擇符的text-align和font-size屬性：h3 text-align: right; font-size: 20pt（標(biāo)題3文字向右對齊；尺寸為20號字）那么這個頁面疊加后的樣式就是：color: red; text-align: right; font-size: 20pt（文字顏色為紅色；向右對齊；尺寸為20號字）字體顏色從外部樣式表里保留下來，而對齊方式和字體尺寸都有定義時，按照后定義的優(yōu)先而依照內(nèi)部樣式表。注意：依照后定義的優(yōu)先，所以優(yōu)先級最高的是內(nèi)嵌樣式，內(nèi)部樣式表高于導(dǎo)入外部樣式表，鏈入的外部樣式表和內(nèi)部樣式表之間是最后定義的優(yōu)先級高。#1 五、 用DW4創(chuàng)建CSS 1. CSS Styles面板通過前面幾章的學(xué)習(xí)，相信大家對CSS有了一定的了解，這一章我們來講解如何利用Dreamweaver4來創(chuàng)建CSS。首先運(yùn)行Dreamweaver4，啟動后，選擇菜單下的Windows-CSS Styles（或按Shitf+F11），系統(tǒng)彈出CSS Styles管理面板，如下圖所示：（60090409a）在CSS Styles面板里顯示了所有自定義的CSS樣式（也就是上面提到的以點開頭的類選擇符，Dreamweaver4把這樣以點開頭的類選擇符作為自定義樣式來使用），可以利用Apply按鈕這些CSS樣式隨意應(yīng)用在頁面中的文本或文檔區(qū)域。注意：應(yīng)用按鈕前面有一個復(fù)選框，選中的時候按鈕成灰色不可用，表示自動應(yīng)用，只要鼠標(biāo)單擊自定的CSS樣式就會自動應(yīng)用到頁面中當(dāng)前元素；如果復(fù)選框沒有選中，Apply按鈕為可用，應(yīng)用時需要點Apply按鈕。當(dāng)對象應(yīng)用了自定義樣式時，也就相當(dāng)于在當(dāng)前HTML標(biāo)記后加上class=。另外在樣式前有一個“S”型的符號（60090409b），表示內(nèi)部定義樣式；如果是符號（60090409c），表示這個樣式鏈接到外部樣式表文件。注意：CSS Styles面板只顯示自定義（class）CSS 樣式；重定義的HTML標(biāo)記和其他CSS選擇符樣式不會出現(xiàn)在CSS Styles面板上，這是因為它們可以自動應(yīng)用于那些HTML標(biāo)記控制的區(qū)域。（重定義HTML標(biāo)記是指選擇符為單個HTML標(biāo)記的CSS樣式，之所以叫重定義是因為重新定義并改變了原來HTML標(biāo)記的樣式。）在右下角有4個小按鈕，這是最常用的幾個命令： （60090409b）Attach Style Sheet：（鏈接到樣式表）點擊后會彈出一個選擇樣式表對話框，選中以前創(chuàng)建好的外部樣式表，點確定就鏈接加入了這個外部樣式表。加入外部樣式表時注意盡量使用相對路徑。 （60090409d）New Style：（新建樣式）一般我們通過這個按鈕來創(chuàng)建CSS樣式表。 （60090409e）Edit Style sheet：（編輯樣式表）點擊后會彈出編輯樣式表對話框，顯示了所有已存在的內(nèi)部和外部樣式表，可以在這個對話框里新建、編輯、刪除樣式。 （60090409f）Delete：（刪除樣式）先選中要刪除的自定義CSS樣式，然后點此按鈕，樣式就被刪除了。點右上方的小三角或單擊鼠標(biāo)右鍵會彈出一個菜單，菜單的功能依次為：Edit：（編輯）編輯你當(dāng)前選中的自定義CSS樣式，點擊后就進(jìn)入了編輯此項CSS類樣式的定義樣式對話框。Duplicate：（復(fù)制）將當(dāng)前選中的自定義CSS樣式類復(fù)制。Delete：（刪除）刪除當(dāng)前選中的自定義CSS樣式，和（60090409f）按鈕的效果相同。Apply：（應(yīng)用）是指將選中的CSS類應(yīng)用在頁面中當(dāng)