css常用的基本屬性

1、背景屬性共有六項:背景顏色(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,用于控制背景圖像是否會隨頁面的滾動而一起滾動。有固定(fixd,文字滾動時,背景圖像保質(zhì)固定和滾動(scroll,背景圖像隨文字內(nèi)容一起滾動兩種選擇。水平位置/垂直位置

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

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

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

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

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

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

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

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

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

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

12、為打印的頁面設(shè)置分頁符。之前(page-break-before;之后(page-break-after。視覺效果,其中兩個屬性的作用是為網(wǎng)頁中的元素施加特殊效果。光標(cusor,可以指定在某個元素上要使用的光標形狀,共有15種選擇方式,分別代表鼠標在Windows操作系統(tǒng)中的各種形狀。另外它還可以指定指針圖標的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粗細font-weight: bold;(粗體 lighter;(細體 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;滾動background-attachment: fixed;(固定 scroll;(滾動位置background-position: left(水平 top(垂直;簡寫方法background:#000 url(. repeat fixed left top;區(qū)塊屬性:(Block字間距l(xiāng)etter-spacing: normal; 數(shù)值對劉text-align: justify;(兩端對齊 left;(左對齊 right;(右對齊 center;(居中縮進text-indent: 數(shù)值px;垂直對齊vertical-align: baseline;(基線 sub;(下標

16、super;(下標 top; text-top; middle; bottom; text-bottom;詞間距word-spacing: normal; 數(shù)值空格white-space: pre;(保留 nowrap;(不換行顯示display:block;(塊 inline;(內(nèi)嵌 list-item;(列表項 run-in;(追加部分 compact;(緊湊 marker;(標記 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;(表格標題方框?qū)傩?(Boxwidth:; height:; float:; clear:both; margin:; padding:; 順序:上右下左邊框?qū)傩?(Borderborder-style: dotted;(點線 dashed;(虛線 solid; double;(雙線 groove;(槽線 ridge;(脊狀 inset;(凹陷 outset;border-width:; 邊框?qū)挾萣order-color:#;簡寫方法border:width style color;列表屬性:(List-sty

18、le類型list-style-type: disc;(圓點 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; /*下標字*/vertical-align:super; /*上標字*/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; /*文字右對齊*/text-align:left; /*文字左對齊*/text-align:center; /*文字居中對齊*/text-align:justify; /*文字分散對齊*/vertical-align屬性vertical-align:top; /*垂直向上對齊*/vertical-align:bottom; /*垂直向下對齊*/vertical-align:middle; /*垂直居中對齊*/vertical-align:text-top; /*文字垂直向上對齊*/ vertical-align:text-bottom; /*文字垂直向下對

22、齊*/ layout-flow:vertical-ideographic /*文字豎著排列*/ 二、CSS邊框空白padding-top:10px; /*上邊框留空白*/padding-right:10px; /*右邊框留空白*/padding-bottom:10px; /*下邊框留空白*/ padding-left:10px; /*左邊框留空白三、CSS符號屬性:list-style-type:none; /*不編號*/list-style-type:decimal; /*阿拉伯數(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; /*實心圓形符號*/list-style-type:circle; /*空心圓形符號*/list-style-type:square; /*實心方形符號*/list-style-image:url(/dot.gif; /*圖片式符號*/list-style-position:outside; /*凸排*/list-style-position:in

24、side; /*縮進*/四、CSS背景樣式:background-color:#F5E2EC; /*背景顏色*/background:transparent; /*透視背景*/background-image : url(/image/bg.gif; /*背景圖片*/ background-attachment : fixed; /*浮水印固定背景*/ background-repeat : repeat; /*重復(fù)排列-網(wǎng)頁默認*/ 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; /*向上對齊*/background-position : buttom; /*向下對齊*/background-position : left; /*向左對齊*/background-position : right; /*向右對齊*/background-position : center; /*居中對齊*/五、CSS連接屬性:a /*所有超鏈接*

26、/a:link /*超鏈接文字格式*/a:visited /*瀏覽過的鏈接文字格式*/a:active /*按下鏈接的格式*/a:hover /*鼠標轉(zhuǎn)到鏈接*/鼠標光標樣式:鏈接手指CURSOR: hand十字體cursor:crosshair箭頭朝下cursor:s-resize十字箭頭cursor:move箭頭朝右cursor:move加一問號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光標圖案(IE6p cursor:url("光標文件名.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 /*實線框*/dotted /*虛線框*/double /*雙線框*/groove /*立體內(nèi)凸框*/ridge /*立體浮雕框*/inset /*凹框*/outset /*凸框*/七、CSS表單運用:文字方塊按鈕復(fù)選框選擇鈕多行文字方塊下拉式菜單選項1選項2八、CSS邊界樣式:margin-top:10px; /*上邊界*/margin-right:10px; /*右邊界值*/mar

29、gin-bottom:10px; /*下邊界值*/margin-left:10px; /*左邊界值*/CSS 屬性:字體樣式(Font Style序號中文說明標記語法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 字體粗細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序號中文說明標記語法1 行

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

33、明標記語法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序號中文說明標記語法1 邊界留白

34、margin:margin-top margin-right margin-bottom margin-left2 補白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分類列表序號中文說明標記語法1 控制顯示display:none|block|inline|list-item2 控制空白white-space:normal|pre|nowarp3 符號列表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 鼠標形狀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īng)安裝的字體,一旦

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

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

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

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

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

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

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

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

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

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

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

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

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

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

52、擇?；靖袷饺缦?cursor:鼠標形狀參數(shù)CSS鼠標形狀參數(shù)表:CSS代碼鼠標形狀style="cursor:hand"手形style="cursor:crosshair"十字形style="cursor:text"文本形style="cursor:wait"沙漏形style="cursor:move"十字箭頭形style="cursor:help"問號形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模型的最外層,包括四項屬性。格式分別如下:·margin-top:頂部空白距離·margin-right:右邊空白距離·

54、;margin-bottom:底部空白距離·margin-left:左邊空白距離空白的距離可以用帶長度單位的數(shù)字表示。如果使用上述屬性的簡化方式margin,可以在其后連續(xù)加上四個帶長度單位的數(shù)字,來分別表示margin-top、margin-right、margin-bottom、margin-left,每個數(shù)字中間要用空格分隔。對象邊框(BORDER如圖所示,位于邊框空白和對象空隙之間,包括了七項屬性。格式分別如下:·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è)置四面邊框的顏色時,可以連續(xù)寫上四種顏色,并用空格分隔。上述連續(xù)設(shè)置的邊框都是按border-top、border-right、border-bottom、border-left的順序。Border-style相對別的屬性而言稍稍復(fù)雜些,因為它還包括了多個邊框樣式的參數(shù):·none:無邊框。·dotted:邊框為點線。&#

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

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

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