| CSS屬性很多，以下簡(jiǎn)要介紹一些常用的CSS屬性。 字體屬性 font-family：字體，取值為字體名。可指定多個(gè)字體，用“,”分隔，如果字體名中含有空格，需用引號(hào)括起字體名。 #d1 { font-family: Verdana, Arial, "Ms Serif", 宋體; } 如果用戶的系統(tǒng)中沒有安裝前面的字體，則按順序使用后面的字體。 font-size：文字大小，取值為長度值?？梢允菐挝坏拈L度值，也可以是百分比。 #d1 { font-size: 20px; } 如果使用百分比，則文字大小是相對(duì)于父對(duì)象文字大小的。 font-weight：文字粗細(xì)，取值為 normal (不加粗) 或 bold (加粗)。 #d1 { font-weight: bold; } 你可以用此屬性設(shè)置某些文字的加粗效果，也可以取消 <h1>~<h6> 標(biāo)簽?zāi)J(rèn)的加粗效果。 font-style：文字傾斜，取值為 normal (不傾斜) 或 italic (傾斜)。 #d1 { font-style: italic; } 文本屬性 color：文本顏色，取值為顏色名或顏色值。 #d1 { color: #F0A983; } text-decoration：設(shè)置劃線，取值為 none (無劃線)、underline (下劃線)、overline (上劃線)、line-through (刪除線)。 #d1 { text-decoration: underline; } text-align：對(duì)齊方式，取值為 left (左對(duì)齊)、right (右對(duì)齊)、center (居中)、justify (兩端對(duì)齊)。 #d1 { text-align: center; } text-indent：首行縮進(jìn)，取值為長度值或百分比。 #d1 { text-indent: 2em; } 背景屬性 background-color：背景顏色，取值為顏色名或顏色值。 #d1 { background-color: blue; } background-image：背景圖像，取值為圖像文件的地址。 #d1 { background-image: url(./images/bk.gif); } 一般在指定背景圖像時(shí)，通常也指定一個(gè)與背景圖像近似的背景顏色，這樣，當(dāng)圖像不能顯示時(shí)，還可以顯示顏色。 background-repeat：背景圖像的鋪排方式，取值為 repeat (平鋪)、no-repeat (不平鋪)、repeat-x (橫向平鋪)、repeat-y (縱向平鋪)。默認(rèn)為 repeat。 #d1 { background-repeat: no-repeat; } background-position：背景圖像的鋪排位置，取值一般是兩個(gè)帶單位的長度值，可正可負(fù)。用于指定圖像鋪排的起點(diǎn)。 #d1 { background-position: 0 -100px; } 本例表示從背景圖像的向下 100px 處開始鋪排。 background：這是一個(gè)綜合的背景屬性，可同時(shí)指定背景顏色、背景圖像、鋪排方式、鋪排位置等參數(shù)，用于簡(jiǎn)化背景屬性的書寫。 #d1 { background: blue url(./images/bk.gif) no-repeat; } 它的值可包含多個(gè)內(nèi)容，用空格分隔。不需要的參數(shù)可以不寫。 邊框?qū)傩?/p> border：邊框，取值中包含邊框線的“寬度、風(fēng)格、顏色”，用空格分隔。 #d1 { border: 1px solid red; } 本例定義的邊框：線寬度為1px，實(shí)線、紅色。 邊框線寬度：取值是一個(gè)長度值。如果取值為0，則表示無邊框。 邊框線風(fēng)格：取值有 solid (實(shí)線)、dotted (點(diǎn)線)、dashed (虛線)、double (雙線)、groove (3D凹槽)、inset (3D凹邊)、outset (3D凸邊)、ridge (菱形邊框)。 border 屬性一般用來設(shè)置四個(gè)邊風(fēng)格相同的邊框。 border-top、border-right、border-bottom、border-left：設(shè)置邊框單個(gè)邊的屬性，取值和 border 相同，但只作用于指定邊。 #d1 { border-top: 1px solid red; border-right: 2px solid red; } 本例定義了對(duì)象的上邊和右邊的邊框線。 外邊距屬性 外邊距是指一個(gè)對(duì)象外部空白的大小，利用此屬性可設(shè)置對(duì)象間的距離。 margin：各邊的外邊距，取值一般是4個(gè)長度值或百分比，用空格分隔，依次為“上-右-下-左”四個(gè)邊的外邊距。如果各個(gè)邊的外邊距相同，可只設(shè)置一個(gè)值。 #d1 { margin: 10px 5px 10px 5px; } 本例指定對(duì)象上下兩邊的外部空白為10px，左右兩邊的外部空白為5px。 margin-top、margin-right、margin-bottom、margin-left：設(shè)置單個(gè)邊的外邊距，取值為1個(gè)長度值或百分比。 #d1 { margin-top: 10px; margin-bottom: 20px; } 本例定義了對(duì)象的上邊和下邊的外部空白大小。 內(nèi)邊距屬性 內(nèi)邊距是指一個(gè)對(duì)象內(nèi)部空白的大小，利用此屬性可設(shè)置對(duì)象中的內(nèi)容和對(duì)象邊框間的距離。 padding：各邊的內(nèi)邊距，取值一般是4個(gè)長度值或百分比，用空格分隔，依次為“上-右-下-左”四個(gè)邊的內(nèi)邊距。如果各個(gè)邊的內(nèi)邊距相同，可只設(shè)置一個(gè)值。 #d1 { padding: 10px; } 本例指定對(duì)象內(nèi)部4個(gè)邊的內(nèi)部空白都是10px。 padding-top、padding-right、padding-bottom、padding-left：設(shè)置單個(gè)邊的內(nèi)邊距，取值為1個(gè)長度值或百分比。 #d1 { padding-left: 20px; padding-right: 20px; } 本例定義了對(duì)象的左邊和右邊的內(nèi)部空白大小。 其它 width：對(duì)象的寬度，取值是一個(gè)長度值或百分比。 #d1 { width: 80%; } 當(dāng)指定寬度為百分比時(shí)，對(duì)象的寬度是相對(duì)于其父對(duì)象的。 height：對(duì)象的高度，取值是一個(gè)長度值或百分比。 #d1 { height: 200px; } 當(dāng)指定高度為百分比時(shí)，對(duì)象的高度是相對(duì)于其父對(duì)象的。 line-height：行高，取值是一個(gè)無單位數(shù)值或長度值或百分比。 #d1 { line-height: 1.2em; } 該屬性用于設(shè)置對(duì)象中文字的行與行間的距離。指定的行高一般應(yīng)大于文字的高度，這樣文字間才不會(huì)發(fā)生重疊。 本例指定的行高是“1.2em”，表示行的高度是文字尺寸的1.2倍。 vertical-align：設(shè)置對(duì)象的垂直對(duì)齊方式。這個(gè)屬性目前只對(duì)那些擁有 valign 屬性的標(biāo)簽有效，比如圖像、表格等，對(duì)一般對(duì)象無效。 常用取值有：baseline (基線對(duì)齊)、top (頂端對(duì)齊)、middle (中間對(duì)齊)、bottom (底部對(duì)齊)、長度值 (可以為負(fù)值，表示升高或降低指定高度)。 #d1 { vertical-align: middle; } 本例表示把元素放置在垂直的中間位置，一般用于圖像或表格。 cursor：指定鼠標(biāo)光標(biāo)形狀。該屬性只在IE瀏覽器中支持。 常用取值有：auto (默認(rèn))、default (正常選擇)、hand (鏈接選擇)、text (文本選擇)、url(光標(biāo)文件) (使用指定光標(biāo)文件)。 #d1 { cursor: hand; } 本例中，當(dāng)鼠標(biāo)指針移動(dòng)到“#d1”定義的塊中時(shí)，鼠標(biāo)指針呈現(xiàn)為“手”形，就像指向超鏈接時(shí)一樣。 |
 |
| 內(nèi)聯(lián)對(duì)象用于在塊對(duì)象中設(shè)置局部文本的樣式。內(nèi)聯(lián)對(duì)象不能設(shè)置寬度、高度、位置等屬性，它們只能設(shè)置顏色、字體、邊框等呈現(xiàn)屬性。 常用的內(nèi)聯(lián)對(duì)象有 <span>、<em>、<strong> 等。它們是有語義的標(biāo)簽，<span> 標(biāo)簽表示一般文本，它沒有默認(rèn)的顯示效果，<em> 標(biāo)簽表示強(qiáng)調(diào)的文本，它默認(rèn)的顯示效果通常為斜體，<strong> 標(biāo)簽表示語氣更強(qiáng)的強(qiáng)調(diào)，它默認(rèn)的顯示效果通常為粗體。我們可以用CSS重新設(shè)置它們的樣式。 例如： <style type="text/css"> #welcome { width: 200px; height: 40px; border: 4px ridge #FF7F50; background-color: #F5F5DC; font-family: 楷體; font-size: 30px; padding-top: 10px; text-align: center; } #welcome .t1 { color: red; } #welcome .t2 { color: blue; } </style> <div id="welcome"> <span class="t1">歡迎</span><span class="t2">光臨！</span> </div> 顯示效果為： 歡迎光臨！ #welcome 選擇符定義了區(qū)塊的總體樣式，包括寬度(width)、高度(height)、邊框(border)、背景色(background-color)、字體(font-family)、文字大小(font-size)、內(nèi)部邊距(padding)、對(duì)齊方式(text-align)等屬性。 #welcome .t1 選擇符定義了區(qū)塊中類為“t1”的對(duì)象的樣式。 #welcome .t2 選擇符定義了區(qū)塊中類為“t2”的對(duì)象的樣式。 <span> 標(biāo)簽把一行中的文字組織為兩個(gè)元素，分別引用對(duì)應(yīng)的樣式。 |
聯(lián)系客服
