CSS屬代碼大全

簡介：一 CSS文字屬性：color : #999999; /*文字顏色*/font-family : 宋體,sans-serif; /*文字字型*/ font-size : 9pt; /*文字大小*/ font-style:itelic; /*文字斜體*/ font-variant:small-caps; /*小字型*/ letter-s ... 關鍵字：css一 CSS文字屬性：
color : #999999; /*文字顏色*/
font-family : 宋體,sans-serif; /*文字字型*/
font-size : 9pt; /*文字大小*/
font-style:itelic; /*文字斜體*/
font-variant:small-caps; /*小字型*/
letter-spacing : 1pt; /*字間距離*/
line-height : 200%; /*設定行高*/
font-weight:bold; /*文字粗體*/
vertical-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; /*英文小寫*/
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; /*文字垂直向下對齊*/ 
http://www.dw8.org dw專業網站
二、CSS邊框空白
padding-top:10px; /*上邊框留空白*/
padding-right:10px; /*右邊框留空白*/
padding-bottom:10px; /*下邊框留空白*/
padding-left:10px; /*左邊框留空白
三、CSS符號屬性：
list-style-type:none; /*不編號*/
list-style-type:decimal; /*阿拉伯數字*/
list-style-type:lower-roman; /*小寫羅馬數字*/
list-style-type:upper-roman; /*大寫羅馬數字*/
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:inside; /*縮排*/
四、CSS背景樣式：
background-color:#F5E2EC; /*背景顏色*/ 
http://www.dw8.org Dreamweaver cs3 專業網站
background:transparent; /*透視背景*/
background-image : url(/image/bg.gif); /*背景圖片*/
background-attachment : fixed; /*浮水印固定背景*/
background-repeat : repeat; /*重複排列-網頁預設*/
background-repeat : no-repeat; /*不重複排列*/
background-repeat : repeat-x; /*在x軸重複排列*/
background-repeat : repeat-y; /*在y軸重複排列*/
指定背景位置
background-position : 90% 90%; /*背景圖片x與y軸的位置*/
background-position : top; /*向上對齊*/
background-position : buttom; /*向下對齊*/
background-position : left; /*向靠左對齊*/
background-position : right; /*向靠右對齊*/
background-position : center; /*置中對齊*/
五、CSS串連屬性：
a /*所有超連結*/
a:link /*超連結顯示文字格式*/  http://www.dw8.org Dreamweaver 專業網站
a:visited /*瀏覽過的連結文字格式*/
a:active /*按下連結的格式*/
a:hover /*滑鼠轉到連結*/
滑鼠游標樣式：
連結手指 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-resize
箭頭斜左下 cursor:sw-resize
漏鬥 cursor:wait
游標圖案(IE6)  p {cursor:url("游標檔案名稱.cur"),text;}
六、CSS框線一覽表：
border-top : 1px solid #6699cc; /*上框線*/
border-bottom : 1px solid #6699cc; /*下框線*/
border-left : 1px solid #6699cc; /*左框線*/  http://www.dw8.org Dreamweaver 專業網站
border-right : 1px solid #6699cc; /*右框線*/
以上是建議書寫方式,但也可以使用常規的方式 如下:
border-top-color : #369 /*設定上框線top顏色*/
border-top-width :1px /*設定上框線top寬度*/
border-top-style : solid/*設定上框線top樣式*/
其他框線樣式
solid /*實線框*/
dotted /*虛線框*/
double /*雙線框*/
groove /*立體內凸框*/
ridge /*立體浮雕框*/
inset /*凹框*/
outset /*凸框*/
七、CSS表單運用：
文字方塊 
按鈕 
複選框 
選擇鈕 
多行文字方塊 
下拉式菜單 選項1選項2
八、CSS邊界樣式：
margin-top:10px; /*上邊界*/
margin-right:10px; /*右邊界值*/
margin-bottom:10px; /*下邊界值*/
margin-left:10px; /*左邊界值*/ [背景]屬性共有六項：

「背景顏色」（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種選擇。

[類型]屬性共有九項：

「字型」（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不支援文字閃爍。

 

[區塊]屬性共有六項：

「單詞間距」（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種選擇。

 

[邊框]的屬性有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種。

 

「盒子」屬性共有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控制左留白的寬度。 

 

[列表]屬性共有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）兩種選擇。

 

[定位]屬性共有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)，屬性值的單位為任何一種長度單位。 

 

[擴充]屬性共有兩部分：

「分頁」，其中兩個屬性的作用是為列印的版面設定分頁符。 「之前」（page-break-before）；「之後」（page-break-after）。
「視覺效果」，其中兩個屬性的作用是為網頁中的元素施加特殊效果。 「游標」（cusor），可以指定在某個元素上要使用的游標形狀，共有15種選擇方式，分別代表滑鼠在Windows作業系統中的各種形狀。另外它還可以指定指標表徵圖的URL地址；「濾鏡」（fiter），可以為網頁中元素施加各種奇妙的濾鏡效果，共包含有16種濾鏡。