css常用的基本屬性

1、背景屬性共有六項(xiàng):背景顏色(background-color,設(shè)置背景顏色。背景圖像(background-image,設(shè)置網(wǎng)頁背景圖像。重復(fù)(background-repeat,控制背景圖像的平鋪方式,有不重復(fù)(no-repeat、重復(fù)(repeat,沿水平、垂直方向平鋪、橫向重復(fù)(repeat-X,圖像沿水平方向平鋪和縱向重復(fù)(repeat-Y,沿圖像垂直方向平鋪等4種選擇。附加(background-attachment,用于控制背景圖像是否會(huì)隨頁面的滾動(dòng)而一起滾動(dòng)。有固定(fixd,文字滾動(dòng)時(shí),背景圖像保質(zhì)固定和滾動(dòng)(scroll,背景圖像隨文字內(nèi)容一起滾動(dòng)兩種選擇。水平位置/垂直位置

2、(background-position,確定背景圖像的水平、垂直位置。共有左對(duì)齊(left、右對(duì)齊(right、頂部(top、底部(bottom、居中(center和值(自定義背景圖像的起點(diǎn)位置,可使用戶對(duì)背景圖像的位置做出更精確的控制等6種選擇。引用內(nèi)容引用內(nèi)容類型屬性共有九項(xiàng):字體(font-family,設(shè)定時(shí),需考慮瀏覽器中有無該字體。大小(font-size,注意度量單位。粗細(xì)(font-weight,除了normal(正常、bold(粗體、bolder(特粗、lighter(細(xì)體外,還有9種以像素為度量為單位的設(shè)置方式。樣式(font-style,也就是字型。行高(line-he

3、ight,就是行距。注意,行距只能以是字體大小值為變形(font-variant,可以將正常文字一半尺寸后大寫顯示,但I(xiàn)E目前不支持這項(xiàng)屬性。大小寫(text-transform,這項(xiàng)屬性能輕而易舉地控制字母大小寫,有首字大寫(capitalize、大寫(uppercase、小寫(lowercase和無(none,使所有繼承文字和變形參數(shù)被忽略,文字將以正常形式顯示等4種。修飾(text-decoration,用于控制鏈接文本的顯示形態(tài),有下劃線(underline、無下劃線(overline、刪除線(line-through、閃爍(blink和無(none ,使上述效果均不會(huì)發(fā)生等5種修飾方

4、式。但I(xiàn)E4不支持文字閃爍。引用內(nèi)容引用內(nèi)容區(qū)塊屬性共有六項(xiàng):單詞間距(word-spacing,主要用于控制文字間相隔的距離。有正常(normal和值(自定義間隔值兩種選擇方式。當(dāng)選擇值時(shí),可用的單位有英吋(in、厘米(cm、毫米(mm、點(diǎn)數(shù)(pt、12pt字(pc、字體高(em、字體x有高(ex像素(px。字母間距(letter-spacing,其作用與字符間距類似,也有正常(normal和值(自定義間隔值兩種選擇方式。垂直對(duì)齊(vertical-align,控制文字或圖像相對(duì)于其母體元素的垂直位置。如將一個(gè)2×3像素的GIF圖像同其母體元素文字的頂部垂直對(duì)齊,則該GIF圖像將在

5、該行文字的頂部顯示。共有基線(baseline,將元素的基準(zhǔn)線同母體元素的基準(zhǔn)線對(duì)齊、下標(biāo)(sub,將元素以下標(biāo)的形式顯示,上標(biāo)(super,將元素以上標(biāo)的形式顯示、頂部(top ,將元素頂部同最高的母體元素對(duì)齊、文本頂對(duì)齊(text-top,將元素的頂部同母體元素文字的頂部對(duì)齊、中線對(duì)齊(middle,將元素的中點(diǎn)同母體元素的中點(diǎn)對(duì)齊、底部(bottom,將元素的底部同最低的母體元素對(duì)齊及值(自定義等9種選擇。文本對(duì)齊(text-align,設(shè)置塊的水平對(duì)齊方式。共有左對(duì)齊(left、右對(duì)齊(right、居中(center和均分(justify等4種選擇。文字縮進(jìn)(text-indent,控

6、制塊的縮進(jìn)程度。空白間距(white-space,在HTML中,空格是被省略的;在CSS中則使用屬性(white-space控制空格的輸入。共有正常(normal、保留(pre和不換行(nowrap等3種選擇。引用內(nèi)容引用內(nèi)容邊框的屬性有3項(xiàng):寬(border- width,控制邊框的寬度,其中分為4個(gè)屬性:border-top-width頂邊框的寬度、border-right-width右邊框的寬度、border-bottom-width底邊框的寬度、border-left-width 左邊框的寬度。顏色(border-color,設(shè)置各邊框的顏色。若要使邊框的四邊顯示不同的顏色,可在設(shè)置中

7、分別列出。如,p: #ff0000 #009900 #0000ff #55cc00瀏覽器將四種顏色依次理解為:上邊框、右邊框、底邊框和左邊框(自上開始順時(shí)針。樣式(border-style,設(shè)定邊框的樣式,共有無(none、虛線(dotted、點(diǎn)劃線線(dotted、點(diǎn)劃線(dashed、實(shí)線(solid、雙線(double 、槽狀(grove、脊?fàn)?ridge、凹陷(inset和凸起(outset等9種。引用內(nèi)容引用內(nèi)容盒子屬性共有6項(xiàng):寬(width,確定盒子本身的寬度,可以使盒子的寬度不依靠它所包含的內(nèi)容多少。高(height,確定盒子本身的高度。浮動(dòng)(float,設(shè)置塊元素的浮動(dòng)效果。

8、清除(clear,用于清除設(shè)置的浮動(dòng)效果。邊距(margin,控制圍繞邊框的邊距大小。其中包含4個(gè)屬性:margin-top控制上邊距的寬度、margin-right控制右邊距的寬度、margin-bottom控制下邊距的寬度、margin-left控制左邊距的寬度。邊界(padding,確定圍繞塊元素的空格填充數(shù)量,其中包含4個(gè)屬性padding-top控制上留白的寬度、padding-right控制右留白的寬度、padding-bottom控制下留白寬度、padding-left控制左留白的寬度。引用內(nèi)容引用內(nèi)容列表屬性共有3項(xiàng):類型(list-style-type,確定列表每一項(xiàng)前使用的

9、符號(hào),共有圓點(diǎn)(disc、圓圈(circle、方形(square、數(shù)字(decimal、小寫羅馬數(shù)字(lower-roman 、大寫羅馬數(shù)字(upper-roman、小寫字母(lower-alpha和大寫字母(upper-alpha等8種。項(xiàng)目圖像(list-style-image,其作用是將列表前面的符號(hào)換為圖形。位置(list-style-position,用于描述列表位置,有內(nèi)(outside和外(inside兩種選擇。引用內(nèi)容引用內(nèi)容定位屬性共有6項(xiàng):類型(position,用于確定定位的類型,共有絕對(duì)(absolute、相對(duì)(relative和靜態(tài)(static等3種選擇。Z軸(z-

10、index,用于控制網(wǎng)頁中塊元素的疊放順序,可為元素設(shè)置重疊效果。該屬性的參數(shù)值使用純整數(shù),值為0時(shí),元素在最下層,適用于絕對(duì)定位或相對(duì)定位的元素。顯示(visibility使用該屬性可將網(wǎng)頁中的元素隱藏,共有繼承(inherit,繼承母體要素的可視性設(shè)置、可見(visible和隱藏(hidden等3種選擇。溢出(overflow,在確定了元素的高度和寬度后,如果元素的面積不能全部顯示元素中的內(nèi)容時(shí),該屬性做一日和尚撞一天鐘起作用了。其中共有可見(visible,擴(kuò)大面積以顯示所有內(nèi)容、隱藏(hidden,隱藏超出范圍的內(nèi)容、滾動(dòng)(scroll,在元素的右邊顯示一個(gè)滾動(dòng)條和自動(dòng)(auto,當(dāng)內(nèi)

11、容超出元素面積時(shí),顯示滾動(dòng)條等4種選擇。定位,當(dāng)為元素確定了絕對(duì)定位類型后,該組屬性決定元素在網(wǎng)頁中的具體位置。該組屬性包含4個(gè)子屬性,分別是左(屬性名為left,控制元素左邊的起始位置、上(屬性名為top,控制元素上面的起始位置、寬或高(與盒子類屬性面板中寬或高的屬性作用相同。剪輯(clip,當(dāng)元素被指定為絕對(duì)定位類型后,該屬性可以把元素區(qū)域切成各種形狀,但目前提供的只有方形一種。屬性值為rect(top right bottom left,即:rect(top right bottom left,屬性值的單位為任何一種長度單位。引用內(nèi)容引用內(nèi)容擴(kuò)展屬性共有兩部分:分頁,其中兩個(gè)屬性的作用是

12、為打印的頁面設(shè)置分頁符。之前(page-break-before;之后(page-break-after。視覺效果,其中兩個(gè)屬性的作用是為網(wǎng)頁中的元素施加特殊效果。光標(biāo)(cusor,可以指定在某個(gè)元素上要使用的光標(biāo)形狀,共有15種選擇方式,分別代表鼠標(biāo)在Windows操作系統(tǒng)中的各種形狀。另外它還可以指定指針圖標(biāo)的URL地址;濾鏡(fiter,可以為網(wǎng)頁中元素施加各種奇妙的濾鏡效果,共包含有16種濾鏡。字體屬性:(font大小font-size: x-large;(特大 xx-small;(極小 一般中文用不到,只要用數(shù)值就可以,單位:PX、PD樣式font-style: oblique;(偏

13、斜體 italic;(斜體 normal;(正常行高line-height: normal;(正常 單位:PX、PD、EM粗細(xì)font-weight: bold;(粗體 lighter;(細(xì)體 normal;(正常變體font-variant: small-caps;(小型大寫字母 normal;(正常大小寫text-transform: capitalize;(首字母大寫 uppercase;(大寫 lowercase;(小寫 none;(無修飾text-decoration: underline;(下劃線 overline;(上劃線 line-through;(刪除線 blink;(閃爍常

14、用字體:(font-family"Courier New", Courier, monospace, "Times New Roman", Times, serif, Arial, Helvetica, sans-serif, Verdana字體投影效果:filter:dropshadow(color=#FFFFFF, offx=1, offy=1, positive=1; 背景屬性:(background色彩background-color: #FFFFFF;圖片background-image: url(;重復(fù)background-repeat: n

15、o-repeat;滾動(dòng)background-attachment: fixed;(固定 scroll;(滾動(dòng)位置background-position: left(水平 top(垂直;簡寫方法background:#000 url(. repeat fixed left top;區(qū)塊屬性:(Block字間距l(xiāng)etter-spacing: normal; 數(shù)值對(duì)劉text-align: justify;(兩端對(duì)齊 left;(左對(duì)齊 right;(右對(duì)齊 center;(居中縮進(jìn)text-indent: 數(shù)值px;垂直對(duì)齊vertical-align: baseline;(基線 sub;(下標(biāo)

16、super;(下標(biāo) top; text-top; middle; bottom; text-bottom;詞間距word-spacing: normal; 數(shù)值空格white-space: pre;(保留 nowrap;(不換行顯示display:block;(塊 inline;(內(nèi)嵌 list-item;(列表項(xiàng) run-in;(追加部分 compact;(緊湊 marker;(標(biāo)記 table; inline-table; table-raw-group;table-header-group; table-footer-group; table-raw; table-column-grou

17、p;table-column; table-cell; table-caption;(表格標(biāo)題方框?qū)傩?(Boxwidth:; height:; float:; clear:both; margin:; padding:; 順序:上右下左邊框?qū)傩?(Borderborder-style: dotted;(點(diǎn)線 dashed;(虛線 solid; double;(雙線 groove;(槽線 ridge;(脊?fàn)?inset;(凹陷 outset;border-width:; 邊框?qū)挾萣order-color:#;簡寫方法border:width style color;列表屬性:(List-sty

18、le類型list-style-type: disc;(圓點(diǎn) circle;(圓圈 square;(方塊 decimal;(數(shù)字lower-roman;(小羅碼數(shù)字 upper-roman; lower-alpha; upper-alpha;位置list-style-position: outside;(外 inside;圖像list-style-image: url(.;定位屬性:(PositionPosition: absolute; relative; static;visibility: inherit; visible; hidden;overflow: visible; hidden

19、; scroll; auto;clip: rect(12px,auto,12px,auto (裁切css屬性代碼大全一CSS文字屬性:color : #999999; /*文字顏色*/font-family : 宋體,sans-serif; /*文字字體*/font-size : 9pt; /*文字大小*/font-style:itelic; /*文字斜體*/font-variant:small-caps; /*小字體*/letter-spacing : 1pt; /*字間距離*/line-height : 200%; /*設(shè)置行高*/font-weight:bold; /*文字粗體*/ver

20、tical-align:sub; /*下標(biāo)字*/vertical-align:super; /*上標(biāo)字*/text-decoration:line-through; /*加刪除線*/text-decoration:overline; /*加頂線*/text-decoration:underline; /*加下劃線*/text-decoration:none; /*刪除鏈接下劃線*/text-transform : capitalize; /*首字大寫*/text-transform : uppercase; /*英文大寫*/text-transform : lowercase; /*英文小寫*

21、/text-align:right; /*文字右對(duì)齊*/text-align:left; /*文字左對(duì)齊*/text-align:center; /*文字居中對(duì)齊*/text-align:justify; /*文字分散對(duì)齊*/vertical-align屬性vertical-align:top; /*垂直向上對(duì)齊*/vertical-align:bottom; /*垂直向下對(duì)齊*/vertical-align:middle; /*垂直居中對(duì)齊*/vertical-align:text-top; /*文字垂直向上對(duì)齊*/ vertical-align:text-bottom; /*文字垂直向下對(duì)

22、齊*/ layout-flow:vertical-ideographic /*文字豎著排列*/ 二、CSS邊框空白padding-top:10px; /*上邊框留空白*/padding-right:10px; /*右邊框留空白*/padding-bottom:10px; /*下邊框留空白*/ padding-left:10px; /*左邊框留空白三、CSS符號(hào)屬性:list-style-type:none; /*不編號(hào)*/list-style-type:decimal; /*阿拉伯?dāng)?shù)字*/list-style-type:lower-roman; /*小寫羅馬數(shù)字*/list-style-typ

23、e:upper-roman; /*大寫羅馬數(shù)字*/list-style-type:lower-alpha; /*小寫英文字母*/list-style-type:upper-alpha; /*大寫英文字母*/list-style-type:disc; /*實(shí)心圓形符號(hào)*/list-style-type:circle; /*空心圓形符號(hào)*/list-style-type:square; /*實(shí)心方形符號(hào)*/list-style-image:url(/dot.gif; /*圖片式符號(hào)*/list-style-position:outside; /*凸排*/list-style-position:in

24、side; /*縮進(jìn)*/四、CSS背景樣式:background-color:#F5E2EC; /*背景顏色*/background:transparent; /*透視背景*/background-image : url(/image/bg.gif; /*背景圖片*/ background-attachment : fixed; /*浮水印固定背景*/ background-repeat : repeat; /*重復(fù)排列-網(wǎng)頁默認(rèn)*/ background-repeat : no-repeat; /*不重復(fù)排列*/background-repeat : repeat-x; /*在x軸重復(fù)排列*

25、/ background-repeat : repeat-y; /*在y軸重復(fù)排列*/指定背景位置background-position : 90% 90%; /*背景圖片x與y軸的位置*/ background-position : top; /*向上對(duì)齊*/background-position : buttom; /*向下對(duì)齊*/background-position : left; /*向左對(duì)齊*/background-position : right; /*向右對(duì)齊*/background-position : center; /*居中對(duì)齊*/五、CSS連接屬性:a /*所有超鏈接*

26、/a:link /*超鏈接文字格式*/a:visited /*瀏覽過的鏈接文字格式*/a:active /*按下鏈接的格式*/a:hover /*鼠標(biāo)轉(zhuǎn)到鏈接*/鼠標(biāo)光標(biāo)樣式:鏈接手指CURSOR: hand十字體cursor:crosshair箭頭朝下cursor:s-resize十字箭頭cursor:move箭頭朝右cursor:move加一問號(hào)cursor:help箭頭朝左cursor:w-resize箭頭朝上cursor:n-resize箭頭朝右上cursor:ne-resize箭頭朝左上cursor:nw-resize文字I型cursor:text箭頭斜右下cursor:se-res

27、ize箭頭斜左下cursor:sw-resize漏斗cursor:wait光標(biāo)圖案(IE6p cursor:url("光標(biāo)文件名.cur",text;六、CSS框線一覽表:border-top : 1px solid #6699cc; /*上框線*/border-bottom : 1px solid #6699cc; /*下框線*/border-left : 1px solid #6699cc; /*左框線*/border-right : 1px solid #6699cc; /*右框線*/以上是建議書寫方式,但也可以使用常規(guī)的方式如下:border-top-color :

28、 #369 /*設(shè)置上框線top顏色*/border-top-width :1px /*設(shè)置上框線top寬度*/border-top-style : solid/*設(shè)置上框線top樣式*/其他框線樣式solid /*實(shí)線框*/dotted /*虛線框*/double /*雙線框*/groove /*立體內(nèi)凸框*/ridge /*立體浮雕框*/inset /*凹框*/outset /*凸框*/七、CSS表單運(yùn)用:文字方塊按鈕復(fù)選框選擇鈕多行文字方塊下拉式菜單選項(xiàng)1選項(xiàng)2八、CSS邊界樣式:margin-top:10px; /*上邊界*/margin-right:10px; /*右邊界值*/mar

29、gin-bottom:10px; /*下邊界值*/margin-left:10px; /*左邊界值*/CSS 屬性:字體樣式(Font Style序號(hào)中文說明標(biāo)記語法1 字體樣式font:font-style font-variant font-weight font-size font-family2 字體類型font-family:"字體1","字體2","字體3",.3 字體大小font-size:數(shù)值|inherit| medium| large| larger| x-large| xx-large| small| small

30、er| x-small| xx-small4 字體風(fēng)格font-style:inherit|italic|normal|oblique5 字體粗細(xì)font-weight:100-900|bold|bolder|lighter|normal;6 字體顏色color:數(shù)值;7 陰影顏色text-shadow:16位色值8 字體行高line-height:數(shù)值|inherit|normal;9 字間距l(xiāng)etter-spacing:數(shù)值|inherit|normal10 單詞間距word-spacing:數(shù)值|inherit|normal11 字體變形font-variant:inherit|norm

31、al|small-cps 12 英文轉(zhuǎn)換text-transform:inherit|none|capitalize|uppercase|lowercase13 字體變形font-size-adjust:inherit|none14 字體font-stretch:condensed|expanded|extra-condensed|extra-expanded|inherit|na rrower|normal|semi-condensed|semi-expanded|ultra-condensed|ultra-expanded|wider文本樣式(Text Style序號(hào)中文說明標(biāo)記語法1 行

32、間距l(xiāng)ine-height:數(shù)值|inherit|normal;2 文本修飾text-decoration:inherit|none|underline|overline|line-through|blink3 段首空格text-indent:數(shù)值|inherit4 水平對(duì)齊text-align:left|right|center|justify5 垂直對(duì)齊vertical-align:inherit|top|bottom|text-top|text-bottom|baseline|middle|sub|super 6 書寫方式writing-mode:lr-tb|tb-rl背景樣式序號(hào)中文說

33、明標(biāo)記語法1 背景顏色background-color:數(shù)值2 背景圖片background-image: url(URL|none3 背景重復(fù)background-repeat:inherit|no-repeat|repeat|repeat-x|repeat-y4 背景固定background-attachment:fixed|scroll5 背景定位background-position:數(shù)值|top|bottom|left|right|center6 背影樣式background:背景顏色|背景圖象|背景重復(fù)|背景附件|背景位置框架樣式(Box Style序號(hào)中文說明標(biāo)記語法1 邊界留白

34、margin:margin-top margin-right margin-bottom margin-left2 補(bǔ)白padding:padding-top padding-right padding-bottom padding-left3 邊框?qū)挾萣order-width:border-top-width border-right-widthborder-bottom-width border-left-width寬度值:thin|medium|thick|數(shù)值4 邊框顏色border-color:數(shù)值數(shù)值數(shù)值數(shù)值數(shù)值:分別代表top、right、bottom、left顏色值5 邊框風(fēng)格

35、border-style:none|hidden|inherit|dashed|solid|double|inset|outset|ridge|groov e6 邊框border:border-width border-style color上邊框border-top:border-top-width border-style color右邊框border-right:border-right-width border-style color下邊框border-bottom:border-bottom-width border-style color左邊框border-left:border-

36、left-width border-style color7 寬度width:長度|百分比| auto8 高度height:數(shù)值|auto9 漂浮float:left|right|none10 清除clear:none|left|right|both分類列表序號(hào)中文說明標(biāo)記語法1 控制顯示display:none|block|inline|list-item2 控制空白white-space:normal|pre|nowarp3 符號(hào)列表list-style-type:disc|circle|square|decimal|lower-roman|upper-roman|lower-alph a

37、|upper-alpha|none4 圖形列表list-style-image:URL5 位置列表list-style-position:inside|outside6 目錄列表list-style:目錄樣式類型|目錄樣式位置|url7 鼠標(biāo)形狀cursor:hand|crosshair|text|wait|move|help|e-resize|nw-resize|w-resize|s-resiz e|se-resize|sw-resize字體font-family: 字體名稱如果在font-family后加上多種字體的名稱,瀏覽器回按字體名稱的順序逐一在用戶的計(jì)算機(jī)里尋找已經(jīng)安裝的字體,一旦

38、遇到與要求的相匹配的字體,就按這種字體顯示網(wǎng)頁內(nèi)容,并停止搜索;如果不匹配就繼續(xù)搜索,直到找到為止,萬一樣式表里的所有字體都沒有安裝的話,瀏覽器就會(huì)用自己默認(rèn)的字體來替代顯示網(wǎng)頁的內(nèi)容。注意:·當(dāng)指定多種字體時(shí),用“,”分隔每種字體名稱。·當(dāng)字體名稱包含兩個(gè)以上分開的單詞時(shí),用“”把該字體名稱括起來。·當(dāng)樣式規(guī)則外已經(jīng)有“”時(shí),用代替“”。字體大小font-size: 字號(hào)參數(shù)字號(hào)的取值范圍:·以Point為單位:點(diǎn)單位在所有的瀏覽器和操作平臺(tái)上都適用·以Em為單位:指字母要素的尺寸,和Point相同距離·以Pixes為單位:像素可以

39、使用于所有的操作平臺(tái),但可能會(huì)因?yàn)闉g覽者的屏幕分辨率不同,而造成顯示上的效果差異·以in(英寸為單位·以cm(厘米為單位·以mm(毫米為單位·以pc(打印機(jī)的字體大小為單位·以ex(x-height為單位·smaller:比當(dāng)前文字的默認(rèn)大小更小一號(hào)·larger:比當(dāng)前文字的默認(rèn)大小更小大號(hào)·使用比例關(guān)系·xx-small·x-small·small·medium·large·x-large·xx-large字體風(fēng)格字體風(fēng)格只能控制各種斜體字的

40、顯示?；靖袷饺缦?font-style: 斜體字的名稱字體粗細(xì)字體粗細(xì)控制粗體字的顯示,取值范圍從數(shù)字100900,瀏覽器默認(rèn)的字體粗細(xì)為400。另外可以通過參數(shù)lighter和bolder使得字體在原有基礎(chǔ)上顯得更細(xì)或更粗些?；靖袷饺缦?font-weight: 字體粗細(xì)文字大小寫文字大小寫使網(wǎng)頁的設(shè)計(jì)者不用在輸入文字時(shí)就完成文字的大小寫,而可以在輸入完畢后,再根據(jù)需要對(duì)局部的文字設(shè)置大小寫。基本格式如下:text-transform: 參數(shù)參數(shù)取值范圍:·uppercase:所有文字大寫顯示·lowercase:所有文字小寫顯示·capitalize:每個(gè)

41、單詞的頭字母大寫顯示·none:不繼承母體的文字變形參數(shù)注意:繼承是指HTML的標(biāo)識(shí)符對(duì)于包含自己的標(biāo)識(shí)符的參數(shù)會(huì)繼承下來。文字修飾文字修飾的主要用途是改變?yōu)g覽器顯示文字鏈接時(shí)的下劃線。基本格式如下:text-decoration: 參數(shù)參數(shù)取值范圍:·underline:為文字加下劃線·overline:為文字加上劃線·line-through:為文字加刪除線·blink:使文字閃爍·none:不顯示上述任何效果單詞間距單詞間距指的是英文每個(gè)單詞之間的距離,不包括中文文字。基本格式如下:word-spacing: 間隔距離間隔距離的

42、取值:points、em、pixes、in、cm、mm、pc、ex、normal等。字母間距字母間距是指英文字母之間的距離,功能、用法,以及參數(shù)的設(shè)置和單詞間距很相似。基本格式如下:letter-spacing: 字母間距行距行距是指上下兩行基準(zhǔn)線之間的垂直距離。一般地說,英文五線格練習(xí)本,從上往下數(shù)的第三條橫線就是計(jì)算機(jī)所認(rèn)為的該行的基準(zhǔn)線?；靖袷饺缦?line-height: 行間距離行間距離取值:·不帶單位的數(shù)字:以1為基數(shù),相當(dāng)于比例關(guān)系的100%·帶長度單位的數(shù)字:以具體的單位為準(zhǔn)·比例關(guān)系注意:如果文字字體很大,而行距相對(duì)較小的話,可能會(huì)發(fā)生上下兩行

43、文字互相重疊的現(xiàn)象。文本水平對(duì)齊文本水平對(duì)齊可以控制文本的水平對(duì)齊,而且并不僅僅指文字內(nèi)容,也包括設(shè)置圖片、影像資料的對(duì)齊方式。基本格式如下:text-align: 參數(shù)參數(shù)的取值:·left:左對(duì)齊·right:右對(duì)齊·center:居中對(duì)齊·justify:相對(duì)左右對(duì)齊但需要注意的是,text-alight是塊級(jí)屬性,只能用于< p>、< blockquqte>、< ul>、< h1>< h6>等標(biāo)識(shí)符里。文本垂直對(duì)齊文本的垂直對(duì)齊應(yīng)當(dāng)是相對(duì)于文本母體的位置而言的,不是指文本在網(wǎng)頁里垂直對(duì)齊

44、。比如說,表格的單元格里有一段文本,那么對(duì)這段文本設(shè)置垂直居中就是針對(duì)單元格來衡量的,也就是說,文本將在單元格的正中顯示,而不是整個(gè)網(wǎng)頁的正中。基本格式如下:vertical-align: 參數(shù)參數(shù)取值:·top:頂對(duì)齊·bottom:底對(duì)齊·text-top:相對(duì)文本頂對(duì)齊·text-bottom:相對(duì)文本底對(duì)齊·baseline:基準(zhǔn)線對(duì)齊·middle:中心對(duì)齊·sub:以下標(biāo)的形式顯示·super:以上標(biāo)的形式顯示文本縮進(jìn)文本縮進(jìn)可以使文本在相對(duì)默認(rèn)值較窄的區(qū)域里顯示,主要用于中文板式的首行縮進(jìn),或是為大段

45、的引用文本和備注做成縮進(jìn)的格式。基本格式如下:text-indent: 縮進(jìn)距離縮進(jìn)距離取值:·帶長度單位的數(shù)字·比例關(guān)系但是需要注意的是,在使用比例關(guān)系的時(shí)候,有人會(huì)認(rèn)為瀏覽器默認(rèn)的比例是相對(duì)段落的寬度而言的,其實(shí)事實(shí)并非如此,整個(gè)瀏覽器的窗口才是瀏覽器所默認(rèn)的參照物。另外,text-indent是塊級(jí)屬性,只能用于< p>、< blockquqte>、< ul>、< h1>< h6>等標(biāo)識(shí)符里。顏色屬性基本格式如下:color: 參數(shù)顏色參數(shù)取值范圍:·以RGB值表示·以16進(jìn)制(hex的色

46、彩值表示·以默認(rèn)顏色的英文名稱表示以默認(rèn)顏色的英文名稱表示無疑是最為方便的,但由于預(yù)定義的顏色種類太少,所以更多的網(wǎng)頁設(shè)計(jì)者喜歡用RGB的方式。RGB方式的好處很多,不但可以用數(shù)字的形式精確地表示顏色,而且也是很多圖像制作軟件(如Photoshop里默認(rèn)使用的規(guī)范,這樣一來就為圖片和網(wǎng)頁更好地結(jié)合打下了堅(jiān)實(shí)的基礎(chǔ)。背景顏色在HTML當(dāng)中,要為某個(gè)對(duì)象加上背景色只有一種辦法,那就是先做一個(gè)表格,在表格中設(shè)置完背景色,再把對(duì)象放進(jìn)單元格。這樣做比較麻煩,不但代碼較多,還要為表格的大小和定位傷些腦筋。現(xiàn)在用CSS就可以輕松地直接搞定了,而且對(duì)象的范圍很廣,可以是一段文字,也可以只是一個(gè)單詞

47、或一個(gè)字母?；靖袷饺缦?background-color: 參數(shù)參數(shù)取值和顏色屬性一樣。背景圖片基本格式如下:background-image: url(URLURL就是背景圖片的存放路徑。如果用“none”來代替背景圖片的存放路徑,將什么也不顯示。背景圖片重復(fù)背景圖片重復(fù)控制的是背景圖片平鋪與否,也就是說,結(jié)合背景定位的控制可以在網(wǎng)頁上的某處單獨(dú)顯示一幅背景圖片?；靖袷饺缦?background-repeat: 參數(shù)參數(shù)取值范圍:·no-repeat:不重復(fù)平鋪背景圖片·repeat-x:使圖片只在水平方向上平鋪·repeat-y:使圖片只在垂直方向上平鋪如

48、果不指定背景圖片重復(fù)屬性,瀏覽器默認(rèn)的是背景圖片向水平、垂直兩個(gè)方向上平鋪。背景圖片固定背景圖片固定控制背景圖片是否隨網(wǎng)頁的滾動(dòng)而滾動(dòng)。如果不設(shè)置背景圖片固定屬性,瀏覽器默認(rèn)背景圖片隨網(wǎng)頁的滾動(dòng)而滾動(dòng)。為了避免過于花哨的背景圖片在滾動(dòng)時(shí)傷害瀏覽者的視力,所以可以解除背景圖片和文字內(nèi)容的捆綁,該為和瀏覽器窗口捆綁。基本格式如下:background-attachment: 參數(shù)參數(shù)取值范圍:·fixed:網(wǎng)頁滾動(dòng)時(shí),背景圖片相對(duì)于瀏覽器的窗口而言,固定不動(dòng)·scroll:網(wǎng)頁滾動(dòng)時(shí),背景圖片相對(duì)于瀏覽器的窗口而言,一起滾動(dòng)背景定位背景定位用于控制背景圖片在網(wǎng)頁中顯示的位置。基

49、本格式如下:background-position: 參數(shù)表參數(shù)取值范圍:·帶長度單位的數(shù)字參數(shù)·top:相對(duì)前景對(duì)象頂對(duì)齊·bottom:相對(duì)前景對(duì)象底對(duì)齊·left:相對(duì)前景對(duì)象左對(duì)齊·right:相對(duì)前景對(duì)象右對(duì)齊·center:相對(duì)前景對(duì)象中心對(duì)齊·比例關(guān)系參數(shù)中的center如果用于另外一個(gè)參數(shù)的前面,表示水平居中;如果用于另外一個(gè)參數(shù)的后面,表示垂直居中。列表符號(hào)列表符號(hào)是指顯示于每一個(gè)列表項(xiàng)目前的符號(hào)標(biāo)識(shí)。基本格式如下:list-style-type:參數(shù)參數(shù)取值范圍:·disc:圓形·ci

50、rcle:空心圓·square:方塊·decimal:十進(jìn)制數(shù)字·lower-roman:小寫羅馬數(shù)字·upper-roman:大寫羅馬數(shù)字·lower-alpha:小寫希臘字母·upper-alpha:大寫希臘字母·none:無符號(hào)顯示參數(shù)中的disc是默認(rèn)選項(xiàng)。圖形符號(hào)圖形符號(hào)指原來列表的項(xiàng)目符號(hào)將可以使用圖形來代替?；靖袷饺缦?list-style-image:URLURL是用來代替項(xiàng)目符號(hào)的圖形文件的地址,可以使用相對(duì)地址或絕對(duì)地址。列表位置列表位置描述列表在何處顯示。基本格式如下:list-style-posit

51、ion:參數(shù)參數(shù)取值范圍:·inside:在BOX模型內(nèi)部顯示·outside:在BOX模型外部顯示這里又出現(xiàn)了一個(gè)新的概念:BOX模型。BOX是指一種容器,包含了應(yīng)用樣式規(guī)則的對(duì)象,具體介紹將在后文中給出。在網(wǎng)頁上,鼠標(biāo)平時(shí)呈箭頭形,指向鏈接時(shí)成為手形,等待網(wǎng)頁下載時(shí)成為沙漏形這似乎是約定俗成的。雖然這樣的設(shè)計(jì)能使我們知道瀏覽器現(xiàn)在的狀態(tài)或是可以做什么,但這些好像還不能完全地滿足我們的需要。就拿鏈接來說,可以是指向一個(gè)幫助文件,也可以是向前進(jìn)一頁或是向后退一頁,針對(duì)如此多的功能光靠千篇一律的手形鼠標(biāo)是不能說明問題的。值得慶幸的是,CSS提供了多達(dá)13種的鼠標(biāo)形狀,供我們選

52、擇?；靖袷饺缦?cursor:鼠標(biāo)形狀參數(shù)CSS鼠標(biāo)形狀參數(shù)表:CSS代碼鼠標(biāo)形狀style="cursor:hand"手形style="cursor:crosshair"十字形style="cursor:text"文本形style="cursor:wait"沙漏形style="cursor:move"十字箭頭形style="cursor:help"問號(hào)形style="cursor:e-resize"右箭頭形style="cursor:n-re

53、size"上箭頭形style="cursor:nw-resize"左上箭頭形style="cursor:w-resize"左箭頭形style="cursor:s-resize"下箭頭形style="cursor:se-resize"右下箭頭形style="cursor:sw-resize"左下箭頭形邊框空白(MARGIN如圖所示,位于BOX模型的最外層,包括四項(xiàng)屬性。格式分別如下:·margin-top:頂部空白距離·margin-right:右邊空白距離·

54、;margin-bottom:底部空白距離·margin-left:左邊空白距離空白的距離可以用帶長度單位的數(shù)字表示。如果使用上述屬性的簡化方式margin,可以在其后連續(xù)加上四個(gè)帶長度單位的數(shù)字,來分別表示margin-top、margin-right、margin-bottom、margin-left,每個(gè)數(shù)字中間要用空格分隔。對(duì)象邊框(BORDER如圖所示,位于邊框空白和對(duì)象空隙之間,包括了七項(xiàng)屬性。格式分別如下:·border-top:頂邊框?qū)挾?#183;border-right:右邊框?qū)挾?#183;border-bottom:底邊框?qū)挾?#183;border

55、-left:左邊框?qū)挾?#183;border-width:所有邊框?qū)挾?#183;border-color:邊框顏色·border-style:邊框樣式參數(shù)其中border-width可以一次性設(shè)置所有的邊框?qū)挾?border-color同時(shí)設(shè)置四面邊框的顏色時(shí),可以連續(xù)寫上四種顏色,并用空格分隔。上述連續(xù)設(shè)置的邊框都是按border-top、border-right、border-bottom、border-left的順序。Border-style相對(duì)別的屬性而言稍稍復(fù)雜些,因?yàn)樗€包括了多個(gè)邊框樣式的參數(shù):·none:無邊框。·dotted:邊框?yàn)辄c(diǎn)線。&#

56、183;dashed:邊框?yàn)殚L短線。·solid:邊框?yàn)閷?shí)線。·double:邊框?yàn)殡p線。·groove:根據(jù)color屬性顯示不同效果的3D邊框·ridge:根據(jù)color屬性顯示不同效果的3D邊框·inset:根據(jù)color屬性顯示不同效果的3D邊框·outset:根據(jù)color屬性顯示不同效果的3D邊框?qū)ο箝g隙(PADDING如圖所示,位于對(duì)象邊框和對(duì)象之間,包括了四項(xiàng)屬性?；靖袷饺缦?#183;padding-top:頂部間隙·padding-right:右邊間隙·padding-bottom:底部間隙&

57、#183;padding-left:左邊間隙和MARGIN類似,PADDING也可以用padding一次性設(shè)置所有的對(duì)象間隙,格式也和MARGIN相似,不再一一列舉了。顯示控制樣式基本格式如下:display: 參數(shù)參數(shù)取值范圍:·block(默認(rèn):在對(duì)象前后都換行·inline:在對(duì)象前后都不換行·list-item:在對(duì)象前后都換行,增加了項(xiàng)目符號(hào)·none:無顯示空白控制樣式基本格式如下:空白屬性決定如何處理元素內(nèi)的空格。white-space: 參數(shù)參數(shù)取值范圍:normal:把多個(gè)空格替換為一個(gè)來顯示pre:忠實(shí)地按輸入顯示空格nowrap:禁

58、止換行CSS(Cascading Stylesheets,層疊樣式表是一種制作網(wǎng)頁的新技術(shù),現(xiàn)在已經(jīng)為大多數(shù)的瀏覽器所支持,成為網(wǎng)頁設(shè)計(jì)必不可少的工具之一。使用CSS能夠簡化網(wǎng)頁的格式代碼,加快下載顯示的速度,也減少了需要上傳的代碼數(shù)量,大大減少了重復(fù)勞動(dòng)的工作量。尤其是當(dāng)你面對(duì)的是有數(shù)百個(gè)網(wǎng)頁的站點(diǎn)時(shí),CSS 簡直象是神對(duì)我們的恩賜!_前言CSS(Cascading Stylesheets,層疊樣式表是一種制作網(wǎng)頁的新技術(shù),現(xiàn)在已經(jīng)為大多數(shù)的瀏覽器所支持,成為網(wǎng)頁設(shè)計(jì)必不可少的工具之一。W3C(The World Wide Web Consortium把動(dòng)態(tài)HTML(Dynamic HTML分為三個(gè)部分來實(shí)現(xiàn):腳本語言(包括JavaScript、Vbscript等、支持動(dòng)態(tài)效果的瀏覽器(包括Internet Explorer、Netscape Navigator等和CSS樣式表。一.層疊樣式表的特點(diǎn)且不說過去的網(wǎng)頁缺少動(dòng)感,就是在網(wǎng)頁內(nèi)容的排版布局上也有很多困難,如果不是專業(yè)人員或特別有耐心的人,很難讓網(wǎng)頁按自己的構(gòu)