CSS屬性大全


  1. 文字屬性

「字體族科」(font-family),設定時,需考慮瀏覽器中有無該字體。
「字體大小」(font-size),注意度量單位。《絕對大小》|《相對大小》|《長度》|《百分比》(一般設置雙數)
「字體加粗」(font-weight),除了 normal(正常)、bold(粗體)、bolder(特粗)、lighter(細體)外,還有9種以像素為度量為單位的設置方式(100,200,300,400,500,600,700,800,900)。
「字體風格」(font-style),也就是字型。

normal : 正常的字體
italic : 斜體。對於沒有斜體變量的特殊字體,將應用oblique
oblique : 傾斜的字體

「字體變形」(font-variant),字體變形屬性決定了字體顯示是normal (普通) ,還是

                       Small-caps(小型大寫字母)當文字中所有字母都是大寫的時候,小型大寫字母(值)會顯示比小寫字母稍大的大寫字符。

「字體」(font),《字體風格》|《字體變形》|《字體加粗》|《字體大小》|《行高》|《字體族科》

  1. 文本屬性

「文字間距」(word-spacing),主要用於控制文字間相隔的距離。有正常(normal)和值(自定義間隔值)兩種選擇方式。
「字母間距」(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種選擇。

「行 高」(line-height),就是 行距。Normal | <數字> | <長度> | <百分比>

                   當值為數字時,行高由元素字體大小的量與該數字相乘所得。

                   百分比的值相對於元素的字體大小而定。

                    不允許使用負值。 

「文本轉換」(text-transform),這項屬性能輕而易舉地控制字母大小寫,有首字大寫(capitalize、大寫(uppercase)、小寫(lowercase)和無(none,使所有繼承文字和變形參數被 忽略,文字將以正常形式顯示)等4種。
「文字縮進」(text-indent),控制塊的縮進程度。<長度> | <百分比>
「空白間距」(white-space),在HTML中,空格是被省略的;在CSS中則使用屬性(white-space)控制空格的輸 入。共有正常(normal)、保留(pre)和不換行(nowrap)等3種選擇。

「修 飾」(text-decoration),用於控制鏈接文本的顯 示形態,有下划線(underline)、無下划線(overline)、刪除線(line-through)、閃爍(blink)和無(none ,使上述效果均不會發生)等5種修飾方式。但IE4不支持文字閃爍。

3顏色及背景屬性

[顏 色」(color),設置顏色。Color:blure color:#00080 color:#0c0

「背景顏色」(background-color),設置背景顏色。background-color:blure background-color:#00080 background-color:#0c0
「背景圖像」(background-image),設置網頁背景圖像。background-image:url(/images/xx.gif)
「背景重復」(background- repeat),控制背景圖像的平鋪方式,有不重復(no-repeat)、重復(repeat,沿水平、垂直方向平鋪)、橫向重復 (repeat-X,圖像沿水平方向平鋪)和縱向重復(repeat-Y,沿圖像垂直方向平鋪)等4種選擇。
「背景附件」(background-attachment),用於控制背景圖像是否會隨頁面的滾動而一起滾動。有固定(fixd,文字滾動 時,背景圖像保質固定)和滾動(scroll,背景圖像隨文字內容一起滾動)兩種選擇。
「水平位置」/「垂直位置」(background-position),確定背景圖像的水平、垂直位置
。共有左對齊(left)、右對齊 (right)、頂部(top)、底部(bottom)、居中(center)和值(自定義背景圖像的起點位置,可使用戶對背景圖像的位置做出更精確的控 制)等6種選擇。

[背景] (background),《背景顏色》||《背景圖像》||《背景重復》||《背景附件》||《背景位置》

4.文字連接屬性

a /所有超鏈接/
a:link /超鏈接文字格式/

a:visited /瀏覽過的鏈接文字格式/
a:active /按下鏈接的格式/
a:hover /鼠標轉到鏈接/
鼠標光標 樣式:
鏈接手指cursor:pointer
十字體 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

5. 邊框

「邊框寬度」(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種。

「邊框樣式」(border),<邊框寬度> | <邊框樣式> | <邊框顏色>

6.「盒子」屬性

「寬」(width),確定盒子本身的寬度,可以使盒子的寬度不依靠它所包含的內容多少。 <長度> | <百分比> |
「高」(height),確定盒子本身的高度。<長度> |
「浮 動」(float),設置塊元素的浮動效果。(left)|(right)|(none)
「清 除」(clear),用於清除設置的浮動效果。(left)|(right)|(none)|(both)
「邊 距」 (margin),控制圍繞邊框的邊距大小。其中包含4個屬 性:margin-top控制上邊距的寬度、margin-right控制右邊距的寬度、margin-bottom控制下邊距的寬度、margin- left控制左邊距的寬度。
「補 白」(padding),確定圍繞塊元素的空格填充數量,其中包含4個屬性 「padding-top控制上留白的寬度、padding-right控制右留白的寬度、padding-bottom控制下留白寬度、 padding-left控制左留白的寬度。

7.列表

  1. 列表元素:

ol 有序列表。

  1. 項目1
  2. 項目2
  3. 項目3

表現為:

1.項目1

2.項目2

3.項目3

ul 無序列表,表現為li前面是大圓點而不是123

  • 項目1
  • 項目2
  • 項目3

表現為:

·項目1

·項目2

·項目3

很多人容易忽略 dl dt dd的用法

dl 內容塊

dt 內容塊的標題

dd 內容

可以這么寫:

標題title
內容content1
內容content2

表現為:

標題

內容

內容

(內容是縮進的!)

8. 定位

「類 型」(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),屬性值的單位為任何一種長度單位。

9. [display]

值 描述

none 此元素不會被顯示。

block 此元素將顯示為塊級元素,此元素前后會帶有換行符。

inline 默認。此元素會被顯示為內聯元素,元素前后沒有換行符。

inline-block 行內塊元素。(CSS2.1 新增的值)

*display:inline; *zoom:1;

list-item 此元素會作為列表顯示。

run-in 此元素會根據上下文作為塊級元素或內聯元素顯示。

table 此元素會作為塊級表格來顯示(類似

inline-table 此元素會作為內聯表格來顯示(類似

),表格前后帶有換行符。

table-row-group 此元素會作為一個或多個行的分組來顯示(類似

table-header-group 此元素會作為一個或多個行的分組來顯示(類似

table-footer-group 此元素會作為一個或多個行的分組來顯示(類似

table-row 此元素會作為一個表格行顯示(類似

table-column-group此元素會作為一個或多個列的分組來顯示(類似

table-column 此元素會作為一個單元格列顯示(類似

table-cell 此元素會作為一個表格單元格顯示(類似

),表格前后沒有換行符。 )。 )。 )。 )。 )。 )

table-caption 此元素會作為一個表格標題顯示(類似

inherit 規定應該從父元素繼承 display 屬性的值。

10.[分類屬性]

「空白」(white-space),用於決定元素內的空格

Normal(將多個空格折疊成一個)

Pre(不折疊成空格)

Nowrap(不允許換行,除非遇到
標記)

「目錄樣式類型」(list-style-type),帶有顯示值目錄項元素

「目錄樣式圖像」(list-style-image),帶有顯示值目錄項元素

                             list-style-image:url(圖片地址)

「目錄樣式位置」(list-style-position),帶有顯示值目錄項元素

                               Inside (內部) | outside(外部—初始值)

「目錄樣式」(list-style),帶有顯示值目錄項元素

                    《目錄樣式類型》| 《目錄樣式類型》| 《目錄樣式圖像》

11.css 單位

[長度單位]

    有效的相對單位

em(元素字體的高度)

           ex(x-height,字母“x”的高度)

px(像素,相對於屏幕的分辨率)

      有效的絕對單位

in(英寸,1英寸=2.54厘米)

           cm(厘米,1厘米=10毫米)

mm(米)

pt(點,1點=1/72英寸)

pc(帕,1帕=12點)

[百分比單位]

百分比值是相對於其他數值,同樣地用於定義每個屬性,最經常使用

的百分比值是相對於元素的字體大小。

[顏色單位]

  顏色值是一個關鍵字或一個RGB格式的數字

  #rrggbb | #rgb | rgb(x,x,x)x是一個介乎0到255之間的整數(如,rgb(0,204,0))

  Rgb(y%,y%,y%)y是一個介乎0.0到100.0之間的整數(如,rgb(0%,80%,0%))

  這例子指定的是同一個顏色

12.css hack

由於不同的瀏覽器,比如Internet Explorer 6,Internet Explorer 7,Mozilla Firefox等,對CSS的解析認識不一樣,因此會導致生成的頁面效果不一樣,得不到我們所需要的頁面效果。

這個時候我們就需要針對不同的瀏覽器去寫不同的CSS,讓它能夠同時兼容不同的瀏覽器,能在不 同的瀏覽器中也能得到我們想要的頁面效果。

這個針對不同的瀏覽器寫不同的CSS code的過程,就叫CSS hack,也叫寫CSS hack。

CSS Hack的原理是什么?

由於不同的瀏覽器對CSS的支持及解析結果不一樣,還由於CSS中的優先級的關 系。我們就可以根據這個來針對不同的瀏覽器來寫不同的CSS。

比如 IE6能識別下划線""和星號" * ",IE7能識別星號" * ",但不能識別下划線"",而firefox兩個都不能認識。等等

書寫順序,一般是將識別能力強的瀏覽器的CSS寫在后面。

CSS Hack的寫法!

比如要分辨IE6和firefox兩種瀏覽器,可以這樣寫:

我在IE6中看到是紅色的,在firefox中看到是綠色的。

解釋一下:

上面的css在firefox中,它是認識不了后面的那個帶星號的東東是什么的,於是將它過濾 掉,不予理睬,解析得到的結果是:div{background:green},於是理所當然這個div的背景是綠色的。

在IE6中呢,它兩個background都能識別出來,它解析得到的結果 是:div{background:green;background:red;},於是根據優先級別,處在后面的red的優先級高,於是當然這個div 的背景顏色就是紅色的了。

CSS hack:區分IE6,IE7,firefox

區別不同瀏覽器,CSS hack寫法:

區別IE6與FF:

background:orange;*background:blue;

區別IE6與IE7:

background:green !important;background:blue;

區別IE7與FF:

background:orange; *background:green;

區別FF,IE7,IE6:

background:orange;*background:green;_background:blue;

background:orange;background:green !important;background:blue;

注:IE都能識別;標准瀏覽器(如FF)不能識別

IE6能識別*,某些情況下不能識別 !important,


IE6支持重定義中的!important,例如:

.yuanxin {color:#e00!important;}

.yuanxin {color:#000;}

你將會發現定義了樣式class="yuanxin"時,在IE下,字體顯示為紅色 (#e00)。

但不支持同一定義中的!important。例如:

.yuanxin {color:#e00!important;color:#000}

此時在IE6下不支持,你將會發現定義了樣式class="yuanxin"時,字體顯示為黑 色(#000)。


IE7能識別*,也能識別!important;

FF不能識別*,但能識別!important;

       IE6 IE7 FF 
  •       √ √ × 
    

!important × √ √

瀏覽器優先級別:FF<IE7<IE6,CSS hack書寫順序一般為FF IE7 IE6

以: " #demo {width:100px;} "為例;

demo {width:100px;} /被FIREFOX,IE6,IE7執行./

html #demo {width:120px;} /會被IE6執行,之前的定義會被后來的覆蓋,所以#demo的寬度在IE6就為120px; */

+html #demo {width:130px;} /會被IE7執行*/


所以最后,#demo的寬度在三個瀏覽器的解釋為:

FIREFOX:100px;

ie6:120px;

ie7:130px;

IE8 最新css hack:

"\9" 例:"border:1px \9;".這里的"\9"可以區別所有IE和FireFox.

"*" IE6、IE7可以識別.IE8、FireFox不能.

"" IE6可以識別"",IE7、IE8、FireFox不能.

在程序里加上這句話的意思就是:IE8里顯示的布局和IE7里一樣!

常用的css屬性大全

一、html標簽

...
文字格式化
......
列塊容器

字體大小變化 想輸入的字

字體顏色 想輸入的字

字體變粗 想輸入的字

字體變斜 想輸入的字

字體加下划線 想輸入的字

對正中央ㄉ語法

內容

對正左邊ㄉ語法

內容

對正右邊ㄉ語法

內容

字體刪除線 想輸入的字

字體設置 <font">字體名稱">想輸入的字

打字機字體 想輸入的字

上標字 想輸入的字

下標字 想輸入的字

水平線


換行輸入 想輸入的字
想輸入的字

超鏈接 鏈接地的名稱

要顯示的字打這里網絡郵寄標簽

貼圖

跑馬燈(循環) 想輸入的字

外部文件導入格式標簽

CSS外部導入格式:

直接引用:

javascript - 加載外部.js獨立文件:

二、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; /文字垂直向下對齊/

三、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; /背景顏色/

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 /超鏈接文字格式/

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; /左框線/

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表單運用:

文字方塊

按鈕

復選框

選擇鈕

多行文字方塊

下拉式菜單

八、CSS邊界樣式:

margin-top:10px; /上邊界/

margin-right:10px; /右邊界值/

margin-bottom:10px; /下邊界值/

margin-left:10px; /左邊界值/

九、CSS邊框空白

padding-top:10px; /上邊框留空白/

padding-right:10px; /右邊框留空白/

padding-bottom:10px; /下邊框留空白/

padding-left:10px; /左邊框留空白/

基本語法

規則

選擇符

任何HTML元素都可以是一個CSS1的選擇符。選擇符僅僅是指向特別樣式的元素。例如, P { text-indent: 3em }

當中的選擇符是P。

類選擇符

單一個選擇符能有不同的CLASS(類),因而允許同一元素有不同樣式。例如,一個網頁制作者也許希望視其語言而定,用不同的顏色顯示代碼 :

code.html { color: #191970 }

code.css { color: #4b0082 }

以上的例子建立了兩個類,css和html,供HTML的CODE元素使用。CLASS屬性是用於在HTML中以指明元素的類,例如,

例如,code.html.proprietary是無效的。

類的聲明也可以無須相關的元素:

.note { font-size: small }

在這個例子,名為note的類可以被用於任何元素。

一個良好的習慣是在命名類的時候,根據它們的功能而不是根據它們的外觀。上述例子中的note類也可以命名為small,但如果網頁制作者決定改變這個類的樣式,使得它不再是小字體的話,那么這個名字就變得毫無意義了。

ID 選擇符

ID 選擇符個別地定義每個元素的成分。這種選擇符應該盡量少用,因為他具有一定的局限。一個ID選擇符的指定要有指示符"#"在名字前面。例如,ID選擇符可以指定如下:

svp94O { text-indent: 3em }

這點可以參考HTML中的ID屬性:

文本縮進3em

關聯選擇符

關聯選擇符只不過是一個用空格隔開的兩個或更多的單一選擇符組成的字符串。這些選擇符可以指定一般屬性,而且因為層疊順序的規則,它們的優先權比單一的選擇符大。例如, 以下的上下文選擇符

P EM { background: yellow }

是P EM。這個值表示段落中的強調文本會是黃色背景;而標題的強調文本則不受影響。

聲明

屬性

一個屬性被指定到選擇符是為了使用它的樣式。屬性的例子包括顏色、邊界和字體。

聲明的值是一個屬性接受的指定。例如,屬性顏色能接受值red。

組合

為了減少樣式表的重復聲明,組合的選擇符聲明是允許的。例如,文檔中所有的標題可以通過組合給出相同的聲明:

H1, H2, H3, H4, H5, H6 {

color: red;

"" class=MsoNormal> 繼承

實際上,所有在選擇符中嵌套的選擇符都會繼承外層選擇符指定的屬性值,除非另外更改。例如,一個BODY定義了的顏色值也會應用到段落的文本中。

有些情況是內部選擇符不繼承周圍的選擇符的值,但理論上這些都是特殊的。例如,上邊界屬性是不會繼承的;直覺上,一個段落不會有同文檔BODY一樣的上邊界值。

注解

樣式表里面的注解使用C語言編程中一樣的約定方法去指定。CSS1注解的例子如以下格式:

/* COMMENTS CANNOT BE NESTED */

偽類和偽元素

偽類和偽元素是特殊的類和元素,能自動地被支持CSS的瀏覽器所識別。偽類區別開不同種類的元素(例如,visited links(已訪問的連接)和active links(可激活連接)描述了兩個定位錨(anchors)的類型)。偽元素指元素的一部分,例如段落的第一個字母。

偽類或偽元素規則的形式如

選擇符:偽類 { 屬性: 值 }

選擇符:偽元素 { 屬性: 值 }

偽類和偽元素不應用HTML的CLASS屬性來指定。一般的類可以與偽類和偽元素一起使用,如下:

選擇符.類: 偽類 { 屬性: 值 }

選擇符.類: 偽元素 { 屬性: 值 }

定位錨偽類

偽類可以指定A元素以不同的方式顯示連接(links)、已訪問連接(visited links)和可激活連接(active links)。定位錨元素可給出偽類link、visited或active。一個已訪問連接可以定義為不同顏色的顯示,甚至不同字體大小和風格。

一個有趣的效果是使當前(或“可激活”)連接以不同顏色、更大的字體顯示。然后,當網頁的已訪問連接被重選時,又以不同顏色、更小字體顯示。這個樣式表的示例如下:

A:link { color: red }

A:active { color: blue; font-size: 125% }

A:visited { color: green; font-size: 85% }

首行偽元素

通常在報紙上的文章,例如Wall Street Journal中的,文本的首行都會以粗印體而且全部大寫地展示。CSS1包括了這個功能,將其作為一個偽元素。首行偽元素可以用於任何塊級元素(例如P、H1等等)。以下是一個首行偽元素的例子:

P:first-line {

font-variant: small-caps;

font-weight: bold }

首個字母偽元素

首個字母偽元素用於加大(drop caps)和其他效果。含有已指定值選擇符的文本的首個字母會按照指定的值展示。一個首個字母偽元素可以用於任何塊級元素。例如:

P:first-letter { font-size: 300%; float: left }

會比普通字體加大三倍。

層疊順序

當使用了多個樣式表,樣式表需要爭奪特定選擇符的控制權。在這些情況下,總會有樣式表的規則能獲得控制權。以下的特性將決定互相對立的樣式表的結果。

! important

規則可以用指定的! important 特指為重要的。一個特指為重要的樣式會凌駕於與之對立的其它相同權重的樣式。同樣地,當網頁制作者和讀者都指定了重要規則時,網頁制作者的規則會超越讀者的。以下是! important 聲明的例子:

BODY { background: url(bar.gif) white;

background-repeat: repeat-x ! important }

Origin of Rules (Author's vs. Reader's)

正如以前所提及的,網頁制作者和讀者都有能力去指定樣式表。當兩者的規則發生沖突,網頁制作者的規則會凌駕於讀者的其它相同權重的規則。而網頁制作者和讀者的樣式表都超越瀏覽器的內置樣式表。

網頁制作者應該小心地使用! important 規則,因為它們會超越用戶任何的! important 規則。例如,一個用戶由於視覺關系,會要求大字體或指定的顏色,而且這樣的用戶會有可能聲明確定的樣式規則為! important,因為這些樣式對於用戶閱讀網頁是極為重要的。任何的! important 規則會超越一般的規則,所以建議網頁制作者使用一般的規則以確保有特殊樣式需要的用戶能閱讀網頁。

選擇符規則: 計算特性

基於它們的特性級別,樣式表也可以超越與之沖突的樣式表,一個較高特性的樣式永遠都凌駕於一個較低特性的樣式。這只不過是計算選擇符的指定個數的一個統計游戲。

統計選擇符中的ID屬性個數。

統計選擇符中的CLASS屬性個數。

統計選擇符中的HTML標記名格式。

最后,按正確的順序寫出三個數字,不要加空格或逗號,得到一個三位數。( 注意,你需要將數字轉換成一個以三個數字結尾的更大的數。)相應於選擇符的最終數字列表可以很容易確定較高數字特性凌駕於較低數字的。以下是一個按特性分類的選擇符的列表:

id1 {xxx} /* a=1 b=0 c=0 --> 特性 = 100 */

UL UL LI.red {xxx} /* a=0 b=1 c=3 --> 特性 = 013 */

LI.red {xxx} /* a=0 b=1 c=1 --> 特性 = 011 */

LI {xxx} /* a=0 b=0 c=1 --> 特性 = 001 */

特性的順序

為了方便使用,當兩個規則具同樣權重時,取后面

有很多方法將樣式表加入到HTML中,每個都帶有自己的優點和缺點。新的HTML元素和屬性已被加入以允許樣式表與HTML文檔更簡易地組合起來。

連接到一個外部的樣式表

嵌入一個樣式表

輸入一個樣式表

內聯樣式

CLASS屬性

ID屬性

SPAN元素

DIV元素

關於認證的備注


連接到一個外部的樣式表

一個外部的樣式表可以通過HTML的LINK元素連接到HTML文檔中:

標記是放置在文檔的HEAD部分。可選的TYPE屬性用於指定媒體類型--text/css是一個層疊樣式表--允許瀏覽器忽略它們不支持的樣式表類型。為CSS文件配置服務器而將text/css當作Content-type內容發送出去也是一個好注意。

外部樣式表不能含有任何像或

STYLE元素放在文檔的HEAD部分。必須的TYPE屬性用於指定媒體類型,LINK元素也一樣。同樣地,TITLE和MEDIA屬性也可以用STYLE指定。

舊版本的瀏覽器,並不能識別STYLE元素,會將其當作BODY的一部分照常展示其內容,從而使這些樣式表對用戶是可見的。要防止這樣做,STYLE元素的內容要包含一個SGML注解( )在里面,像上述例子那樣。

嵌入的樣式表可用於當一個文檔具有獨一無二的樣式的時候。如果多個文檔都使用同一樣式表,那么外部樣式表會更適用。


輸入一個樣式表

一個樣式表可以使用CSS的@import 聲明被輸入。這個聲明用於一個CSS文件或內部的STYLE元素:

注意其它的CSS規則應該仍然包括在STYLE元素中,但所有的@import 聲明必須放在樣式表的開始部分。任意在樣式表中指定了的規則,其自身超越在輸入樣式表中對立的規則。例如上例,即使一個輸入的樣式表包含DT { background: aqua },定義項(definition terms)依然會是黃色的背景。

被輸入的樣式表的順序對於它們怎樣層疊是很重要的。在上述的例子中,如果style.css輸入的樣式表指定了STRONG元素會顯示為紅色而punk.css樣式表指定了STRONG元素顯示為黃色的話,那么后面的規則會獲勝,而STRONG元素會顯示為黃色。

輸入的樣式表對於模塊性效果很有用處。例如,一個網站可以通過使用了的選擇符分類樣式表。一個simple.css樣式表給出公共的元素像BODY、P、H1和H2。此外,一個extra.css樣式表給出較少共通的元素像CODE、BLOCKQUOTE和DFN。一個tables.css樣式表可以用於定義變革元素的規則。這三個樣式表在需要的時候可以使用@import 聲明包括在HTML中。三個樣式表也可以通過LINK元素組合。


內聯樣式

樣式可以使用STYLE屬性內聯。STYLE屬性可以應用於任意BODY元素(包括BODY本身),除了BASEFONT、PARAM和SCRIPT。這個屬性將任何數量的CSS聲明當作自己的值,而每個聲明用分號隔開。以下是一個例子:

這段的樣式是紅色的New Century Schoolbook字,如果字體可用的話。

注意在STYLE中New Century Schoolbook包含在單引號中,因為雙引號被用作包含樣式聲明。

內聯的樣式比其他方法更加靈活。要使用內聯樣式,必須使用Content-Style-Type HTTP頁眉擴展對整個文檔進行單獨的樣式表語言聲明。使用內聯CSS的網頁制作者必須將text/css作為Content-Style-Type HTTP頁眉,或在HEAD部分包括以下標記:

因為和需要展示的內容混合在一起,內聯樣式會失去一些樣式表的優點。同樣地,內聯樣式默認地接受所有媒體,因為沒有任何的為內聯樣式指定明確的媒體的語句。這種方法應該盡量少用,如當一個樣式會應用在所有媒體到一個元素的個別情況。如果樣式會被應用到單一元素的場合,但只能使用確認的媒體的話,使用ID屬性代替STYLE屬性。


CLASS屬性

CLASS屬性用於指定元素屬於何種樣式的類。例如,樣式表可以加入punk和warning類:

.punk { color: lime; background: #ff80c0 }

P.warning { font-weight: bolder; color: red; background: white }

這些類可以使用CLASS屬性在HTML中引用:

在這個例子中,punk類可以用於任何BODY元素因為它在樣式表中沒有HTML元素關聯。而在這個例子的樣式表,warning類只能用於P元素。

一個良好的習慣是在命名類的時候,根據它們的功能而不是根據它們的外觀。上述例子中的warning類也可以命名為red,但如果網頁制作者決定改變這個類的樣式為別的顏色,或希望為那些使用PC喇叭的人定義為aural(聽覺)樣式的話,那么這個名字就變得毫無意義了。

類會是應用樣式到HTML文檔中在結構上一樣的部分的有效的辦法。例如,本頁使用類給CSS源代碼和HTML源代碼使用不同的樣式。


ID屬性

ID屬性用於定義一個元素的獨特的樣式。一個CSS規則如

wdg97 { font-size: larger }

可以通過ID屬性應用到HTML中:

歡迎訪問Web Design Group及TV water 168!

整個文檔當中的每個ID屬性的值都必須是唯一的。其值必須是一個以字母開頭緊接字母、識字或連字符。字母限於A-Z和a-z。

注意HTML 4.0允許在ID屬性中有句號,但CSS1不允許在ID選擇符中有句號。也要注意CSS1允許Unicode字符161-255而且忽略Unicode字符為一個數字代碼,但HTML 4.0不允許這些字符在一個ID屬性值當中。

當一個樣式只需要在任何文檔中應用一次時,使用ID是很適合的。 ID與STYLE屬性相比,在於ID允許指定媒體的樣式,而且也可以被應用於多個文檔(雖然每個文檔只用一次)。


SPAN元素

SPAN元素被加入到HTML中以允許網頁制作者給出樣式但無須附加在一個HTML的結構元素上。SPAN在樣式表中作為一個選擇符使用,而且它也能接受STYLE、CLASS和ID屬性。

SPAN是一個內聯元素,所以它可以作為HTML中的元素如EM和STRONG使用。最重要的差別在於雖然EM和STRONG帶有結構的意義,但SPAN就沒有這樣的意義。它的存在純粹是應用樣式,所以當樣式表失效時它就沒有任何的作用。

一些SPAN例子如下:

SPAN的例子

前面是

段落中少數的文字,會是小型大寫字母。樣式也可以內聯,如改變文

字的樣式為Arial.


DIV元素

DIV元素在功能上與SPAN元素相似,最主要的差別在於DIV ("division","部分"的簡稱)是一個塊級元素。DIV可以包含段落、標題、表格甚至其它部分。這使DIV便於建立不同集成的類,如章節、摘要或備注。例如:

Divisions/部分

DIV元素在HTML 3.2中有定義,但HTML 3.2中只有ALIGN屬性能兼容。HTML 4.0在屬性中加入CLASS、STYLE、和ID屬性。

因為DIV可以包含其他塊級集成,在用於建立文檔的大型章節例如本備注是很有用的。

要求關閉標記。


關於認證的備注

少數使用了CSS樣式的文檔能在HTML3.2 (Wilbur)層(在WDG網站,譯者注)得到認證。HTML3.2不會解釋SPAN元素,也不解釋CLASS、STYLE或ID屬性,而且在LINK和STYLE元素中也很少支持TYPE和MEDIA屬性。

這些有關的樣式元素和屬性對不支持的瀏覽器不會有害,因為它們能安全地忽略。文檔使用這些元素和屬性可以被認證防御於HTML 4.0。

流氓報-流氓人生活的故事!流氓人的家園 !流氓人自己的報刊!http://www.t128qq.bokee.com/

顯示

語法: display: <值>

允許值: block | inline | list-item | none

初始值: block

適用於: 所有對象

向下兼容: 否

顯示屬性允許使用四個值中的一個來定義一個元素:

block (在元素的前和后都會有換行)

inline (在元素的前和后都不會有換行)

list-item (與block相同, 但增加了目錄項標記)

none (沒有顯示)

每個元素都典型地由瀏覽器基於HTML規格建議的展示形式給出一個缺省的顯示值。

顯示屬性可能並不安全,因為它使用另外的不合適的格式顯示元素。使用值none將關閉指定元素及其子元素的顯示!


空白

語法: white-space: <值>

允許值: normal | pre | nowrap

初始值: normal

適用於: 塊級元素

向下兼容: 是

空白屬性將決定如何處理元素內的空格. 該屬性的值取以下三個中的一個:

normal (將多個空格折疊成一個)

pre (不折疊空格)

nowrap (不允許換行,除非遇到
標記)


目錄樣式類型

語法: list-style-type: <值>

允許值: disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none

初始值: disc

適用於: 帶有顯示值的目錄項元素

向下兼容: 是

目錄樣式項屬性指定目錄項標記的類型,當目錄樣式圖象值為none或當圖象載入選項被關閉時使用。

例如:

LI.square { list-style-type: square }

UL.plain { list-style-type: none }

OL { list-style-type: upper-alpha } /* A B C D E etc. */

OL OL { list-style-type: decimal } /* 1 2 3 4 5 etc. */

OL OL OL { list-style-type: lower-roman } /* i ii iii iv v etc. */


目錄樣式圖象

語法: list-style-image: <值>

允許值: | none

初始值: none

適用於: 帶有顯示值的目錄項元素

向下兼容: 是

當圖象載入選項打開時,目錄樣式圖象屬性在指定目錄項標記使用哪個圖象代替由目錄樣式類型屬性指定的標記。

例如:

UL.check { list-style-image: url(/LI-markers/checkmark.gif) }

UL LI.x { list-style-image: url(x.png) }


目錄樣式位置

語法: list-style-position: <值>

允許值: inside | outside

初始值: outside

適用於: 帶有顯示值的目錄項元素

向下兼容: 是

目錄樣式位置屬性可以取值inside(內部) or outside(外部),其中outside是缺省值。整個屬性決定關於目錄項的標記應放在那里。如果使用inside值,換行會移到標記下,而不是縮進。應用的例子如下:

Outside rendering:

  • List item 1

second line of list item

Inside rendering:

  • List item 1

second line of list item


目錄樣式

語法: list-style: <值>

允許值: <目錄樣式類型> || <目錄樣式位置> ||

初始值: 未定義

適用於: 帶有顯示值的目錄項元素

向下兼容: 是

目錄樣式屬性是目錄樣式類型、目錄樣式位置,和目錄樣式圖象屬性的略寫。

例如:

LI.square { list-style: square inside }

UL.plain { list-style: none }

UL.check { list-style: url(/LI-markers/checkmark.gif) circle }

OL { list-style: upper-alpha }

OL OL { list-style: lower-roman inside }

上邊界

語法: margin-top: <值>

允許值: <長度> | <百分比> | auto

初始值: 0

適用於: 所有元素

向下兼容: 否

上邊界屬性用一個指定的長度或百分比值來設置元素的上邊界。百分比值參考上級元素的寬度。允許使用負值邊際。

例如,以下的規則將消除文件的上邊界。

BODY { margin-top: 0 }

注意如果邊界在垂直方向鄰接(重疊)了,會改用其中最大的那個邊界值。


右邊界

語法: margin-right: <值>

允許值: <長度> | <百分比> | auto

初始值: 0

適用於: 所有元素

向下兼容: 否

右邊界屬性用一個指定的長度或百分比值來設置元素的右邊界。百分比值參考上級元素的寬度。允許使用負值邊際。

例如:

P.narrow { margin-right: 50% }

注意如果邊界在水平方向鄰接(重疊)了,不會改用其它邊界值。


下邊界

語法: margin-bottom: <值>

允許值: <長度> | <百分比> | auto

初始值: 0

適用於: 所有元素

向下兼容: 否

下邊界屬性用一個指定的長度或百分比值來設置元素的下邊界。百分比值參考上級元素的寬度。允許使用負值邊際。

例如:

DT { margin-bottom: 3em }

注意如果邊界在垂直方向鄰接(重疊)了,會改用其中最大的那個邊界值。


左邊界

語法: margin-left: <值>

允許值: <長度> | <百分比> | auto

初始值: 0

適用於: 所有元素

向下兼容: 否

左邊界屬性用一個指定的長度或百分比值來設置元素的左邊界。百分比值參考上級元素的寬度。允許使用負值邊際。

例如:

ADDRESS { margin-left: 50% }

注意如果邊界在水平方向鄰接(重疊)了,不會改用其它邊界值。


邊界

語法: margin: <值>

允許值: [ <長度> | <百分比> | auto ]{1,4}

初始值: 未定義

適用於: 所有元素

向下兼容: 否

邊界屬性用一到四個值來設置元素的邊界,每個值都是長度、百分比或者自動。百分比值參考上級元素的寬度。允許使用負值邊際。

如果四個值都給出了,它們分別被應用於上、右、下和左邊界。如果只給出一個值,它被應用於所有邊界。如果兩個或三個值給出了,省略了的值與對邊相等。

邊界聲明包括以下例子:

BODY { margin: 5em } /* 所有邊界設為5em */

P { margin: 2em 4em } /* 上和下邊界為2em,左和右邊界為4em */

DIV { margin: 1em 2em 3em 4em } /* 上邊界為1em,右邊界為2em,下邊界為3em,左邊界為4em */

注意如果邊界在垂直方向鄰接(重疊)了,會改用其中最大的那個邊界值。而水平方向則不會。

使用邊界屬性可以一次性地設置所有邊界;也可以選擇使用上邊界、下邊界、左邊界和右邊界屬性。


上補白

語法: padding-top: <值>

允許值: <長度> | <百分比>

初始值: 0

適用於: 所有對象

向下兼容: 否

上補白屬性描述上邊框和選擇符的內容之間有多少間隔。該值可以是一個長度或百分比。百分比的值參考上級元素的寬度。不能使用負值。


右補白

語法: padding-right: <值>

允許值: <長度> | <百分比>

初始值: 0

適用於: 所有對象

向下兼容: 否

右補白屬性描述右邊框和選擇符的內容之間有多少間隔。該值可以是一個長度或百分比。百分比的值參考上級元素的寬度。不能使用負值。


下補白

語法: padding-bottom: <值>

允許值: <長度> | <百分比>

初始值: 0

適用於: 所有對象

向下兼容: 否

下補白屬性描述下邊框和選擇符的內容之間有多少間隔。該值可以是一個長度或百分比。百分比的值參考上級元素的寬度。不能使用負值。


左補白

語法: padding-left: <值>

允許值: <長度> | <百分比>

初始值: 0

適用於: 所有對象

向下兼容: 否

左補白屬性描述左邊框和選擇符的內容之間有多少間隔。該值可以是一個長度或百分比。百分比的值參考上級元素的寬度。不能使用負值。

posted @ 2019-06-24 02:32  WinkJie  閱讀( 435)  評論( 0編輯  收藏
/* 點擊爆炸效果*/ /* 鼠標點擊求贊文字特效 */ /*鼠標跟隨效果*/


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM