- 相關(guān)推薦
Dreamweaver8.0速記CSS屬性
導(dǎo)語：CSS 規(guī)范允許使用稱作速記 CSS 的簡略語法創(chuàng)建樣式。下面就由小編為大家介紹一下Dreamweaver8.0速記CSS屬性，歡迎大家閱讀!
Dreamweaver8.0速記CSS屬性
速記 CSS 使您可以用一個(gè)屬性標(biāo)簽指定多個(gè)屬性的值。例如，您可以使用 font 屬性在一行語法中設(shè)置 font-style、font-variant、font-weight、font-size、line-height 和 font-family 屬性。
使用速記 CSS 時(shí)需要注意的關(guān)鍵問題是速記 CSS 屬性省略的值會(huì)被指定為屬性的默認(rèn)值。當(dāng)兩個(gè)或多個(gè) CSS 規(guī)則指定給同一標(biāo)簽時(shí)，這可能會(huì)導(dǎo)致頁面無法正確顯示。
例如，下面顯示的 H1 標(biāo)簽使用了普通的 CSS 語法。注意，font-variant、font-stretch、font-size-adjust 和 font-style 屬性的值都被指定為它們的默認(rèn)值。
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è)速記屬性重寫這一標(biāo)簽：
H1 { font: bold 16pt/18pt Arial }
使用速記符號編寫時(shí)，會(huì)自動(dòng)將省略的值指定為它們的默認(rèn)值。因此，上述速記示例省略了 font-variant、font-style、font-stretch 和 font-size-adjust 標(biāo)簽。
如果您使用 CSS 語法的速記形式和普通形式在不只一個(gè)位置定義了樣式(如在 HTML 頁面中嵌入樣式并從外部樣式表中導(dǎo)入樣式)，一定要注意省略的屬性可能會(huì)覆蓋(或?qū)盈B)在其他位置明確設(shè)置的屬性。
因此，Dreamweaver 默認(rèn)情況下使用 CSS 符號的普通形式撰寫語法。這樣可以防止能夠覆蓋普通規(guī)則的速記規(guī)則所引起的潛在問題。在 Dreamweaver 中打開使用速記 CSS 符號編寫代碼的 Web 頁面時(shí)，請注意 Dreamweaver 將使用普通形式創(chuàng)建新的 CSS 規(guī)則。通過更改"首選參數(shù)"對話框(在 Windows 中為"編輯">"首選參數(shù)";在 Macintosh 中為"Dreamweaver">"首選參數(shù)")中"CSS 樣式"類別中的 CSS 編輯首選參數(shù)，您可以指定 Dreamweaver 創(chuàng)建和編輯 CSS 規(guī)則的方式。
注意
"CSS 樣式"面板僅使用普通符號創(chuàng)建規(guī)則。如果您使用"CSS 樣式"面板創(chuàng)建頁面或 CSS 樣式表，一定要知道對速記 CSS 規(guī)則進(jìn)行手工編碼可能會(huì)導(dǎo)致速記屬性覆蓋那些用普通形式創(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:粗細(xì)
font-weight:bold; (粗體)
font-weight:lighter; (細(xì)體)
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:重復(fù)
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:位置
如果只規(guī)定了一個(gè)值，那么第二個(gè)值默認(rèn)為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為垂直) (如果只規(guī)定一個(gè)值，第二個(gè)值默認(rèn)為50%)
簡寫方法
background:#000 url(..) repeat fixed left top;
三、CSS列表符號屬性
list-style-type:none; (不編號)
list-style-type:decimal; (阿拉伯?dāng)?shù)字)
list-style-type:lower-roman; (小寫羅馬數(shù)字)
list-style-type:upper-roman; (大寫羅馬數(shù)字)
list-style-type:lower-alpha; (小寫英文字母)
list-style-type:upper-alpha; (大寫英文字母)
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 (瀏覽過的/點(diǎn)擊過的鏈接文字格式)
a:active (按下鏈接的格式)
a:hover (鼠標(biāo)滑過樣式)
五、邊框?qū)傩?/strong>
border-style:邊框樣式
border-style:dotted; (點(diǎn)線)
border-style:dashed; (虛線)
border-style:solid; (固體)
border-style:double; (雙線)
border-style:groove; (3D槽線)
border-style:ridge; (3D脊?fàn)?
border-style:inset; (3D凹陷)
border-style:outset; (3D開始)
border-width:邊框?qū)挾?/p>
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;
六、區(qū)塊屬性
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; (基線)
vertical-align:sub; (下標(biāo))
vertical-align:super; (下標(biāo))
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; (保留回車和空格，不讓文本換行)
white-space:nowrap; (不換行)
white-space:pre-wrap (保留回車和空格，讓文本換行)
white-space:pre-line (保留回車，讓文本換行)
display:顯示
display:block; (元素將顯示為塊級元素，此元素前后會(huì)帶有換行符。)
display:inline; (默認(rèn)。元素會(huì)被顯示為內(nèi)聯(lián)元素，元素前后沒有換行符。)
display:list-item; (元素會(huì)作為列表顯示。)
display:run-in; (元素會(huì)根據(jù)上下文作為塊級元素或內(nèi)聯(lián)元素顯示。)
七、方塊屬性
基本屬性
width:100%;
height:100%;
width:100px;
height:100px;
float:浮動(dòng)
float:left;
float:right;
float:none;
clear:元素的哪一側(cè)不允許其他浮動(dòng)元素
clear:both; (在兩側(cè)不允許浮動(dòng)元素)
clear:left; (在左側(cè)不允許浮動(dòng)元素)
clear:right; (在右側(cè)不允許浮動(dòng)元素)
clear:both; (在左右兩側(cè)均不允許浮動(dòng)元素)
clear:none; (默認(rèn)值。允許浮動(dòng)元素出現(xiàn)在兩側(cè))
margin:外邊距屬性
margin:auto; (游覽器計(jì)算屬性)
margin:0 auto; (讓當(dāng)前元素在父元素里面左右居中)
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:內(nèi)邊距屬性
padding:auto; (游覽器計(jì)算屬性)
padding:10px; (四周添加)
padding:10px 20px; (上下 左右)
padding:10px 20px 30px; (上 左右 下)
padding:10px 20px 30px 40px; (上 右 下 左)
pargin:10%; (百分比內(nèi)邊距)
padding:left;單一方向添加
padding-left
padding-right
padding-top
padding-bottom
八、定位屬性
position:定位
position:absolute; (絕對定位)
position:relative; (相對定位)
position:static; (默認(rèn))
visibility：規(guī)定元素是否可見
visibility:inherit; (繼承父元素) visibility:visible; (默認(rèn)) visibility:hidden; (隱藏) ↓當(dāng)在表格元素中使用時(shí)，此值可刪除一行或一列，但是它不會(huì)影響表格的布局。
被行或列占據(jù)的空間會(huì)留給其他內(nèi)容使用。
如果此值被用在其他的元素上，會(huì)呈現(xiàn)為 "hidden"。 visibility:collapse;
overflow:溢出屬性
overflow:visible; (默認(rèn))
overflow:hidden; (隱藏)
overflow:scroll; (添加滾動(dòng)條)
overflow:auto; (自動(dòng)添加，超出的時(shí)候添加，不超出的時(shí)候不添加)
clip:裁剪
clip:rect(12px,auto,12px,auto) (遵循上右下左 順時(shí)針)
clip:auto; (默認(rèn)值，不裁剪)
clip:inherit (繼承父元素)
【Dreamweaver8.0速記CSS屬性】相關(guān)文章：
什么是CSS11-08
網(wǎng)頁設(shè)計(jì)css教學(xué)02-07
科目一速記方法10-21
textarea屬性設(shè)置詳解04-14
科目一考試的速記口訣02-07
科目一考試速記口訣01-11
正確使用HTMLtitle屬性的建議10-25
科目三燈光模擬速記技巧04-21
科目一快速記憶方法02-16