使用Dreamweaver CS5可以定義CSS規則的屬性,如設置字體、文本、背景、列表、間距以及布局屬性等。
首先使用Dreamweaver CS5創建新的CSS規則,然后可以設置下面的任意屬性。
1. 打開“CSS樣式”面板。
2. 在“所選內容的摘要”窗格中雙擊某一個屬性,打開“CSS 規則定義”對話框。如下圖所示:
一、定義CSS的類型屬性
在“CSS 規則定義”對話框中,在“分類”下拉框中選擇“類型”,然后可以在右邊“類型”部分設置屬性:
Font-family:設置字體系列。在下拉菜單中選擇字體。
Font-size:定義文字的字體大小。
Font-weight:對字體應用特定或相對的粗體量。
Font-style:指定“正常”、“斜體”或“偏斜體”作為字體樣式。
Font-variant:設置文本的小型大寫字母變體。
Line-height:設置文本所在行的高度。
Text-transform:將所選內容中的每個單詞的首字母大寫或將文本設置為全部大寫或小寫。
Text-decoration:向文本中添加下劃線、上劃線或刪除線,或使文本閃爍。
Color:設置文本的顏色。
提示:如果某一個屬性不需要設置,可以將其保留為空。
二、定義CSS的背景屬性
在“CSS 規則定義”對話框中,在“分類”下拉框中選擇“背景”,然后可以在右邊“背景”部分設置屬性:
Background-color:設置元素的背景顏色。
Background-image:設置元素的背景圖像。
Background-repeat:設置是否以及如何重復背景圖像。
Background-attachment:設置背景圖像是固定在其原始位置還是隨內容一起滾動。
Background-position(X)和Background-position(Y):設置背景圖片相對于元素的初始位置。
提示:如果某一個屬性不需要設置,可以將其保留為空。
三、定義CSS的區塊屬性
在“CSS 規則定義”對話框中,在“分類”下拉框中選擇“區塊”,然后可以在右邊“區塊”部分設置屬性:
Word-spacing:設置字詞的間距。
Letter-spacing:增加或減小字母或字符的間距。
Vertical-align:指定應用此屬性的元素的垂直對齊方式。
Text-align:設置文本在元素內的對齊方式。
Text-indent:指定第一行文本縮進的程度??梢允褂秘撝祫摻ㄍ钩?,但顯示方式取決于瀏覽器。
White-space:設置如何處理元素中的空格。
Display:設置是否以及如何顯示元素。
提示:如果某一個屬性不需要設置,可以將其保留為空。
四、定義CSS的方框屬性
在“CSS 規則定義”對話框中,在“分類”下拉框中選擇“方框”,然后可以在右邊“方框”部分設置屬性:
Width:設置元素的寬度。
Height:設置元素的高度。
Float:設置其它元素(如文本、AP Div、表格等)在圍繞元素的哪個邊浮動。其它元素按通常的方式環繞在浮動元素的周圍。
Clear:定義不允許AP元素的邊。如果清除邊上出現AP元素,則帶清除設置的元素將移到該元素的下方。
Padding:指定元素內容與元素邊框之間的間距(如果沒有邊框,則為邊距)。
全部相同:取消此項,可以分別設置元素各個邊的填充。如果選擇此項,可以為元素的“上”、“右”、“下”和“左”設置相同的填充屬性。
Margin:設置一個元素的邊框與另一個元素之間的間距(如果沒有邊框,則為填充)。
全部相同:取消此項,可以分別設置元素各個邊的邊距。如果選擇此項,可以為元素的“上”、“右”、“下”和“左”設置相同的邊距屬性。
提示:如果某一個屬性不需要設置,可以將其保留為空。
五、定義CSS的邊框屬性
在“CSS 規則定義”對話框中,在“分類”下拉框中選擇“邊框”,然后可以在右邊“邊框”部分設置屬性:
Style:設置邊框的樣式外觀。
全部相同:取消此項,可以分別設置元素各個邊的邊框樣式屬性。選擇此項,可以為元素的“上”、“右”、“下”和“左”設置相同的邊框樣式屬性。
Width:設置元素邊框的粗細。
全部相同:取消此項,可以分別設置元素各個邊的邊框寬度。選擇此項,可以為元素的“上”、“右”、“下”和“左”設置相同的邊框寬度。
Color:設置邊框的顏色。
全部相同:取消此項,可以分別設置元素各個邊的邊框顏色。選擇此項,可以為元素的“上”、“右”、“下”和“左”設置相同的邊框顏色。
提示:如果某一個屬性不需要設置,可以將其保留為空。
六、定義CSS的列表屬性
在“CSS 規則定義”對話框中,在“分類”下拉框中選擇“列表”,然后可以在右邊“列表”部分設置屬性:
List-style-type:設置項目符號或編號的外觀。
List-style-image:為項目符號指定自定義圖像。
List-style-position:設置列表項文本是否換行并縮進(在外部)或者文本是否換行到左邊距(在內部)。
提示:如果某一個屬性不需要設置,可以將其保留為空。
七、定義CSS的定位屬性
在“CSS 規則定義”對話框中,在“分類”下拉框中選擇“定位”,然后可以在右邊“定位”部分設置屬性:
Position:設置瀏覽器應該如何定位選定的元素。
Width:設置元素的寬度。
Height:設置元素的高度。
Visibility:設置內容的初始顯示條件。如果不指定可見性屬性,則默認情況下內容將繼承父級標簽的值。
Z-index:設置內容的堆疊順序。Z軸值較高的元素顯示在Z軸值較低的元素(或根本沒有Z軸值的元素)的上方。值可以為正,也可以為負。
Overflow:設置當容器(如:DIV或P)的內容超出容器的顯示范圍時的處理方式。
Placement:指定內容塊的位置和大小。
Clip:定義內容的可見部分。
提示:如果某一個屬性不需要設置,可以將其保留為空。
八、定義CSS的擴展屬性
在“CSS 規則定義”對話框中,在“分類”下拉框中選擇“擴展”,然后可以在右邊“擴展”部分設置屬性:
Page-break-before:打印時在樣式所控制的對象之前強行分頁。
Page-break-after:打印時在樣式所控制的對象之后強行分頁。
Cursor:當指針位于樣式所控制的對象上時改變指針圖像。
Filter:對樣式所控制的對象應用特殊效果(包括模糊和反轉)。
提示:如果某一個屬性不需要設置,可以將其保留為空。
九、提示
設置好“CSS 規則定義”對話框中的屬性以后,單擊“確定”按鈕即可設置CSS屬性。
新聞熱點
疑難解答