CSS屬性解析大全
2024-07-11 08:40:48
供稿：網友
“類型”屬性共有九項：
“字體”（font-family），設定時，需考慮瀏覽器中有無該字體。
“大小”（font-size），注意度量單位。
“粗細”（font-weight），除了normal（正常）、bold（粗體）、bolder（特粗）、lighter（細體）外，還有9種以像素為度量為單位的設置方式。
“樣式”（font-style），也就是字型。
“行高”（line-height），就是行距。注意，行距只能以是字體大小值為依據。
“變形”（font-variant），可以將正常文字一半尺寸后大寫顯示，但IE目前不支持這項屬性。
“大小寫”（text-transform），這項屬性能輕而易舉地控制字母大小寫，有首字大寫（capitalize、大寫（uppercase）、小寫（lowercase）和無（none，使所有繼承文字和變形參數被忽略，文字將以正常形式顯示）等4種。
“修飾”（text-decoration），用于控制鏈接文本的顯示形態，有下劃線（underline）、無下劃線（overline）、刪除線（line-through）、閃爍（blink）和無（none，使上述效果均不會發生）等5種修飾方式。但IE4不支持文字閃爍。
12．4．2 背景（Top）
“背景”屬性共有六項：
“背景顏色”（background-color），設置背景顏色。
“背景圖像”（background-image），設置網頁背景圖像。
“重復”（background-repeat），控制背景圖像的平鋪方式，有不重復（no-repeat）、重復（repeat，沿水平、垂直方向平鋪）、橫向重復（repeat-X，圖像沿水平方向平鋪）和縱向重復（repeat-Y，沿圖像垂直方向平鋪）等4種選擇。
“附加”（background-attachment），用于控制背景圖像是否會隨頁面的滾動而一起滾動。有固定（fixd，文字滾動時，背景圖像保質固定）和滾動（scroll，背景圖像隨文字內容一起滾動）兩種選擇。
“水平位置”/“垂直位置”（background-position），確定背景圖像的水平、垂直位置
。共有左對齊（left）、右對齊（right）、頂部（top）、底部（bottom）、居中（center）和值（自定義背景圖像的起點位置，可使用戶對背景圖像的位置做出更精確的控制）等6種選擇。
12．4．3 區塊（Top）
“區塊”屬性共有六項：
“單詞間距”（word-spacing），主要用于控制文字間相隔的距離。有正常（normal）和值（自定義間隔值）兩種選擇方式。當選擇值時，可用的單位有英寸（in）、厘米（cm）、毫米（mm）、點數(pt）、12pt字(pc）、字體高（em）、字體x有高（ex）像素（px）。
“字母間距”（letter-spacing），其作用與字符間距類似，也有正常（normal）和值（自定義間隔值）兩種選擇方式。
“垂直對齊”（vertical-align），控制文字或圖像相對于其母體元素的垂直位置。如將一個2×3像素的GIF圖像同其母體元素文字的頂部垂直對齊，則該GIF圖像將在該行文字的頂部顯示。共有基線（baseline，將元素的基準線同母體元素的基準線對齊）、下標（sub，將元素以下標的形式顯示）,上標（super，將元素以上標的形式顯示）、頂部（top，將元素頂部同最高的母體元素對齊）、文本頂對齊（text-top，將元素的頂部同母體元素文字的頂部對齊）、中線對齊（middle，將元素的中點同母體元素的中點對齊）、底部（bottom，將元素的底部同最低的母體元素對齊）及值（自定義）等9種選擇。
“文本對齊”（text-align），設置塊的水平對齊方式。共有左對齊（left）、右對齊（right）、居中（center）和均分（justify）等4種選擇。
“文字縮進”（text-indent），控制塊的縮進程度。
“空白間距”（white-space），在HTML中，空格是被省略的；在CSS中則使用屬性（white-space）控制空格的輸入。共有正常（normal）、保留（pre）和不換行（nowrap）等3種選擇。
12．4．4 盒子（Top）
“盒子”屬性共有6項：
“寬”（width），確定盒子本身的寬度，可以使盒子的寬度不依靠它所包含的內容多少。
“高”（height），確定盒子本身的高度。
“浮動”（float），設置塊元素的浮動效果。
“清除”（clear），用于清除設置的浮動效果。
“邊距”（margin），控制圍繞邊框 的邊距大小。其中包含4個屬性：margin-top控制上邊距的寬度、margin-right控制右邊距的寬度、margin-bottom控制下邊距的寬度、margin-left控制左邊距的寬度。
“邊界”（padding），確定圍繞塊元素的空格填充數量，其中包含4個屬性“padding-top控制上留白的寬度、padding-right控制右留白的寬度、padding-bottom控制下留白寬度、padding-left控制左留白的寬度。
12．4．5 邊框（Top）
“邊框”的屬性有3項：
“寬”（border-width），控制邊框的寬度，其中分為4個屬性：border-top-width頂邊框的寬度、border-right-width右邊框的寬度、border-bottom-width底邊框的寬度、border-left-width左邊框的寬度。
“顏色”（border-color），設置各邊框的顏色。若要使邊框的四邊顯示不同的顏色，可在設置中分別列出。如，
p{: #ff0000 #009900 #0000ff #55cc00}
瀏覽器將四種顏色依次理解為：上邊框、右邊框、底邊框和左邊框（自上開始順時針）。
“樣式”（border-style），設定邊框的樣式，共有無（none）、虛線（dotted）、點劃線線（dotted）、點劃線（dashed）、實線（solid）、雙線（double）、槽狀（grove）、脊狀（ridge）、凹陷（inset）和凸起（outset）等9種。
12．4．6 列表（Top）
“列表”屬性共有3項：
“類型”（list-style-type），確定列表每一項前使用的符號，共有圓點（disc）、圓圈（circle）、方形（square）、數字（decimal）、小寫羅馬數字（lower-roman）、大寫羅馬數字（upper-roman）、小寫字母（lower-alpha）和大寫字母（upper－alpha）等8種。
“項目圖像”（list-style-image），其作用是將列表前面的符號換為圖形。
“位置”（list-style-position），用于描述列表位置，有內（outside）和外（inside）兩種選擇。
12．4．7 定位（Top）
“定位”屬性共有6項：
“類型”（position），用于確定定位的類型，共有絕對（absolute）、相對（relative）和靜態（static）等3種選擇。
“Z軸”（z-index），用于控制網頁中塊元素的疊放順序，可為元素設置重疊效果。該屬性的參數值使用純整數，值為0時，元素在最下層，適用于絕對定位或相對定位的元素。
“顯示”（visibility）使用該屬性可將網頁中的元素隱藏，共有繼承（inherit，繼承母體要素的可視性設置）、可見（visible）和隱藏（hidden）等3種選擇。
“溢出”（overflow），在確定了元素的高度和寬度后，如果元素的面積不能全部顯示元素中的內容時，該屬性做一日和尚撞一天鐘起作用了。其中共有可見（visible，擴大面積以顯示所有內容）、隱藏（hidden，隱藏超出范圍的內容）、滾動（scroll，在元素的右邊顯示一個滾動條）和自動（auto，當內容超出元素面積時，顯示滾動條）等4種選擇。
“定位”，當為元素確定了絕對定位類型后，該組屬性決定元素在網頁中的具體位置。該組屬性包含4個子屬性，分別是“左”（屬性名為“left”，控制元素左邊的起始位置）、“上”（屬性名為“top”，控制元素上面的起始位置）、“寬”或“高”（與“盒子”類屬性面板中“寬”或“高”的屬性作用相同）。
“剪輯”（clip），當元素被指定為絕對定位類型后，該屬性可以把元素區域切成各種形狀，但目前提供的只有方形一種。屬性值為rect(top right bottom left)，即：
rect(top right bottom left)，屬性值的單位為任何一種長度單位。
12．4．8 擴展（Top）
“擴展”屬性共有兩部分：
“分頁”，其中兩個屬性的作用是為打印的頁面設置分頁符。“之前”（page-break-before）；“之后”（page-break-after）。
“視覺效果”，其中兩個屬性的作用是為網頁中的元素施加特殊效果。“光標”（cusor），可以指定在某個元素上要使用的光標形狀，共有15種選擇方式，分別代表鼠標在Windows操作系統中的各種形狀。另外它還可以指定指針圖標的URL地址；“濾鏡”（fiter），可以為網頁中元素施加各種奇妙的濾鏡效果，共包含有16種濾鏡。
