- 相關(guān)推薦
Dreamweaver8.0速記CSS屬性
導語(yǔ)：CSS 規范允許使用稱(chēng)作速記 CSS 的簡(jiǎn)略語(yǔ)法創(chuàng )建樣式。下面就由小編為大家介紹一下Dreamweaver8.0速記CSS屬性，歡迎大家閱讀!
Dreamweaver8.0速記CSS屬性
速記 CSS 使您可以用一個(gè)屬性標簽指定多個(gè)屬性的值。例如，您可以使用 font 屬性在一行語(yǔ)法中設置 font-style、font-variant、font-weight、font-size、line-height 和 font-family 屬性。
使用速記 CSS 時(shí)需要注意的關(guān)鍵問(wèn)題是速記 CSS 屬性省略的值會(huì )被指定為屬性的默認值。當兩個(gè)或多個(gè) CSS 規則指定給同一標簽時(shí)，這可能會(huì )導致頁(yè)面無(wú)法正確顯示。
例如，下面顯示的 H1 標簽使用了普通的 CSS 語(yǔ)法。注意，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
}
下面用一個(gè)速記屬性重寫(xiě)這一標簽：
H1 { font: bold 16pt/18pt Arial }
使用速記符號編寫(xiě)時(shí)，會(huì )自動(dòng)將省略的值指定為它們的默認值。因此，上述速記示例省略了 font-variant、font-style、font-stretch 和 font-size-adjust 標簽。
如果您使用 CSS 語(yǔ)法的速記形式和普通形式在不只一個(gè)位置定義了樣式(如在 HTML 頁(yè)面中嵌入樣式并從外部樣式表中導入樣式)，一定要注意省略的屬性可能會(huì )覆蓋(或層疊)在其他位置明確設置的屬性。
因此，Dreamweaver 默認情況下使用 CSS 符號的普通形式撰寫(xiě)語(yǔ)法。這樣可以防止能夠覆蓋普通規則的速記規則所引起的潛在問(wèn)題。在 Dreamweaver 中打開(kāi)使用速記 CSS 符號編寫(xiě)代碼的 Web 頁(yè)面時(shí)，請注意 Dreamweaver 將使用普通形式創(chuàng )建新的 CSS 規則。通過(guò)更改"首選參數"對話(huà)框(在 Windows 中為"編輯">"首選參數";在 Macintosh 中為"Dreamweaver">"首選參數")中"CSS 樣式"類(lèi)別中的 CSS 編輯首選參數，您可以指定 Dreamweaver 創(chuàng )建和編輯 CSS 規則的方式。
注意
"CSS 樣式"面板僅使用普通符號創(chuàng )建規則。如果您使用"CSS 樣式"面板創(chuàng )建頁(yè)面或 CSS 樣式表，一定要知道對速記 CSS 規則進(jìn)行手工編碼可能會(huì )導致速記屬性覆蓋那些用普通形式創(chuàng )建的屬性。因此，請使用普通的 CSS 符號創(chuàng )建您的樣式。
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; (小型大寫(xiě)字母)
font-variant:normal; (正常)
text-transform:大小寫(xiě)
text-transform:capitalize; (首字母大寫(xiě))
text-transform:uppercase; (大寫(xiě))
text-transform:lowercase; (小寫(xiě))
text-transform:none; (無(wú))
text-decoration:修飾
text-decoration:underline; (下劃線(xiàn))
text-decoration:overline; (上劃線(xiàn))
text-decoration:line-through; (刪除線(xiàn))
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:滾動(dòng)
background-attachment:fixed; (固定)
background-attachment:scroll; (滾動(dòng))
background-position:位置
如果只規定了一個(gè)值，那么第二個(gè)值默認為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為垂直) (如果只規定一個(gè)值，第二個(gè)值默認為50%)
簡(jiǎn)寫(xiě)方法
background:#000 url(..) repeat fixed left top;
三、CSS列表符號屬性
list-style-type:none; (不編號)
list-style-type:decimal; (阿拉伯數字)
list-style-type:lower-roman; (小寫(xiě)羅馬數字)
list-style-type:upper-roman; (大寫(xiě)羅馬數字)
list-style-type:lower-alpha; (小寫(xiě)英文字母)
list-style-type:upper-alpha; (大寫(xiě)英文字母)
list-style-type:disc; (實(shí)心圓形符號)
list-style-type:circle; (空心圓形符號)
list-style-type:square; (實(shí)心方形符號)
list-style-image:url(/dot.gif); (圖片式符號)
list-style-position:outside; (凸排)
list-style-position:inside; (縮進(jìn))
四、CSS連接屬性
a (所有超鏈接)
a:link (超鏈接初始文字格式)
a:visited (瀏覽過(guò)的/點(diǎn)擊過(guò)的鏈接文字格式)
a:active (按下鏈接的格式)
a:hover (鼠標滑過(guò)樣式)
五、邊框屬性
border-style:邊框樣式
border-style:dotted; (點(diǎn)線(xiàn))
border-style:dashed; (虛線(xiàn))
border-style:solid; (固體)
border-style:double; (雙線(xiàn))
border-style:groove; (3D槽線(xiàn))
border-style:ridge; (3D脊狀)
border-style:inset; (3D凹陷)
border-style:outset; (3D開(kāi)始)
border-width:邊框寬度
border-width:10px;
border-color:邊框顏色
border-color:#FFFFFF;
border-color:red;
border-color:rgb(255,0,255);
簡(jiǎn)寫(xiě)辦法
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:縮進(jìn)
text-indent:10px;
vertical-align:垂直對齊
vertical-align:baseline; (基線(xiàn))
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:段落中的文本不進(jìn)行換行
white-space:pre; (保留回車(chē)和空格，不讓文本換行)
white-space:nowrap; (不換行)
white-space:pre-wrap (保留回車(chē)和空格，讓文本換行)
white-space:pre-line (保留回車(chē)，讓文本換行)
display:顯示
display:block; (元素將顯示為塊級元素，此元素前后會(huì )帶有換行符。)
display:inline; (默認。元素會(huì )被顯示為內聯(lián)元素，元素前后沒(méi)有換行符。)
display:list-item; (元素會(huì )作為列表顯示。)
display:run-in; (元素會(huì )根據上下文作為塊級元素或內聯(lián)元素顯示。)
七、方塊屬性
基本屬性
width:100%;
height:100%;
width:100px;
height:100px;
float:浮動(dòng)
float:left;
float:right;
float:none;
clear:元素的哪一側不允許其他浮動(dòng)元素
clear:both; (在兩側不允許浮動(dòng)元素)
clear:left; (在左側不允許浮動(dòng)元素)
clear:right; (在右側不允許浮動(dòng)元素)
clear:both; (在左右兩側均不允許浮動(dòng)元素)
clear:none; (默認值。允許浮動(dòng)元素出現在兩側)
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：規定元素是否可見(jiàn)
visibility:inherit; (繼承父元素) visibility:visible; (默認) visibility:hidden; (隱藏) ↓當在表格元素中使用時(shí)，此值可刪除一行或一列，但是它不會(huì )影響表格的布局。
被行或列占據的空間會(huì )留給其他內容使用。
如果此值被用在其他的元素上，會(huì )呈現為 "hidden"。 visibility:collapse;
overflow:溢出屬性
overflow:visible; (默認)
overflow:hidden; (隱藏)
overflow:scroll; (添加滾動(dòng)條)
overflow:auto; (自動(dòng)添加，超出的時(shí)候添加，不超出的時(shí)候不添加)
clip:裁剪
clip:rect(12px,auto,12px,auto) (遵循上右下左 順時(shí)針)
clip:auto; (默認值，不裁剪)
clip:inherit (繼承父元素)
【Dreamweaver8.0速記CSS屬性】相關(guān)文章：
CSS中的zoom屬性和scale屬性的用法及區別04-01
CSS的animation屬性使用實(shí)例分析04-08
CSS中position屬性的使用詳解07-25
css讓背景圖片拉伸填充的屬性05-10
CSS中的Box Model盒屬性的使用實(shí)例05-25
CSS3中的opacity屬性使用教程06-20
用css背景圖片拉伸填充的屬性06-30
css背景圖片拉伸填充的屬性是什么02-21