- 相關推薦
Dreamweaver8.0速記CSS屬性
導語：CSS 規范允許使用稱作速記 CSS 的簡略語法創建樣式。下面就由小編為大家介紹一下Dreamweaver8.0速記CSS屬性，歡迎大家閱讀!
Dreamweaver8.0速記CSS屬性
速記 CSS 使您可以用一個屬性標簽指定多個屬性的值。例如，您可以使用 font 屬性在一行語法中設置 font-style、font-variant、font-weight、font-size、line-height 和 font-family 屬性。
使用速記 CSS 時需要注意的關鍵問題是速記 CSS 屬性省略的值會被指定為屬性的默認值。當兩個或多個 CSS 規則指定給同一標簽時，這可能會導致頁面無法正確顯示。
例如，下面顯示的 H1 標簽使用了普通的 CSS 語法。注意，font-variant、font-stretch、font-size-adjust 和 font-style 屬性的值都被指定為它們的默認值。
H1 {
font-weight: bold;
font-size: 16pt;
line-height: 18pt;
font-family: Arial;
font-variant: normal;
font-style: normal;
font-stretch: normal;
font-size-adjust: none
}
下面用一個速記屬性重寫這一標簽：
H1 { font: bold 16pt/18pt Arial }
使用速記符號編寫時，會自動將省略的值指定為它們的默認值。因此，上述速記示例省略了 font-variant、font-style、font-stretch 和 font-size-adjust 標簽。
如果您使用 CSS 語法的速記形式和普通形式在不只一個位置定義了樣式(如在 HTML 頁面中嵌入樣式并從外部樣式表中導入樣式)，一定要注意省略的屬性可能會覆蓋(或層疊)在其他位置明確設置的屬性。
因此，Dreamweaver 默認情況下使用 CSS 符號的普通形式撰寫語法。這樣可以防止能夠覆蓋普通規則的速記規則所引起的潛在問題。在 Dreamweaver 中打開使用速記 CSS 符號編寫代碼的 Web 頁面時，請注意 Dreamweaver 將使用普通形式創建新的 CSS 規則。通過更改"首選參數"對話框(在 Windows 中為"編輯">"首選參數";在 Macintosh 中為"Dreamweaver">"首選參數")中"CSS 樣式"類別中的 CSS 編輯首選參數，您可以指定 Dreamweaver 創建和編輯 CSS 規則的方式。
注意
"CSS 樣式"面板僅使用普通符號創建規則。如果您使用"CSS 樣式"面板創建頁面或 CSS 樣式表，一定要知道對速記 CSS 規則進行手工編碼可能會導致速記屬性覆蓋那些用普通形式創建的屬性。因此，請使用普通的 CSS 符號創建您的樣式。
CSS常用屬性
一、字體屬性：(font)
font-size:大小
font-size:x-large; (特大)
font-size:x-small; (特小)(一般情況下，中文用不到)
font-size:16px; (最常用)
font-size:16pd;
font-style:樣式
font-style:oblique; (偏斜體)
font-style:italic; (斜體)
font-style:normal; (正常)
line-height:行高
line-height:normal;(正常)
line-height:16px:
line-height:16pd:
line-height:16em:
font-weight:粗細
font-weight:bold; (粗體)
font-weight:lighter; (細體)
font-weight:normal; (正常)
font-variant:變體
font-variant:small-caps; (小型大寫字母)
font-variant:normal; (正常)
text-transform:大小寫
text-transform:capitalize; (首字母大寫)
text-transform:uppercase; (大寫)
text-transform:lowercase; (小寫)
text-transform:none; (無)
text-decoration:修飾
text-decoration:underline; (下劃線)
text-decoration:overline; (上劃線)
text-decoration:line-through; (刪除線)
text-decoration:blink; (閃爍)
font-family:字體樣式
font-family:"微軟雅黑";
font-family:serif;
二、背景屬性：(background)
background-color:色彩
background-color:#FFFFFF;
background-color:rgb(255,0,255);
background-color:yellow;
background-image:url();圖片
background-image:url();
background-image:url(./images/123.jpg);
background-repeat:重復
background-repeat:repeat; (平鋪)
background-repeat:no-repeat (不平鋪)
background-repeat:repeat-x (橫向平鋪)
background-repeat:repeat-y (縱向平鋪)
background-attachment:滾動
background-attachment:fixed; (固定)
background-attachment:scroll; (滾動)
background-position:位置
如果只規定了一個值，那么第二個值默認為center
background-position:left; (水平)
background-position:top; (垂直)
可用值：
top left
top center
top right
center left
center center
center right
bottom left
bottom center
bottom right
background-position:20% 30%; (x為水平) (y為垂直) (如果只規定一個值，第二個值默認為50%)
簡寫方法
background:#000 url(..) repeat fixed left top;
三、CSS列表符號屬性
list-style-type:none; (不編號)
list-style-type:decimal; (阿拉伯數字)
list-style-type:lower-roman; (小寫羅馬數字)
list-style-type:upper-roman; (大寫羅馬數字)
list-style-type:lower-alpha; (小寫英文字母)
list-style-type:upper-alpha; (大寫英文字母)
list-style-type:disc; (實心圓形符號)
list-style-type:circle; (空心圓形符號)
list-style-type:square; (實心方形符號)
list-style-image:url(/dot.gif); (圖片式符號)
list-style-position:outside; (凸排)
list-style-position:inside; (縮進)
四、CSS連接屬性
a (所有超鏈接)
a:link (超鏈接初始文字格式)
a:visited (瀏覽過的/點擊過的鏈接文字格式)
a:active (按下鏈接的格式)
a:hover (鼠標滑過樣式)
五、邊框屬性
border-style:邊框樣式
border-style:dotted; (點線)
border-style:dashed; (虛線)
border-style:solid; (固體)
border-style:double; (雙線)
border-style:groove; (3D槽線)
border-style:ridge; (3D脊狀)
border-style:inset; (3D凹陷)
border-style:outset; (3D開始)
border-width:邊框寬度
border-width:10px;
border-color:邊框顏色
border-color:#FFFFFF;
border-color:red;
border-color:rgb(255,0,255);
簡寫辦法
border:width style color;
border:10px solid red;
六、區塊屬性
letter-spacing:字間距
letter-spacing:2px;
letter-spacing:-3px;
text-align:對齊
text-align:justify; (兩端對齊)
text-align:left; (左對齊)
text-align:right; (右對齊)
text-align:center; (居中)
text-indent:縮進
text-indent:10px;
vertical-align:垂直對齊
vertical-align:baseline; (基線)
vertical-align:sub; (下標)
vertical-align:super; (下標)
vertical-align:top;
vertical-align:text-top;
vertical-align:middle;
vertical-align:bottom;
vertical-align:text-bottom;
word-spacing:詞間距
word-spacing:16px;
white-space:段落中的文本不進行換行
white-space:pre; (保留回車和空格，不讓文本換行)
white-space:nowrap; (不換行)
white-space:pre-wrap (保留回車和空格，讓文本換行)
white-space:pre-line (保留回車，讓文本換行)
display:顯示
display:block; (元素將顯示為塊級元素，此元素前后會帶有換行符。)
display:inline; (默認。元素會被顯示為內聯元素，元素前后沒有換行符。)
display:list-item; (元素會作為列表顯示。)
display:run-in; (元素會根據上下文作為塊級元素或內聯元素顯示。)
七、方塊屬性
基本屬性
width:100%;
height:100%;
width:100px;
height:100px;
float:浮動
float:left;
float:right;
float:none;
clear:元素的哪一側不允許其他浮動元素
clear:both; (在兩側不允許浮動元素)
clear:left; (在左側不允許浮動元素)
clear:right; (在右側不允許浮動元素)
clear:both; (在左右兩側均不允許浮動元素)
clear:none; (默認值。允許浮動元素出現在兩側)
margin:外邊距屬性
margin:auto; (游覽器計算屬性)
margin:0 auto; (讓當前元素在父元素里面左右居中)
margin:10px; (四周添加)
margin:10px 20px; (上下 左右)
margin:10px 20px 30px; (上 左右 下)
margin:10px 20px 30px 40px; (上 左 右 下)
margin:10%; (百分比外邊距)
margin:left;單一方向添加
margin-left
margin-right
margin-top
margin-bottom
padding:內邊距屬性
padding:auto; (游覽器計算屬性)
padding:10px; (四周添加)
padding:10px 20px; (上下 左右)
padding:10px 20px 30px; (上 左右 下)
padding:10px 20px 30px 40px; (上 右 下 左)
pargin:10%; (百分比內邊距)
padding:left;單一方向添加
padding-left
padding-right
padding-top
padding-bottom
八、定位屬性
position:定位
position:absolute; (絕對定位)
position:relative; (相對定位)
position:static; (默認)
visibility：規定元素是否可見
visibility:inherit; (繼承父元素) visibility:visible; (默認) visibility:hidden; (隱藏) ↓當在表格元素中使用時，此值可刪除一行或一列，但是它不會影響表格的布局。
被行或列占據的空間會留給其他內容使用。
如果此值被用在其他的元素上，會呈現為 "hidden"。 visibility:collapse;
overflow:溢出屬性
overflow:visible; (默認)
overflow:hidden; (隱藏)
overflow:scroll; (添加滾動條)
overflow:auto; (自動添加，超出的時候添加，不超出的時候不添加)
clip:裁剪
clip:rect(12px,auto,12px,auto) (遵循上右下左 順時針)
clip:auto; (默認值，不裁剪)
clip:inherit (繼承父元素)
【Dreamweaver8.0速記CSS屬性】相關文章：
CSS中的zoom屬性和scale屬性的用法及區別04-01
CSS中position屬性的使用詳解07-25
css讓背景圖片拉伸填充的屬性05-10
CSS3中的opacity屬性使用教程06-20
用css背景圖片拉伸填充的屬性06-30
css背景圖片拉伸填充的屬性是什么02-21