Css在dw4中的屬性

2020-03-24 16:50:12

字體：大中小

來源：轉載

供稿：網友

在Dreamweaver4的CSSyangshi_10628_1.html' target='_blank'>CSS樣式里包含了W3C規范定義的所有CSS1的屬性，Dreamweaver4把這些屬性分為Type（類型）、Background（背景）、Block（塊）、Box（盒子）、Border（邊框）、 List（列表）、Positioning（定位）、Extensions（擴展）八個部分，如下圖，下面我們分別詳細講解。
1. Type（類型）

Type面板主要是對文字的字體，大小，顏色，效果等基本樣式進行設置。設置時，我們只對要改變的屬性進行設置，沒有必要改變的屬性就空著。

注意：屬性名帶*號的是指樣式效果不能在編輯文檔時顯示，要用瀏覽器打開才能看到效果。
Font：設置字體系列。什么叫字體系列呢？是指對文字設定幾個字體，當遇到第一個字體不能顯示的文字時會自動用系列中的第二個字體或后面的字體顯示。相對應的CSS屬性是”font-family”。

注意：Dreamweaver4已經內置設定了6個系列的英文字體，一般英文字體我們用“Verdana, Arial, Helvetica, sans-serif”這個系列比較好看。如果不用這些字體系列，你就需要自己編輯字體系列，你可以通過下拉框最下面的“Edit Font List”來創建新的字體系列，也可以直接手動在下拉框里寫字體名，字體之間用逗號隔開。頁默認字體是宋體，一般就空著不要選取任何字體。

Size：定義文字的大小。你可以通過選取數字和度量單位來選擇具體的字體大小，或者你也可以選擇一個相對的字體大小。最好使用Pixels作為單位，這樣不會在瀏覽器中文本變形。一般小字體用比較標準的12px。相對應的CSS屬性是”font-size”。

注意：CSS中長度的單位分絕對長度單位和相對長度單位，一般我們常用的絕對長度單位有：

px：（象素）根據顯示器的分辨率來確定長度。

pt：（字號）根據windows系統定義的字號大小來確定長度。

mm、cn、in：（毫米、厘米、英寸）根據顯示的實際尺寸來確定長度。此類單位不隨顯示器的分辨率改變而改變。相對長度單位有：

em：當前文本的尺寸。例如：{ font-size:2em}是指文字大小為原來的2倍。

ex：當前字母“x”的高度，一般為字體尺寸的一半。

%：是以當前文本的百分比定義尺寸。例如：{ font-size:300%}是指文字大小為原來的3倍。

small、large：表示比當前小一個級別或大一個級別的尺寸。

Style：定義字體樣式為Normal、Italic、或者Oblique。Italic和Oblique是斜體字體。默認設置為 Normal。相對應的CSS屬性是”font-style”。

注意：Italic和Oblique都是斜體字體。而它們不同的是，Italic是斜體字，而Oblique是傾斜的文字，對于沒有斜體的字體應該用Oblique。

Line Height：設置文本所在行的行高。默認為Normal，你也可以自己鍵入一個精確的數值并選取一個計量單位。比較直觀的寫法用百分比，例如140%是指行高等于文字大小的1.4倍。相對應的CSS屬性是”line-height”。

Decoration：在文本中添加underline（下劃線）、overline（上劃線）、line-through（中劃線）、blink（閃爍效果）。這些效果可以同時存在，將效果前的復選框選定即可。相對應的CSS屬性是”text-decoration”。

注意：鏈接的默認設置是Underline，我們可以通過選none去除下劃線。Blink（閃爍效果）只在NC瀏覽器里可以看到。

Weight：給字體指定粗體字的磅值。Normal等同于400；Bold等同于700。設粗體字一般用bold。相對應的CSS屬性是”font-weight”。

Variant：允許你選取字體的變種，選small-caps（小型大寫字母）時，此樣式區域內所有字母大寫。相對應的CSS屬性是”font-variant”。

Case：將選區中每個單詞的第一個字母轉為大寫，或者令單詞全部大寫或全部小寫。參數：capitalize（單詞首字母大寫）、uppercase（轉換成大寫）、lowercase（轉換成小寫）、none（不轉換）。相對應的CSS屬性是” text-transform”。

Color：定義文字顏色。相對應的CSS屬性是” color”。

注意：CSS中顏色的值有三種表示方法：

l #RRGGBB格式，是由紅綠藍三種顏色的值組合，每種顏色的值為“00 – FF”的兩位十六進制正整數。例如：#FF0000表示紅色，#FFFF00表示黃色。

l rgb(R,G,B)格式，RGB為三色的值，取0~255，例如：rgb(255,0,0)表示紅色，rgb(255,255,0)表示黃色。

l 用顏色名稱。CSS可以使用已經定義好的顏色名稱。例如：red表示紅色，yellow表示黃色。

2. Background（背景）

Background面板主要是對元素的背景進行設置，包括背景顏色、背景圖象、背景圖象的控制。一般是對BODY（頁面）、TABLE（表格）、DIV（區域）的設置。

Background Color：設置元素的背景色。相對應的CSS屬性是”background-color”。

Background Image：設置元素的背景圖像。相對應的CSS屬性是”background-image”。

Repeat：確定背景圖像是否以及如何重復。No Repeat：在元素的開頭顯示一遍圖像。Repeat：在元素的背景部分水平和垂直方向平鋪圖像。Repeat-x and Repeat-y：分別在水平和垂直方向重復顯示，默認為Repeat。相對應的CSS屬性是”background-repeat”。

注意：如果定義的元素的BODY，可以控制頁面背景是否重復。 Attachment：固定背景圖像或者跟隨內容滾動。參數fixed表示固定背景，scroll表示跟隨內容滾動的背景。相對應的CSS屬性是”background-attachment”。
注意：如果定義的元素的BODY，可以使頁面背景固定。

Horizontal：指定背景圖像的水平位置?？梢灾付閘eft（左邊），center（居中），right（右邊）；也可以指定數值，如20px是指背景距離左邊20象素。相對應的CSS屬性是” background-position”。

Vertical：指定背景圖像的垂直位置。可以指定為top（頂部），center（居中），bottom（底部）；也可以指定數值。相對應的CSS屬性是” background-position”。

注意：水平位置和垂直位置使用的是同一個CSS屬性，在設置時要注意。

3. Block（區塊）

Block面板主要是設置對象文本的文字間距、對齊方式、上標、下標、排列方式、首行縮進等。

Word Spacing：設置單詞之間的間距。可以設置負值。相對應的CSS屬性是” word-spacing”。

注意：一般情況下IE不支持此屬性，僅在MAC平臺上的IE4+可用。

Letter Spacing：設置字符之間的間距。可以指定負值。因為中文也是字符，這個參數可以設置文字間的間距。相對應的CSS屬性是” letter-spacing”。

Vertical Align：指定元素的垂直對齊方式?？梢灾付╯ub（下標）、super（上標）、top（與頂端對齊）、middle（居中）、bottom（與底端對齊）……。相對應的CSS屬性是” vertical-align”。

Text Align：設置文本的排列方式。Left（左對齊）、right（右對齊）、center（居中）、justify（兩端對齊）。相對應的CSS屬性是”text-align”。

Text Indent：設置文本第一行的縮進值。負值用于將文本第一行向外拉。要在每段前空兩格，可設置為2em，因為em是當前字體尺寸，2em就是兩個字的大小。相對應的CSS屬性是”text-indent”。

Whitespace：設置如何處理元素內的空白符。有三個選項可選：Normal 會將空白符全部壓縮；Pre 則會如同處理 pre 標簽內的文本一樣處理這些空白符（也就是說，所有的空白符，包括空格，標簽，回車，等都會得以保留）；Nowrap 指定文本只有遇到 br 標簽時才換行。相對應的CSS屬性是”white-space”。

4. Box（盒子）

Box面板主要設置對象的邊界、間距、高度、寬度、和漂浮方式等。
Width：定義元素的寬。相對應的CSS屬性是”width”。

Height：定義元素的高。相對應的CSS屬性是”height”。

注意：寬和高定義的對象多為圖片，表格，層等。

Float：定義元素的漂浮方式。left 表示對象浮在左邊、right表示對象浮在右邊、none 表示對象不浮動。相對應的CSS屬性是”float”。

Clear：不允許元素的漂浮。left表示不允許左邊有浮動對象、right表示不允許右邊有浮動對象、none表示允許兩邊都可以有浮動對象、both不允許有浮動對象。相對應的CSS屬性是”clear”。

Padding：定義元素內容與其邊框的空距（如果元素沒有邊框就是指頁邊的空白）。可以分別設置top（上補白）、right（右補白）、bottom（下補白）、left（左補白）的值。相對應的CSS屬性分別是”padding; padding-top; padding-right; padding-bottom; padding-left”。

Margin：定義元素的邊框與其他元素之間的距離（如果沒有邊框就是指內容之間的距離）?？梢苑謩e設置top（上邊界）、right（右邊界）、bottom（下邊界）、left（左邊界）的值。相對應的CSS屬性分別是”margin; margin-top; margin-right; margin-bottom; margin-left”。

下面是補白、邊框、邊界之間的關系圖：

5. Border（邊框）

Border面板可以設置對象邊框的寬度、顏色及樣式。

Width：設置元素邊的寬度?？梢苑謩e設定Top（上邊寬）、Right（右邊寬）、Bottom（下邊寬）、Left（左邊寬）的值。相對應的CSS屬性分別是”border; border-top; border-right; border-bottom; border-left”。

Color：設置邊框的顏色。你可以分別對每條邊設置顏色。相對應的CSS屬性分別是”border-color; border-top-color; border-right-color; border-bottom-color; border-left-color”。

注意：我們可以通過設置不同的顏色做出亮邊和暗邊的效果，這樣元素看起來是立體的。

Style：設置邊框樣式?？梢栽O置為none（無邊框）、dotted（點線）、dashed（虛線）、solid（實線）、double（雙線）、groove（凹槽）、ridge（凸槽）、inset（凹邊）、outset（凸邊）等邊框樣式。相對應的CSS屬性是”border-style”。

注意：dotted（點線）、dashed（虛線）必須要IE5.5以上或者MAC平臺支持，否則效果為實線。

6. List（列表）
List面板可以設置列表項樣式、列表項圖片、和位置。
Type：設置列表項所使用的預設標記。可以設置的樣式有：disc（實心圓）、circle（空心圓）、square（方塊）、decimal（阿拉伯數字）、lower-roman（小寫羅馬數字）、upper-roman（大寫羅馬數字）、lower-alpha（小寫英文字母）、upper-alpha（大寫英文字母）、none（無項目符號）。相對應的CSS屬性是”list-style-type”。

Bullet Image：設置列表項的圖像。值為圖象的URL地址或路徑。相對應的CSS屬性是”list-style-image”。

Position：設置列表項在文本內還是在文本外。Inside：列表項目標記放置在文本以內，Outside：列表項目標記放置在文本以外。相對應的CSS屬性是”list-style-position”。

7. Positioning（定位）

Positioning面板就相當于對象放在一個層里來定位，它相當于HTML的DIV標記。你可以把定義看作為一個CSS定義的層。

Type：設定對象的定位方式。有三種方式：Absolute（絕對定位）、Relative（相對定位）、Static（無特殊定位）。相對應的CSS屬性是”position”。
Visibility：設定對象定位層的最初顯示狀態。有三種狀態：Inherit（繼承父層的顯示屬性）、Visible（對象可視）、Hidden隱藏對象。相對應的CSS屬性是”visibility”。

Z-Index：設置對象的層疊順序。編號較大的層會顯示在編號較小的層上邊。變量值可以是正值也可以是負值。相對應的CSS屬性是”z-index”。

Overflow：設置如果層的內容超出了層的大小時如何處理。有四種處理方式：visible，增加層的大小，從而將層的所有內容顯示出來；hidden，保持層的大小不變，將超出層的內容剪裁掉；Scroll，總是顯示滾動條；Auto，只有在內容超出層的邊界時才顯示滾動條。相對應的CSS屬性是”overflow”。

Placement：設置對象定位層的位置和大小?？梢苑謩e設置left（左邊定位）、top（頂部定位）、width（寬）、height（高）。相對應的CSS屬性分別是”left; top; width; height”。

Clip：定義定位層的可視區域。區域外的部分為不可視區，為透明的。可以理解為在定位層上放一個矩形遮罩的效果。相對應的CSS屬性是”clip”。

注意：此參數只要在絕對定位時有效。

注意：當Type里設定了絕對定位后，會為對象加上一個絕對定位的層。這個CSS創建的層同一般的層一樣有屬性面板，也顯示在層管理面板中。你可以通過設置這個定位層的屬性面板修改上述參數，不過在此屬性面板里改動的值會作為內嵌樣式加在對象標記后面，下圖是定位層的屬性面板：

8.Extensions（擴展）
Pagebreak：在打印的時候強迫在樣式控制的對象前后換頁。

Before：設置對象前出現的頁分割符。設置為always時，始終在對象之前插入頁分割符。相對應的CSS屬性是”page-break-before”。

After：設置對象后出現的頁分割符。設置為always時，始終在對象之后插入頁分割符。相對應的CSS屬性是” 。

注意：以上IE5僅支持always值和空白值（null）。

Cursor：當鼠標滑過樣式控制的對象時改變鼠標形狀?？梢栽O置為hand（手型）、crosshair（“十”型）、text （“I”型）、wait（等待）、default（默認）、help（幫助）、e-resize（東箭頭）、ne-resize（東北箭頭）、n-resize（北箭頭）、nw-resize（西北箭頭）、w-resize（西箭頭）、sw-resize（西南箭頭）、s-resize（南箭頭）、se-resize（東南箭頭）和auto（自動）。

Filter：在樣式中加上濾鏡特效。由于此屬性內容比較多，我們將到下一章單獨對濾鏡介紹。

二、濾鏡

CSS提供了一些內置的多媒體濾鏡特效，使用這種技術可以把可視化的濾鏡和轉換效果添加到一個標準的HTML元素上，例如圖片、文本容器、以及其他一些對象。Dreamweaver4提供了16種濾鏡可供選擇，如下圖：

下面，我們就來看看在Dreamweaver4里如何方便的使用這些CSS濾鏡。

建立一個自定義樣式“.filter”，在Filter下拉框里選Alpha濾鏡，我們將“Alpha(Opacity=?, FinishOpacity=?, >
按OK后就建立了一個“.filter”的自定義樣式，我們把這個樣式應用到圖片上，圖片就是半透明的了。如果把這個樣式應用到表格上，表格也變成了半透明狀態了。注意所有濾鏡效果都要在瀏覽器里才能看到。下面是原碼： style type="text/css"

!--

.filter { filter: Alpha(Opacity=50)}

--

/style

注意：這個例子我們沒有用到后面的幾項參數，只用到Opacity參數，所以將其他參數刪掉。

下面我們來講解每個濾鏡的效果和參數：

1. Alpha：設置透明度

Alpha(Opacity=?, FinishOpacity=?, >
Opacity：透明度級別，范圍是0-100，0代表完全透明，100代表完全不透明。

FinishOpacity：設置漸變的透明效果時，用來指定結束時的透明度，范圍也是0 到 100。

Style：設置漸變透明的樣式，值為0代表統一形狀、1代表線形、2代表放射狀、3代表長方形。

StartX和StartY：代表漸變透明效果的開始X和Y坐標。

FinishX和FinishY：代表漸變透明效果結束X和Y 的坐標。

2. BlendTrans：圖像之間的淡入和淡出的效果

BlendTrans(Duration=?)

Duration：淡入或淡出的時間。

注意：這個濾鏡必須配合JS建立圖片序列，才能做出圖片間效果。

3. Blru：建立模糊效果

Blur(Add=?, Direction=?, Strength=?)

Add：是否單方向模糊，此參數是一個布爾值，true（非0）或false（0）。

Direction：設置模糊的方向，其中0度代表垂直向上，然后每45度為一個單位。

Strength：代表模糊的象素值。

4. Chroma：把指定的顏色設置為透明

Chroma(Color=?)

Color：是指要設置為透明的顏色。

5. DropShadow：建立陰影效果

DropShadow(Color=?, OffX=?, OffY=?, Positive=?)

Color：指定陰影的顏色。

OffX：指定陰影相對于元素在水平方向偏移量，整數。

OffY：指定陰影相對于元素在垂直方向偏移量，整數。

Positive：是一個布爾值，值為true（非0）時，表示為建立外陰影；為false(0)，表示為建立內陰影。

6. FlipH：將元素水平反轉

7. FlipV：將元素垂直反轉

8. Glow：建立外發光效效果

Glow(Color=?, Strength=?)

Color：是指定發光的顏色。

Strength：光的強度，可以是1到255之間的任何整數，數字越大，發光的范圍就越大。

9. Gray：去掉圖像的色彩，顯示為黑白圖象

10. Invert：反轉圖象的顏色，產生類似底片的效果

11. Light：放置光源的效果，可以用來模擬光源在物體上的投影效果

注意：此效果需要用JS設置光的位置和強度。

12. Mask：建立透明遮罩

Mask(Color=?)

Color：設置底色，讓對象遮住底色的部分透明。

13. RevealTrans：建立切換效果

RevealTrans(Duration=?, Transition=?)

Duration：是切換時間，以秒為單位。

Transtition：是切換方式，可設置為從0到23。

p 注意：如果做頁面間的切換效果，可以在 head 區加上一行代碼： Meta http-equiv=Page-entercontent=revealTrans(Transition=?,Duration=?) 。如果用在頁面里的元素必須配合JS使用。

14. Shadow：建立另一種陰影效果

Shadow(Color=?, Direction=?)

Color：是指陰影的顏色。

Direction：是設置投影的方向，0度代表垂直向上，然后每45度為一個單位。

15. Wave：波紋效果

Wave(Add=?, Freq=?, LightStrength=?, Phase=?, Strength=?)

Add：表示是否顯示原對象，0表示不顯示，非0表示要顯示原對象。

Freq：設置波動的個數。

LightStrength：設置波浪效果的光照強度，從0到100。0表示最弱，100表示最強。

Phase：波浪的起始相角。從0到100的百分數值。（例如：25相當于90度，而50相當于180度。）

Strength：設置波浪搖擺的幅度。

16. Xray：顯現圖片的輪廓，X光片效果

注意：在使用CSS濾鏡時，必須使用在有區域的元素，比如表格，圖片等。而文本，段落這樣沒有區域的元素不能使用CSS濾鏡，對這樣的元素我們可以設置元素的Height和Width樣式或坐標來實現。

看下面這個例子，我們對一行文字做陰影效果（dropshadow），新建自定義樣式.shadow，在filter下拉框里選擇“DropShadow(Color=?, OffX=?, OffY= ?,Positive=?)”，我們設置為“DropShadow(Color=999999, OffX=2, OffY=2, Positive=1)”。然后把定義好的樣式應用在頁面中，我們發現在表格里的文字有了陰影，而段落里的文字卻沒有陰影。點CSS Styles面板里的編輯樣式表按鈕，給樣式加上Hight屬性：

為了不影響原來對象的高度，我們設置的高度不能超過字體本身的高度。OK后，在瀏覽器中可以看到段落里的文字也有陰影了。

CSS語法
二、語法

1. 基本語法

CSS的定義是由三個部分構成：選擇符（selector），屬性（properties）和屬性的取值（value）。
基本格式如下：
selector {property: value}
（選擇符 {屬性：值}）
選擇符是可以是多種形式，一般是你要定義樣式的HTML標記，例如BODY、P、TABLE……，你可以通過此方法定義它的屬性和值，屬性和值要用冒號隔開：
body {color: black}
選擇符body是指頁面主體部分，color是控制文字顏色的屬性，black是顏色的值，此例的效果是使頁面中的文字為黑色。

如果屬性的值是多個單詞組成，必須在值上加引號，比如字體的名稱經常是幾個單詞的組合：
p {font-family: "sans serif"}
（定義段落字體為sans serif）

如果需要對一個選擇符指定多個屬性時，我們使用分號將所有的屬性和值分開：
p {text-align: center; color: red}
（段落居中排列；并且段落中的文字為紅色）

為了使你定義的樣式表方便閱讀，你可以采用分行的書寫格式：
p
{
text-align: center;
color: black;
font-family: arial
}
（段落排列居中，段落中文字為黑色，字體是arial）

2. 選擇符組

你可以把相同屬性和值的選擇符組合起來書寫，用逗號將選擇符分開，這樣可以減少樣式重復定義：
h1, h2, h3, h4, h5, h6 { color: green }
（這個組里包括所有的標題元素，每個標題元素的文字都為綠色）
p, table{ font-size: 9pt }
（段落和表格里的文字尺寸為9號字）
效果完全等效于：
p { font-size: 9pt }
table { font-size: 9pt }

3. 類選擇符

用類選擇符你能夠把相同的元素分類定義不同的樣式，定義類選擇符時，在自定類的名稱前面加一個點號。假如你想要兩個不同的段落，一個段落向右對齊，一個段落居中，你可以先定義兩個類：
p.right {text-align: right}
p.center {text-align: center}
然后用不在不同的段落里，只要在HTML標記里加入你定義的class參數：
p
這個段落向右對齊的
/p
p
這個段落是居中排列的
/p
注意：類的名稱可以是任意英文單詞或以英文開頭與數字的組合，一般以其功能和效果簡要命名。

類選擇符還有一種用法，在選擇符中省略HTML標記名，這樣可以把幾個不同的元素定義成相同的樣式：
.center {text-align: center}
（定義.center的類選擇符為文字居中排列）
這樣的類可以被應用到任何元素上。下面我們使h1元素（標題1）和p元素（段落）都歸為“center”類，這使兩個元素的樣式都跟隨“.center”這個類選擇符：
h1
這個標題是居中排列的
/h1
p
這個段落也是居中排列的
/p
注意：這種省略HTML標記的類選擇符是我們經后最常用的CSS方法，使用這種方法，我們可以很方便的在任意元素上套用預先定義好的類樣式。

4. ID選擇符

在HTML頁面中ID參數指定了某個單一元素，ID選擇符是用來對這個單一元素定義單獨的樣式。
ID選擇符的應用和類選擇符類似，只要把CLASS換成ID即可。將上例中類用ID替代：
p id="intro"
這個段落向右對齊
/p
定義ID選擇符要在ID名稱前加上一個“#”號。和類選擇符相同，定義ID選擇符的屬性也有兩種方法。下面這個例子，ID屬性將匹配所有id="intro"的元素：
#intro
{
font-size:110%;
font-weight:bold;
color:#0000ff;
background-color:transparent
}
（字體尺寸為默認尺寸的110%；粗體；藍色；背景顏色透明）
下面這個例子，ID屬性只匹配id="intro"的段落元素：
p#intro
{
font-size:110%;
font-weight:bold;
color:#0000ff;
background-color:transparent
}
注意：ID選擇符局限性很大，只能單獨定義某個元素的樣式，一般只在特殊情況下使用。

5. 包含選擇符

可以單獨對某種元素包含關系定義的樣式表，元素1里包含元素2，這種方式只對在元素1里的元素2定義，對單獨的元素1或元素2無定義，例如：

table a
{
font-size: 12px
}
在表格內的鏈接改變了樣式，文字大小為12象素，而表格外的鏈接的文字仍為默認大小。

6. 樣式表的層疊性

層疊性就是繼承性，樣式表的繼承規則是外部的元素樣式會保留下來繼承給這個元素所包含的其他元素。事實上，所有在元素中嵌套的元素都會繼承外層元素指定的屬性值，有時會把很多層嵌套的樣式疊加在一起，除非另外更改。例如在DIV標記中嵌套P標記：
div { color: red; font-size:9pt}
……
div
p
這個段落的文字為紅色9號字
/p
/div
（P元素里的內容會繼承DIV定義的屬性）
注意：有些情況下內部選擇符不繼承周圍選擇符的值，但理論上這些都是特殊的。例如，上邊界屬性值是不會繼承的，直覺上，一個段落不會同文檔BODY一樣的上邊界值。

另外，當樣式表繼承遇到沖突時，總是以最后定義的樣式為準。如果上例中定義了P的顏色：
div { color: red; font-size:9pt}
p {color: blue}
……
div
p
這個段落的文字為藍色9號字
/p
/div
我們可以看到段落里的文字大小為9號字是繼承div屬性的，而color屬性則依照最后定義的。

不同的選擇符定義相同的元素時，要考慮到不同的選擇符之間的優先級。ID選擇符，類選擇符和HTML標記選擇符，因為ID選擇符是最后加上元素上的，所以優先級最高，其次是類選擇符。如果想超越這三者之間的關系，可以用!important提升樣式表的優先權，例如：
p { color: #FF0000!important }
.blue { color: #0000FF}
#id1 { color: #FFFF00}
我們同時對頁面中的一個段落加上這三種樣式，它最后會依照被!important申明的HTML標記選擇符樣式為紅色文字。如果去掉!important，則依照優先權最高的ID選擇符為黃色文字。

7. 注釋

你可以在CSS中插入注釋來說明你代碼的意思，注釋有利于你或別人以后編輯和更改代碼時理解代碼的含義。在瀏覽器中，注釋是不顯示的。CSS注釋以"/*" 開頭，以"*/" 結尾，如下：
/* 定義段落樣式表 */
p
{
text-align: center; /* 文本居中排列 */
color: black; /* 文字為黑色 */
font-family: arial /* 字體為arial */
}

CSS偽類——動態鏈接
偽類——動態鏈接

偽類可以看做是一種特殊的類選擇符，是能被支持CSS的瀏覽器自動所識別的特殊選擇符。它的最大的用處就是可以對鏈接在不同狀態下定義不同的樣式效果。

1. 語法

偽類的語法是在原有的語法里加上一個偽類（pseudo-class）：
selector:pseudo-class {property: value}
（選擇符:偽類 {屬性: 值}）
偽類和類不同，是CSS已經定義好的，不能象類選擇符一樣隨意用別的名字，根據上面的語法可以解釋為對象（選擇符）在某個特殊狀態下（偽類）的樣式。

類選擇符及其他選擇符也同樣可以和偽類混用：
selector.class:pseudo-class {property: value}
（選擇符.類:偽類 {屬性: 值}）

2. 錨的偽類

我們最常用的是4種a（錨）元素的偽類，它表示動態鏈接在4種不同的狀態：link、visited、active、hover（未訪問的鏈接、已訪問的鏈接、激活鏈接和鼠標停留在鏈接上）。我們把它們分別定義不同的效果：
a:link {color: #FF0000; text-decoration: none} /* 未訪問的鏈接 */
a:visited {color: #00FF00; text-decoration: none} /* 已訪問的鏈接 */
a:hover {color: #FF00FF; text-decoration: underline} /* 鼠標在鏈接上 */
a:active {color: #0000FF; text-decoration: underline} /* 激活鏈接 */
（上面這個例子中，這個鏈接未訪問時的顏色是紅色并無下劃線，訪問后是綠色并無下劃線，激活鏈接時為藍色并有下劃線，鼠標在鏈接上時為紫色并有下劃線）
注意：有時這個鏈接訪問前鼠標指向鏈接時有效果，而鏈接訪問后鼠標再次指向鏈接時卻無效果了。這是因為你把a:hover放在了a:visited的前面，這樣的話由于后面的優先級高，當訪問鏈接后就忽略了a:hover的效果。所以根據疊層順序，我們在定義這些鏈接樣式時，一定要按照a:link， a:visited， a:hover， a:actived的順序書寫。
3. 偽類和類選擇符

將偽類和類組合起來用，就可以在同一個頁面中做幾組不同的鏈接效果了，例如，我們定義一組鏈接為紅色，訪問后為藍色；另一組為綠色，訪問后為黃色：
a.red:link {color: #FF0000}
a.red:visited {color: #0000FF}
a.blue:link {color: #00FF00}
a.blue:visited {color: #FF00FF}
現在應用在不同的鏈接上：
a href="..." 這是第一組鏈接 /a
a href="..." 這是第二組鏈接 /a

4. 其他偽類

此外CSS2還定義了首字和首行（first-letter和first-line）的偽類，可以對元素的首字或首行設定不同的樣式。
下面看這個例子，我們在段落標記里定義文本首字尺寸為默認大小的3倍：
style type=”text/css”
p:first-letter {font-size: 300%}
/style
……
p
這是一個段落，這個段落的首字被放大了。
/p

我們再定義一個首行樣式的例子：
style type=”text/css”
div:first-line {color: red}
/style
……
div
p
這是段落的第一行
這是段落的第二行
這是段落的第三行
/p
/div
（上例中段落的第一行為紅色，第二、三行為默認顏色）

注意：首字和首行的偽類需要IE5.5以上的版本支持。

如何在網頁中插入CSS
前兩章我們了解了CSS的語法，但要想在瀏覽器中顯示出效果，就要讓瀏覽器識別并調用。當瀏覽器讀取樣式表時，要依照文本格式來讀，這里介紹四種在頁面中插入樣式表的方法：鏈入外部樣式表、內部樣式表、導入外表樣式表和內嵌樣式。

鏈入外部樣式表

鏈入外部樣式表是把樣式表保存為一個樣式表文件，然后在頁面中用 link 標記鏈接到這個樣式表文件，這個 link 標記必須放到頁面的 head 區內，如下：
head
……
link rel="stylesheet" type="text/css" href="mystyle.css"
……
/head br 上面這個例子表示瀏覽器從mystyle.css文件中以文檔格式讀出定義的樣式表。rel=”stylesheet”是指在頁面中使用這個外部的樣式表。type=”text/css”是指文件的類型是樣式表文本。href=”mystyle.css”是文件所在的位置。

一個外部樣式表文件可以應用于多個頁面。當你改變這個樣式表文件時，所有頁面的樣式都隨之而改變。在制作大量相同樣式頁面的網站時，非常有用，不僅減少了重復的工作量，而且有利于以后的修改、編輯，瀏覽時也減少了重復下載代碼。

樣式表文件可以用任何文本編輯器（例如：記事本）打開并編輯，一般樣式表文件擴展名為.css。內容是定義的樣式表，不包含HTML標記，mystyle.css這個文件的內容如下：
hr {color: sienna}
p {margin-left: 20px}
body {background-image: url("images/back40.gif")}
（定義水平線的顏色為土黃；段落左邊的空白邊距為20象素；頁面的背景圖片為images目錄下的back40.gif文件）

內部樣式表

內部樣式表是把樣式表放到頁面的 head 區里，這些定義的樣式就應用到頁面中了，樣式表是用 style 標記插入的，從下例中可以看出 style 標記的用法：
head
……
style type="text/css"
hr {color: sienna}
p {margin-left: 20px}
body {background-image: url("images/back40.gif")}
/style
……
/head
注意：有些低版本的瀏覽器不能識別style標記，這意味著低版本的瀏覽器會忽略style標記里的內容，并把style標記里的內容以文本直接顯示到頁面上。為了避免這樣的情況發生，我們用加HTML注釋的方式（ !-- 注釋 -- ）隱藏內容而不讓它顯示：
head
……
style type="text/css"
!--
hr {color: sienna}
p {margin-left: 20px}
body {background-image: url("images/back40.gif")}
--
/style
……
/head

導入外部樣式表

導入外部樣式表是指在內部樣式表的 style 里導入一個外部樣式表，導入時用@import，看下面這個實例：
head
……
style type=”text/css”
!--
@import “mystyle.css”
其他樣式表的聲明
--
/style
……
/head
例中@import “mystyle.css”表示導入mystyle.css樣式表，注意使用時外部樣式表的路徑。方法和鏈入樣式表的方法很相似，但導入外部樣式表輸入方式更有優勢。實質上它相當于存在內部樣式表中的。
注意：導入外部樣式表必須在樣式表的開始部分，在其他內部樣式表上面。

內嵌樣式

內嵌樣式是混合在HTML標記里使用的，用這種方法，可以很簡單的對某個元素單獨定義樣式。內嵌樣式的使用是直接將在HTML標記里加入style參數。而style參數的內容就是CSS的屬性和值，如下例：
p
這是一個段落
/p
（這個段落顏色為土黃，左邊距為20象素）
在style參數后面的引號里的內容相當于在樣式表大括號里的內容。
注意：style參數可以應用于任意BODY內的元素（包括BODY本事），除了BASEFONT、PARAM和SCRIPT。

多重樣式表的疊加

上一章里我們已經提到樣式表的層疊順序，這里我們討論插入樣式表的這幾種方法的疊加，如果在同一個選擇器上使用幾個不同的樣式表時，這個屬性值將會疊加幾個樣式表，遇到沖突的地方會以最后定義的為準。例如，我們首先鏈入一個外部樣式表，其中定義了h3選擇符的color 、text-alig和font-size屬性：
h3
{
color: red;
text-align: left;
font-size: 8pt
}
（標題3的文字顏色為紅色；向左對齊；文字尺寸為8號字）
然后在內部樣式表里也定義了h3選擇符的text-align和font-size屬性：
h3
{
text-align: right;
font-size: 20pt
}
（標題3文字向右對齊；尺寸為20號字）
那么這個頁面疊加后的樣式就是：
color: red;
text-align: right;
font-size: 20pt
（文字顏色為紅色；向右對齊；尺寸為20號字）
字體顏色從外部樣式表里保留下來，而對齊方式和字體尺寸都有定義時，按照后定義的優先而依照內部樣式表。
注意：依照后定義的優先，所以優先級最高的是內嵌樣式，內部樣式表高于導入外部樣式表，鏈入的外部樣式表和內部樣式表之間是最后定義的優先級高。

如何用DW4創建CSS
1. CSS Styles面板

通過前面幾章的學習，相信大家對CSS有了一定的了解，這一章我們來講解如何利用Dreamweaver4來創建CSS。首先運行Dreamweaver4，啟動后，選擇菜單下的Windows- CSS Styles（或按Shitf+F11），系統彈出CSS Styles管理面板，如下圖所示：在CSS Styles面板里顯示了所有自定義的CSS樣式（也就是上面提到的以點開頭的類選擇符，Dreamweaver4把這樣以點開頭的類選擇符作為自定義樣式來使用），可以利用Apply按鈕這些CSS樣式隨意應用在頁面中的文本或文檔區域。

注意：應用按鈕前面有一個復選框，選中的時候按鈕成灰色不可用，表示自動應用，只要鼠標單擊自定的CSS樣式就會自動應用到頁面中當前元素；如果復選框沒有選中，Apply按鈕為可用，應用時需要點Apply按鈕。當對象應用了自定義樣式時，也就相當于在當前HTML標記后加上 >
注意：CSS Styles面板只顯示自定義（class）CSS 樣式；重定義的HTML標記和其他CSS選擇符樣式不會出現在CSS Styles面板上，這是因為它們可以自動應用于那些HTML標記控制的區域。（重定義HTML標記是指選擇符為單個HTML標記的CSS樣式，之所以叫重定義是因為重新定義了并改變原來HTML標記的樣式。）

在右下角有4個小按鈕，這是最常用的幾個命令：

Attach Style Sheet：（鏈接到樣式表）點擊后會彈出一個選擇樣式表對話框，選中以前創建好的外部樣式表，點確定就鏈接加入了這個外部樣式表。加入外部樣式表時注意盡量使用相對路徑。 New Style：（新建樣式）一般我們通過這個按鈕來創建CSS樣式表。

Edit Style sheet：（編輯樣式表）點擊后會彈出編輯樣式表對話框，顯示了所有已存在的內部和外部樣式表，可以在這個對話框里新建、編輯、刪除樣式。

Delete：（刪除樣式）先選中要刪除的自定義CSS樣式，然后點此按鈕，樣式就被刪除了。

點上面的小三角或點擊鼠標右鍵會彈出一個菜單，菜單的功能依次為：

Edit：（編輯）編輯你當前選中的自定義CSS樣式，點擊后就進入了編輯此項CSS類樣式的定義樣式對話框。 Duplicate：（復制）將當前選中的自定義CSS樣式類復制。

Delete：（刪除）刪除當前選中的自定義CSS樣式，和按鈕的效果相同。

Apply：（應用）是指將選中的CSS類應用在頁面中當前元素。同Apply按鈕。

New Style：（新建樣式）等同于按鈕。

Edit Style sheet：（編輯樣式表）等同于按鈕。

Attach Style Sheet：（鏈接到外部樣式表）等同于按鈕。

Export Style Sheet：（導出樣式表）將此頁面中的內部樣式表導出為一個外部樣式表文件。注意：Dreamweaver4導出樣式表除了用這個方法外，還可以用主菜單下的File- Export- Export CSS Styles導出。

2. 創建樣式表的類型

在創建樣式表之前我們首先介紹一下Dreamweaver4的三種樣式表類型，點擊CSS Styles面板中的按鈕（或CSS Styles面板菜單New Style），彈出新建樣式對話框，如下圖：

在Define里可以選擇是外部樣式表，還是內部樣式表：

l 選擇New Style Sheet File（新建樣式表文件），系統會先讓你保存這個樣式表文件，然后定義這個樣式表文件。整個頁面的樣式就會跟隨你建立的這個樣式表文件，然后你可以把這個外部樣式表文件鏈接到別的頁面去，這樣就可以使一個樣式表文件控制多個頁面了。

l 如果你選擇This Document Only（只存在這個文檔），你就建立了一個內部樣式表，Dreamweaver4會自動把你建立的樣式表內容放到 head 區的 style 標記里。
在Type里有三種樣式表類型可供選擇：

l Make Custon Style (class) ：（創建自定義樣式）自定義一個樣式，可以作為class屬性應用于頁面中。

l Redefine HTML Tag：（重定義HTML標記）對指定的 HTML 標記的默認格式進行重新定義。

l Use CSS Selector：（使用CSS選擇符）對特定的標簽組合，或者包含有指定ID屬性的所有標簽進行格式定義。

在定義CSS前，我們先要考慮清楚，定義的這個樣式將用在哪里？要完成哪些效果？是定義在一個頁面里還是控制多個頁面的風格？然后根據需求來定義合適的樣式表。

3. 創建自定義樣式

在頁面中，我們有時想讓一些重要的文字或內容醒目，我們就需要把這些重要的文字或內容單獨定義一個樣式，來區別一般文字，我們可以通過創建自定義樣式單獨對重要內容定義CSS來完成。假設，我們要求把重要文字和內容的顏色定義成紅色、并加粗來達到醒目的目的。

單擊新建樣式，彈出新建對話框，在新建樣式對話框里，樣式表類型選Make Custon Style (class)，這里我們建立內部樣式表，選This Document Only，然后在上面的Name下拉框里輸入你定義的樣式名稱，我們輸入“.emphases”按OK，如下圖：

注意：自定義樣式的名稱可以自己隨意設定，一般根據其樣式效果命名。在名稱前必須有點號，如果漏寫，系統也會自動幫你補上。

彈出樣式定義對話框，在Category（類別）里選Type，然后設置顏色為紅色，Weight為bold，按OK，如圖：

然后在CSS Styles面板里多了一個名為emphases的自定義樣式，這樣一個新的樣式我們就定義好了：

我們來看一下原代碼部分，我們可以看到在 head 區多了下列樣式表代碼：

style type="text/css"

!--

.emphases { font-weight: bold; color: #FF0000}

--

/style

定義好了樣式，現在我們就可以把這個自定義樣式套用在需要的地方，在網頁中選中文字，然后單擊樣式面板中的emphases樣式。看看，是不是你要的效果。

注意：如果我們選中的內容是一個表格或一個段落，那么整個表格或段落內的文字被定義了emphases樣式，從原代碼里我們可以看出是在 TABLE 或 P 標記后面加了 >
TABLE >
……

或

P >
……

當我們把樣式加在選中的幾個文字上時，文字本身沒有HTML標記所包圍，就會自動加上 span 標記，例如：

…… span >
注意：span標記本身沒有任何意義，它專門為樣式表指定選取范圍，為樣式表指定區域的還有div。

4. 創建重定義樣式表

重定義樣式表是對某個HTML標記重新定義格式。例如，我們想重新格式化頁面的段落，每個段落前空兩格，并設定段落文字的大小和行距。

單擊新建樣式，彈出新建對話框，在新建樣式對話框里，樣式表類型選擇Redefine HTML Tag，我們仍然建立內部樣式表，選This Document Only。當樣式表類型選擇Redefine HTML Tag時，上面下拉框的名字Name變成了Tag，表示輸入的內容是HTML標記，點擊下拉按鈕，我們可以看到所有HTML標記都在Tag下拉框里，這里我們選段落標記P：

按OK后，進入樣式定義對話框，在Type里，我們設定字體大小為12象素，行距為文字尺寸的150%，如下圖：

在Block部分里，我們設定文本縮進，因為文字尺寸為12象素，所以兩個字的空格就是24象素：

按OK后，這個重定義樣式就完成了。這時頁面里每個段落的文字大小都是12象素，行距是150%，但是在Dreamweaver編輯器里我們看不到縮進的效果，不要緊，只要將文件保存，然后用瀏覽器打開就可以看到效果了。此時CSS樣式表的原代碼是：

style type="text/css"

!--

.emphases { font-weight: bold; color: #FF0000}

p { font-size: 12px; line-height: 150%; text-indent: 24px}

--

/style

5. 創建動態鏈接樣式表

下面我們來創建一組鏈接在不同狀態下的樣式。單擊新建樣式，彈出新建對話框，在新建樣式對話框里，樣式表類型選Use CSS Selector，我們仍然建立內部樣式表，選This Document Only。當樣式表類型選擇Use CSS Selector時，上面下拉框的名字變成了Selector，表示輸入內容為CSS選擇符，單擊下拉按鈕，可以看到動態鏈接的4種狀態：
l a:active 選中超級鏈接狀態

l a:hover 光標移上超級鏈接狀態

l a:link 超級鏈接的正常狀態，沒有任何動作的時候

l a:visited 訪問過的超級鏈接狀態

接下來我們對這幾種狀態分別設定，首先，選擇a:link，OK后彈出樣式定義對話框，我們設定無下劃線，顏色為橙色，如下圖：

用同樣的方法設定a:visited，設定無下劃線，黃色，如下圖：
接下來設定a:hover，有下劃線和上劃線，顏色為橙色，并在Background設定背景為黃色：
這里我們不對a:active進行設置，根據層疊規則a:active的樣式會自動依照a:hover。這樣所有動態鏈接的效果我們就設置好了，注意設置時的順序。在瀏覽器中就我們就可以看到：此頁面上未訪問的鏈接無下劃線，橙色；訪問后的鏈接無下劃線，黃色；鼠標指向鏈接時有上、下劃線，橙色，并背景為黃色。樣式表原代碼為：

style type="text/css"

!--

.emphases { font-weight: bold; color: #FF0000}

p { font-size: 12px; line-height: 150%; text-indent: 24px}

a:link { color: #FF9900; text-decoration: none}

a:visited { color: #FFFF00; text-decoration: none}

a:hover { color: #FF9900; text-decoration: underline overline; background-color: #FFFF00}

--

/style

這樣定義動態鏈接時，整個頁面的鏈接效果都會改變，如果我想在一個頁面中定義兩組以上的鏈接效果，該怎么做呢？在第四章里我們不是說過的類和偽類的混用可以在同一個頁面中做不同的鏈接效果嗎。點擊新建樣式，在選擇符下拉框里，我們輸入a.link2:link（當然可以先選擇a:link，然后更改），如下圖：

這樣我們就新建立了一個.link2類，我們為a.link2:link設定樣式，紅色，有下劃線：
根據上面的方法我們繼續定義a.link2:visited和a.link2:hover，我們定義a.link2:visited為紅色有下劃線，a.link2:hover為紅色無下劃線，背景為白色。在CSS Styles面板里多了一個名稱為link2的自定義樣式。然后將此樣式應用在某個動態鏈接上。保存后，用瀏覽器打開，我們可以看到兩個完全不同的鏈接樣式。全部CSS代碼如下：

style type="text/css"

!--

.emphases { font-weight: bold; color: #FF0000}

p { font-size: 12px; line-height: 150%; text-indent: 24px}

a:link { color: #FF9900; text-decoration: none}

a:visited { color: #FFFF00; text-decoration: none}

a:hover { color: #FF9900; text-decoration: underline overline; background-color: #FFFF00}

a.link2:link { color: #FF0000; text-decoration: underline}

a.link2:visited { color: #FF0000; text-decoration: underline}

a.link2:hover { color: #FF0000; text-decoration: none; background-color: #FFFFFF}

--

/style

6. ; 其他樣式表的定義

我們還可以在Use CSS Selector里輸入其他CSS選擇符：

ID選擇符，以“#”號開頭定義一個樣式，例如：“#id-style”，然后建立一個ID為id-style的ID樣式，ID樣式表必須手動在HTML標記后加id=”id-style”屬性。

含HTML標記的類選擇符，例如：“p.red”，表示定義段落為red類的樣式，此樣式只對有 >
包含選擇符，是指前一個HTML標記里包含著后一個HTML標記，例如：“div p”，表示定義在DIV里包含段落的樣式。

7. 編輯、修改、刪除樣式表

點CSS Styles面板中的按鈕會打開編輯樣式表對話框，如下圖：

按鈕功能介紹：

Link：鏈接外部樣式表，這里可以選擇鏈入外部樣式表和導入外部樣式表兩種方式。

New：新建樣式。

Edit：選中一個樣式然后點Edit就可以進行編輯。

Duplicate：復制一個樣式，選中一個樣式后點Duplicate按鈕，彈出對話框，為復制的樣式起一個新的名稱，OK。

Remover：移除一個樣式或一個外部樣式表，選中要刪除的樣式點Remove按鈕，此樣式就被刪除了。

在Style definition（樣式定義）欄里可以看到此樣式的內容。

8. 外部樣式表

建立外部樣式表和建立內部樣式表差不多，只是在新建的時候選擇(New Style Sheet File)，并保存為一個擴展名為.css的樣式表文件。

現在，我們把剛才實例中的樣式表導出，然后再鏈接到其他頁面。點擊CSS Style面板菜單中的Export Style Sheet，系統彈出導出樣式表對話框，我們將樣式表文件保存為mystyle.css。用記事本打開mystyle.css文件可以看到如下樣式表代碼：

.emphases { font-weight: bold; color: #FF0000}

p { font-size: 12px; line-height: 150%; text-indent: 24px}

a:link { color: #FF9900; text-decoration: none}

a:visited { color: #FFFF00; text-decoration: none}

a:hover { color: #FF9900; text-decoration: underline overline; background-color: #FFFF00}

a.link2:link { color: #FF0000; text-decoration: underline}

a.link2:visited { color: #FF0000; text-decoration: underline}

a.link2:hover { color: #FF0000; text-decoration: none; background-color: #FFFFFF}

然后轉到其他頁面中，點CSS Style面板中的鏈入外部樣式表按鈕，鏈入剛才導出的樣式表文件mystyle.css，此時這個樣式表已經應用到新的頁面中了。在新頁面的 head 區添加了下列代碼：

link rel="stylesheet" href="mystyle.css" type="text/css"

此外，還可以導入外部樣式表，導入方法如下：

點擊編輯樣式表按鈕，打開編輯樣式表對話框，點擊LINK按鈕，這時彈出”Link External Style Sheet”對話框，輸入外部樣式表的路徑，選擇Import（導入），確定。
可以看到在 head 區的代碼為：

style type="text/css"
!--
@import "mystyle.css";
--
/style 本文作者:html教程

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。

上一篇：詳解DIV+CSS與表格建站的區別

下一篇：10個你未必知道的CSS技巧