css代碼通常資料全套匯編

1、css屬性代碼大全一 CSS文字屬性：color : #999999; /*文字顏色 */font-family :宋體,sans-serif; /* 文字字體 */font-size : 9pt; /* 文字大小 */font-style:itelic; /*文字斜體 */letter-s pacing : 1pt; /* lin e-height : 200%; /* fon t-weight:bold; /*fon t-varia nt:small-ca ps; /*小字體*/字間距離*/設(shè)置行高*/文字粗體*/下標(biāo)字*/上標(biāo)字*/加刪除線*/vertical-alig n:sub; /

2、*vertical-alig n:super; /* text-decoratio n:li ne-through; /*加下劃線*/text-decoratio n: overl ine; /*力卩頂線 */ text-decoratio n:un derli ne; /*text-decoration:none; /* 刪除鏈接下劃線 */首字大寫*/英文大寫*/英文小寫*/text-tra nsform : cap italize; /* text-tra nsform : upp ercase; /* text-tra nsform : lowercase; /*text-align:

3、right; /*文字右對齊 */文字居中對齊*/文字分散對齊*/垂直向上對齊*/垂直向下對齊*/垂直居中對齊*/文字垂直向上對齊*/文字垂直向下對齊*/vertical-alig n:to p; /*text-align:left; /* 文字左對齊 */ text-alig n:cen ter; /* text-alig n:justify; /* vertical-alig n 屬性vertical-alig n:bottom; /*vertical-alig n:middle; /* vertical-alig n:text-to p; /*vertical-alig n:text-b

4、ottom; /*二、CSS邊框空白padding-top:10px; /*上邊框留空白 */padding-right:10px; /*右邊框留空白 */padding-bottom:10px; /*下邊框留空白 */paddi ng-left:10 px; /*左邊框留空白三、CSS符號屬性：list-style-t ype:none; /*不編號 */list-style-type:decimal; /*阿拉伯?dāng)?shù)字 */小寫羅馬數(shù)字*/大寫羅馬數(shù)字*/小寫英文字母*/list-style-t yp e:lower-roma n; /* list-style-t yp e:u pp er-

5、roma n; /* list-style-t yp e:lower-al pha; /*大寫英文字母*/list-style-ty pe:upp er-al pha; /*list-style-type:disc; /* 實(shí)心圓形符號 */ list-style-type:circle; /*空心圓形符號 */list-style-type:square; /*實(shí)心方形符號 */圖片式符號*/凸排*/縮進(jìn)*/list-style-image:url(/dot.gif); /* list-style-p ositi on: outside; /* list-style-p ositi on:i

6、 nside; /*四、CSS背景樣式：background-color:#F5E2EC; /*背景顏色 */background:transparent; /*透視背景 */background-image : url(/image/bg.gif); /*背景圖片 */background-attachment : fixed; /*浮水印固定背景 */backgrou nd-re peat : rep eat; /*重復(fù)排列-網(wǎng)頁默認(rèn) */不重復(fù)排列*/在x軸重復(fù)排列*/在y軸重復(fù)排列*/背景圖片x與y軸的位置*/backgro un d-re peat : no-rep eat; /*

7、backgro un d-re peat : rep eat-x; /* backgro un d-re peat : rep eat-y; /* 指定背景位置backgrou nd-p osition : 90% 90%; /*backgro und-po siti on : top; /* backgro und-po siti on : buttom; /* backgro und-po siti on : left; /* backgro und-po siti on : right; /*向上對齊*/向下對齊*/ 向左對齊*/居中對齊*/向右對齊*/backgro und-po si

8、ti on : cen ter; /*五、CSS連接屬性：a /*所有超鏈接*/ a:link /*超鏈接文字格式*/a:visited /*瀏覽過的鏈接文字格式*/a:active /*按下鏈接的格式*/ a:hover /*鼠標(biāo)轉(zhuǎn)到鏈?zhǔn)髽?biāo)光標(biāo)樣式: 鏈接手指CURSOR: hand十字體 cursor:crosshaircursor:s-resize箭頭朝下十字箭頭cursor:move箭頭朝右cursor:move加一問號箭頭朝左cursor:he Ip cursor:w-resize箭頭朝上箭頭朝右上 cursor:ne-resize 箭頭朝左上 cursor:nw-resizecur

9、sor: n-resize文字 I型 cursor:text箭頭斜右下 cursor:se-resize箭頭斜左下 cursor:sw-resize漏斗 cursor:wait光標(biāo)圖案(IE6) P 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

10、 #6699cc; /*以上是建議書寫方式，但也可以使用常規(guī)的方式如下: 設(shè)置上框線toP顏色*/ 設(shè)置上框線top寬度*/ 設(shè)置上框線top樣式*/border-to p-color : #369 /*border-to p-width :1px /*border-t op-style : solid/*其他框線樣式solid /*實(shí)線框*/ dotted /* 虛線框 */double /* 雙線框 */ groove /*立體內(nèi)凸框*/ ridge /*立體浮雕框*/ in set /* 凹框 */ outset /* 凸框 */ 七、CSS表單運(yùn)用：文字方塊按鈕復(fù)選框選擇鈕多行文字方塊

11、下拉式菜單 選項(xiàng)1選項(xiàng)2八、CSS邊界樣式：margi n-t op :10 px; /*上邊界*/margin-right:10px; /*右邊界值 */margi n-bottom:10 px; /*下邊界值 */margin-left:10px; /*左邊界值 */CSS屬性： 字體樣式(Font Style)1字體樣式序號中文說明標(biāo)記語法fon t:fo nt-style fon t-varia nt fon t-weight fon t-sizefon t-family2字體類型font-family:"字體 1","字體2","字體

12、3",.font-size: 數(shù)值 |inherit| medium| large| larger| x-large| xx-large| small| smaller| x-small| xx-small4字體風(fēng)格5字體粗細(xì)3字體大小體） |normal6字體顏色陰影顏色字體行高字間距fon t-style:i nherit|italic| nor mal|obliquefont-weight:100-900|bold（粗體）|bolder （特粗）|lighter （細(xì)（正常）；color:數(shù)值;text-shadow:16 位色值li ne-height:數(shù)值 |in heri

13、t| no rmal;letter-s pacing:數(shù)值 |in herit| no rmal10 單詞間距word-spacing: 數(shù)值|inherit|normal11 字體變形 font-variant:inheritnormal|small-cps 12英文轉(zhuǎn)換 text-tra nsform:i nherit| non e|ca pitalize|u pp ercase|lowercase13 字體變形 font-size-adjust:inherit|none14字體 fon t-stretch:c onden sed|ex pan ded|extra-c onden sed|

14、extra-ex pan ded|i nh erit |n arrower| no rmal| semi-c onden sed|semi-ex pan ded|ultra-c onden sed|ultra-ex pan ded|wider 文本樣式(Text Style)序號中文說明標(biāo)記語法1 行間距l(xiāng)ine-height:數(shù)值 |inherit|normal;2文本修飾 text-decorati on:i nherit| non e| un derli ne|overli ne|li ne-through|bli nk3 段首空格text- in de nt:數(shù)值 |in herit4

15、 水平對齊text-align:left|right|centerjustify5垂直對齊 vertical-alig n:i nhent|t op |bottom|text-t op |text-bottom|baseli ne|middle|s ub|s uper6書寫方式writing-mode:lr-tb|tb-rl背景樣式序號中文說明標(biāo)記語法1 背景顏色background-color:數(shù)值2 背景圖片background-image: url(URL)|none3背景重復(fù) backgro un d-re peat: in herit| no-re peat|re peat|re p

16、eat-x|re peat-y4 背景固定background-attachment:fixed|scroll5 背景定位background-position:數(shù)值 |top|bottom|left|right|center6背影樣式background:背景顏色|背景圖象|背景重復(fù)|背景附件|背景位置框架樣式(Box Style)序號中文說明標(biāo)記語法1 邊界留白 margin:margin-top margin-right margin-bottommargin-left2 補(bǔ) 白 p addi ng:p addi ng-t op p add in g-right p add in g-b

17、ottomp addi ng-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 顏色值border-style:non e|hidde n|i nhent|dashed|solid|double|i nset|outset|ndgegroove6邊5邊框風(fēng)格框 border:border-widt

18、h border-style color邊7寬8高9漂框框框框border-t op:border-t op-width border-style color border-right:border-right-width border-style color border-bottom:border-bottom-width border-style color border-left:border-left-width border-style color度width:長度|百分比| auto度height:數(shù)值 |auto浮float:left|right|none10清分類列表序號中文

19、說明標(biāo)記語法1 控制顯示display:none|block|iniine|list-item2 控制空白white-s pace: normal pre| no warp3符號列表除clear:none|left|right|bothlist-style-ty pe:disc|circle|square|decimal|lower-roma n|u pp er-roma n|low er-alp ha| upper-alpha|none4 圖形列表list-style-image:URL5 位置列表list-style-position:inside|outside6目錄列表list-sty

20、le:目錄樣式類型|目錄樣式位置|url7鼠標(biāo)形狀cursor:ha nd|crosshair|text|wait|move|hel p|e-resize| nw-resize|w-resize|s-resize|se-resize|sw-resize css屬性大全 背景屬性共有六項(xiàng):背景顏色（background-color），設(shè)置背景顏色。背景圖像（background-image），設(shè)置網(wǎng)頁背景圖像。重復(fù)（background-repeat ），控制背景圖像的平鋪方式，有不重復(fù)（no-rep eat八重復(fù)（rep eat，沿水平、垂直方向平鋪）、橫向重復(fù)（rep eat-X ， 圖像沿

21、水平方向平鋪）和縱向重復(fù)（repeat-Y，沿圖像垂直方向平鋪）等4種選 擇。附加（background-attachment ），用于控制背景圖像是否會隨頁面的滾 動(dòng)而一起滾動(dòng)。有固定（fixd，文字滾動(dòng)時(shí)，背景圖像保質(zhì)固定）和滾動(dòng)（scroll， 背景圖像隨文字內(nèi)容一起滾動(dòng)）兩種選擇。水平位置/垂直位置（background-position），確定背景圖像的水平、垂直位置 。共 有左對齊（left ）、右對齊（right ）、頂部（top ）、底部（bottom ）、居中（center） 和值（自定義背景圖像的起點(diǎn)位置，可使用戶對背景圖像的位置做出更精確的控 制）等6種選擇。類型屬性共有

22、九項(xiàng):字體（font-family ），設(shè)定時(shí)，需考慮瀏覽器中有無該字體。大?。╢ont-size ），注意度量單位。粗細(xì)（font-weight ），除了normal （正常）、bold （粗體）、bolder （特 粗）'lighter （細(xì)體）外，還有9種以像素為度量為單位的設(shè)置方式。樣式（font-style ），也就是字型。行高（line-height ），就是行距。注意，行距只能以是字體大小值為變形（font-variant ），可以將正常文字一半尺寸后大寫顯示，但I(xiàn)E目前不支持這項(xiàng)屬性。大小寫（text-tra nsform ），這項(xiàng)屬性能輕而易舉地控制字母大小寫，有首

23、字大寫（capitalize、大寫（uppercase ）、小寫（lowercase ）和無（none， 使所有繼承文字和變形參數(shù)被忽略，文字將以正常形式顯示）等4種。修飾（text-decoration ），用于控制鏈接文本的顯示形態(tài)，有下劃線（underline ）、無下劃線（overline ）、刪除線（line-through ）、閃爍（blink ） 和無（none ，使上述效果均不會發(fā)生）等5種修飾方式。但I(xiàn)E4不支持文字閃爍。區(qū)塊屬性共有六項(xiàng):單詞間距（word-spacing ）（normal ）和值（自定義間隔值） 英吋（in）、厘米（cm）、毫米，主要用于控制文字間相隔的距

24、離。有正常 兩種選擇方式。當(dāng)選擇值時(shí)，可用的單位有（mm ）、點(diǎn)數(shù)（pt ）、12pt 字（pc ）、字體高（em ）、字體x有高（ex）像素（px ）。字母間距（letter-spacing ），其作用與字符間距類似，也有正常（normal ） 和值（自定義間隔值）兩種選擇方式。垂直對齊（vertical-align ），控制文字或圖像相對于其母體元素的垂直位 置。如將一個(gè)2 X3像素的GIF圖像同其母體元素文字的頂部垂直對齊，則該GIF圖像將在該行文字的頂部顯示。共有基線（baseline，將元素的基準(zhǔn)線同母體元 素的基準(zhǔn)線對齊）、下標(biāo)（sub，將元素以下標(biāo)的形式顯示），上標(biāo)（super，

25、將 元素以上標(biāo)的形式顯示）、頂部（top，將元素頂部同最高的母體元素對齊）、 文本頂對齊（text-toP，將元素的頂部同母體元素文字的頂部對齊）、中線對齊（middle，將元素的中點(diǎn)同母體元素的中點(diǎn)對齊）、底部（bottom，將元素的 底部同最低的母體元素對齊）及值（自定義）等 9種選擇。文本對齊（ 右對齊（right ）文字縮進(jìn)（空白間距l(xiāng)eft ）、text-align ），設(shè)置塊的水平對齊方式。共有左對齊（、居中（center ）和均分（justify ）等4種選擇。 text-i ndent ），控制塊的縮進(jìn)程度。（white-s pace（white-s pace 行（nowrap

26、 ），在HTML中，空格是被省略的；在CSS中則使用屬性）控制空格的輸入。共有正常（normal ）、保留（pre ）和不換 等3種選擇。邊框的屬性有3項(xiàng):寬J（border-width ），控制邊框的寬度，其中分為4個(gè)屬性：border-top-width 頂邊框的寬度、border-right-width右邊框的寬度、border-bottom-width 底邊框的寬度、border-left-width 左邊框的寬度。顏色（border-color ），設(shè)置各邊框的顏色。若要使邊框的四邊顯示不同 的顏色，可在設(shè)置中分別列出。如，p: #ffOOOO #009900 #0000ff #55

27、cc00）,設(shè)定邊框的樣式，共有無（none ）、虛線（dotted ）、 點(diǎn)劃線（dashed ）、實(shí)線（solid ）、雙線（double ）、（ridge ）、凹陷（in set ）和凸起（outset ）等 9 種。瀏覽器將四種顏色依次理解為：上邊框、右邊框、底邊框和左邊框（自上開始順 時(shí)針）。樣式（border-style點(diǎn)劃線線（dotted ）、 槽狀（grove ）、脊?fàn)詈凶訉傩怨灿?項(xiàng)寬（width ），確定盒子本身的寬度，可以使盒子的寬度不依靠它所包含的 內(nèi)容多少。高（height ），確定盒子本身的高度。浮動(dòng)（float ），設(shè)置塊元素的浮動(dòng)效果。清除（clear），用于

28、清除設(shè)置的浮動(dòng)效果。邊距（margin ），控制圍繞邊框的邊距大小。其中包含4個(gè)屬性：margin-top 控制上邊距的寬度、margi n-right 控制右邊距的寬度、margi n-bottom 控制下 邊距的寬度、margin-left控制左邊距的寬度。邊界（padding ），確定圍繞塊元素的空格填充數(shù)量，其中包含 4個(gè)屬性P add in g-t op 控制上留白的寬度、padd in g-right 控制右留白的寬度、 paddi ng-bottom控制下留白寬度、padd in g-left 控制左留白的寬度。列表屬性共有3項(xiàng):類型（list-style-type ），確定列表

29、每一項(xiàng)前使用的符號，共有圓點(diǎn)（disc）、 圓圈（circle、方形（square、數(shù)字（decimal、小寫羅馬數(shù)字（lower-roman）、大寫羅馬數(shù)字（upper-roman ）、小寫字母 （lower-alpha ）和大寫字母 （upper alpha、等 8種。項(xiàng)目圖像（list-style-image 、，其作用是將列表前面的符號換為圖形。位置J （list-style-po sition 、，用于描述列表位置，有內(nèi)（outside、和外（in side ） 兩種選擇。定位屬性共有6項(xiàng):類型（Position ），用于確定定位的類型，共有絕對（absolute ）、相對（rela

30、tive ） 和靜態(tài)（static、等3種選擇。Z軸（z-index、，用于控制網(wǎng)頁中塊元素的疊放順序，可為元素設(shè)置重疊 效果。該屬性的參數(shù)值使用純整數(shù)，值為 0時(shí)，元素在最下層，適用于絕對定位 或相對定位的元素。顯示（visibility、使用該屬性可將網(wǎng)頁中的元素隱藏，共有繼承（inherit，繼承母體要素的可視性設(shè)置）、可見（visible ）和隱藏（hidden ）等3 種選擇。溢出（oveflow ），在確定了元素的高度和寬度后，如果元素的面積不能 全部顯示元素中的內(nèi)容時(shí)，該屬性做一日和尚撞一天鐘起作用了。其中共有可見（visible，擴(kuò)大面積以顯示所有內(nèi)容）、隱藏（hidden，隱

31、藏超出范圍的內(nèi)容）、 滾動(dòng)（scroll，在元素的右邊顯示一個(gè)滾動(dòng)條）和自動(dòng)（auto，當(dāng)內(nèi)容超出元素 面積時(shí)，顯示滾動(dòng)條）等4種選擇。定位，當(dāng)為元素確定了絕對定位類型后， 該組屬性決定元素在網(wǎng)頁中的具體 位置。該組屬性包含4個(gè)子屬性，分別是左（屬性名為 left，控制元素 左邊的起始位置）、上（屬性名為 top，控制元素上面的起始位置）、寬或高（與盒子類屬性面板中寬或高的屬性作用相同）。剪輯（clip ），當(dāng)元素被指定為絕對定位類型后，該屬性可以把元素區(qū)域切 成各種形狀，但目前提供的只有方形一種。屬性值為rect（top right bottom left） 即：rect（t op righ

32、t bottom left），屬性值的單位為任何一種長度單位。擴(kuò)展屬性共有兩部分:之前分頁，其中兩個(gè)屬性的作用是為打印的頁面設(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）PX、PD大小font-size: x-larg

33、e;（特大）xx-small;（極?。┮话阒形挠貌坏?，只要用數(shù)值 就可以，單位：樣式 font-style: oblique;（行高line-height: normal;（粗細(xì) font-weight: bold;（偏斜體）italic;（斜體）normal;（正常） 正常）單位：PX、PD、EM粗體）lighter;（細(xì)體）normal;（正常）變體 font-variant: small-caps;（小型大寫字母）normal;（ 正常）大小寫 text-transform: capitalize;（首字母大寫）uppercase;（ 大寫）lowercase;（小寫）none;（無）修

34、飾text-decoration: underline;（ 下劃線）overline;（上劃線）line-through;（刪除線）blink;（閃爍）常用字體：（fon t-family）"Courier New", Courier, monosp ace, "Times New Roma n". Times, serif,背景屬性:色彩 圖片 重復(fù) 滾動(dòng) 位置Arial, Helvetica, san s-serif, Verda na（backgro und）backgrou nd-color: #FFFFFF;backgro un d-image: url（）;backgro un d-re peat: no-rep eat;background-attachment: fixed;（固定）scroll;（滾動(dòng)）background-position: left;（水平）top（垂直）;簡寫方法backgrou nd:#000 url（.） re peatfixed left top;/*簡寫這個(gè)在閱讀代碼中經(jīng)常出現(xiàn)，要認(rèn)真的研究*/區(qū)塊屬性：（Block）/*這個(gè)屬性第一次認(rèn)識，要多多研究*/字間距l(xiāng)etter-s pad ng: normal; 數(shù)值/*這個(gè)屬性似乎有用，多實(shí)踐下*/ 對