一区二区免费视频中文乱码,欧洲熟妇色欧美,国产精品一区二区熟女不卡

CSS應(yīng)用基礎(chǔ)教程(6) 區(qū)塊性質(zhì)

sj33cn — Sun, 05 Mar 2006 04:20:00 +0000

本　章　Ｃ　Ｓ　Ｓ　的　主　要　作　用

　　本章介紹的是區(qū)塊性質(zhì)的ＣＳＳ指令以及它們的應(yīng)用與特性，可以設(shè)定與控制區(qū)塊的位置，大小及邊緣寬度等性質(zhì)。本章也將分成兩個(gè)部份為您介紹，第一部份要講的是區(qū)塊各部份名稱與概念的介紹，對(duì)于區(qū)塊有一點(diǎn) 概念后，第二部份才再進(jìn)入?yún)^(qū)塊性質(zhì)的ＣＳＳ指令的介紹。

區(qū)　塊　各　部　份　名　稱　與　概　念

　　其實(shí)我們還可以把所謂的「區(qū)塊」細(xì)分成的幾個(gè)部份。
由外而內(nèi)為您作介紹：
MARGIN：邊緣，雖然是通透的部份，但是可以藉由邊緣寬度的調(diào)整來(lái)達(dá)到內(nèi)容元素位置調(diào)整的目的。

BORDER：邊框，就是外框的部份，經(jīng)由ＣＳＳ指令您可以控制邊框的寬度、顏色和樣式，不再死板！

PADDING：補(bǔ)白，也就是內(nèi)容元素與框架之間的這段距離與空間，也可以利用ＣＳＳ指令去控制大小。

元素：內(nèi)容元素，也就是您放置于該區(qū)塊內(nèi)的內(nèi)容，或?yàn)槲淖郑驗(yàn)閳D形，或?yàn)樗衅渌亍?

　　附帶一提的是，所謂的區(qū)塊寬度是指整個(gè)包含邊緣在內(nèi)的寬度，而元素寬度指的只是內(nèi)容元素的寬度。有了這些對(duì)區(qū)塊各部份的基本概念與認(rèn)識(shí)之后，接下來(lái)就要來(lái)介紹控制區(qū)塊各部份分別的的ＣＳＳ指令了！

區(qū)　塊　性　質(zhì)　的　Ｃ　Ｓ　Ｓ　指　令

margin-top　　　設(shè)定上邊緣寬度 margin-right　設(shè)定右邊緣寬度
margin-bottom　設(shè)定下邊緣寬度 margin-left　　設(shè)定左邊緣寬度

支　持：ＩＥ３、ＩＥ４、ＮＣ４
適　用：區(qū)塊元素
可能值：長(zhǎng)度單位，請(qǐng)參考第一章基本單位的相關(guān)說(shuō)明
百分比，相對(duì)于元素寬度大小
auto 使用瀏覽器預(yù)設(shè)值
預(yù)設(shè)值：0
繼承性：無(wú)

一般范例：DIV { margin-top : 20pt }
同軸范例：

margin　綜合設(shè)定邊緣寬度
支　持：ＩＥ３、ＩＥ４、ＮＣ４
適　用：區(qū)塊元素
可能值：依序設(shè)定top,right,bottom,left的邊緣寬度 {1,4} 長(zhǎng)度單位，請(qǐng)參考第一章基本單位的相關(guān)說(shuō)明
{1,4} 百分比，相對(duì)于元素寬度大小
auto {1,4} 使用瀏覽器預(yù)設(shè)值
預(yù)設(shè)值：無(wú)
繼承性：無(wú)

一般范例：DIV { margin : 20pt 15pt 10pt 5pt }
同軸范例：

　　要附帶說(shuō)明的是，如果指定了四個(gè)合法設(shè)定值，則會(huì)依序套用于四個(gè)邊緣；如果只有指定一個(gè)合法設(shè)訂值，則會(huì)統(tǒng)一套用于四個(gè)邊持；若只有指定二或三個(gè)合法設(shè)定值，則未指定的邊緣會(huì)套用對(duì)邊的寬度設(shè)定值。
DIV { margin: 20pt } →top=20pt;right=20pt;bottom=20pt;left=20pt
DIV { margin: 20pt 15pt } →top=20pt;right=15pt;bottom=20pt;left=15pt
DIV { margin: 20pt 15pt 10pt } →top=20pt;right=15pt;bottom=10pt;left=15pt

border-top-width　　設(shè)定上邊框?qū)挾?border-right-width　設(shè)定右邊框?qū)挾?
border-bottom-width設(shè)定下邊框?qū)挾?border-left-width　　設(shè)定左邊框?qū)挾?

支　持：ＩＥ４、ＮＣ４
適　用：區(qū)塊元素
可能值：thin < medium < thick thin 統(tǒng)一的絕對(duì)單位，因?yàn)g覽器而異
medium 統(tǒng)一的絕對(duì)單位，因?yàn)g覽器而異
thick 統(tǒng)一的絕對(duì)單位，因?yàn)g覽器而異
長(zhǎng)度單位，請(qǐng)參考第一章基本單位的相關(guān)說(shuō)明
預(yù)設(shè)值：medium
繼承性：無(wú)

一般范例：DIV { border-top-width : 2pt }
同軸范例：

border-width　綜合設(shè)定邊框?qū)挾?
支　持：ＩＥ４、ＮＣ４
適　用：區(qū)塊元素
可能值：依序設(shè)定top,right,bottom,left的邊框?qū)挾?thin {1,4} 統(tǒng)一的絕對(duì)單位，因?yàn)g覽器而異
medium {1,4} 統(tǒng)一的絕對(duì)單位，因?yàn)g覽器而異
thick {1,4} 統(tǒng)一的絕對(duì)單位，因?yàn)g覽器而異
{1,4} 長(zhǎng)度單位，請(qǐng)參考第一章基本單位的相關(guān)說(shuō)明
預(yù)設(shè)值：無(wú)
繼承性：無(wú)

一般范例：DIV { border-width : 4pt 3pt 2pt 1pt }
同軸范例：

　　要附帶說(shuō)明的是，如果指定了四個(gè)合法設(shè)定值，則會(huì)依序套用于四個(gè)邊框；如果只有指定一個(gè)合法設(shè)訂值，則會(huì)統(tǒng)一套用于四個(gè)邊框；若只有指定二或三個(gè)合法設(shè)定值，則未指定的邊框會(huì)套用對(duì)邊的寬度設(shè)定值。
DIV { border-width: 2pt } →top=2pt;right=2pt;bottom=2pt;left=2pt
DIV { border-width: 2pt 3pt } →top=2pt;right=3pt;bottom=2pt;left=3pt
DIV { border-width: 2pt 3pt 4pt } →top=2pt;right=3pt;bottom=4pt;left=3pt

border-top-color　　設(shè)定上邊框顏色 border-right-color　設(shè)定右邊框顏色
border-bottom-color 設(shè)定下邊框顏色 border-left-color　設(shè)定左邊框顏色

支　持：ＩＥ４、ＮＣ４
適　用：區(qū)塊元素
可能值：設(shè)定顏色，請(qǐng)參考第一章顏色使用的相關(guān)說(shuō)明
預(yù)設(shè)值：color性質(zhì)之值
繼承性：無(wú)

一般范例：DIV { border-top-color : BLUE }
同軸范例：

border-color　綜合設(shè)定邊框顏色
支　持：ＩＥ４、ＮＣ４
適　用：區(qū)塊元素
可能值：依序設(shè)定top,right,bottom,left的邊框顏色 {1,4} 設(shè)定顏色，請(qǐng)參考第一章顏色使用的相關(guān)說(shuō)明
預(yù)設(shè)值：無(wú)
繼承性：無(wú)

一般范例：DIV { border-color : RED GREEN BLUE YELLOW }
同軸范例：

　　要附帶說(shuō)明的是，如果指定了四個(gè)合法設(shè)定值，則會(huì)依序套用于四個(gè)邊框；如果只有指定一個(gè)合法設(shè)訂值，則會(huì)統(tǒng)一套用于四個(gè)邊框；若只有指定二或三個(gè)合法設(shè)定值，則未指定的邊框會(huì)套用對(duì)邊的顏色設(shè)定值；若無(wú)指定此一性質(zhì)，則套用color性質(zhì)之設(shè)定值。
DIV{border-color:RED } →top=RED;right=RED;bottom=RED;left=RED
DIV{border-color:RED GREEN } →top=RED;right=GREEN;bottom=RED;left=GREEN
DIV{border-color: RED GREEN BLUE} →top=RED;right=GREEN;bottom=BLUE;left=GREEN

border-top-style　　設(shè)定上邊框樣式 border-right-style　設(shè)定右邊框樣式
border-bottom-style　設(shè)定下邊框樣式 border-left-style　　設(shè)定左邊框樣式

支　持：ＩＥ４、ＮＣ４
適　用：區(qū)塊元素
可能值： none 不顯示邊框
dotted 虛線（ＩＥ４、ＮＣ４瀏覽器當(dāng)作實(shí)線）
dashed 短直線（ＩＥ４、ＮＣ４瀏覽器當(dāng)作實(shí)線）
solid 實(shí)線
double 雙直線
ridge ３Ｄ凸線
groove ３Ｄ凹線
outset ３Ｄ隆起（ＩＥ４不顯示）
inset ３Ｄ嵌入（ＩＥ４不顯示）
預(yù)設(shè)值：none
繼承性：無(wú)

一般范例：DIV { border-top-style : inset }
同軸范例：

border-style　綜合設(shè)定邊框樣式
支　持：ＩＥ４、ＮＣ４
適　用：區(qū)塊元素
可能值：依序設(shè)定top,right,bottom,left的邊框樣式 none {1,4} 不顯示邊框
dotted {1,4} 虛線（ＩＥ４、ＮＣ４瀏覽器當(dāng)作實(shí)線）
dashed {1,4} 短直線（ＩＥ４、ＮＣ４瀏覽器當(dāng)作實(shí)線）
solid {1,4} 實(shí)線
double {1,4} 雙直線
ridge {1,4} ３Ｄ凸線
groove {1,4} ３Ｄ凹線
outset {1,4} ３Ｄ隆起（ＩＥ４不顯示）
inset {1,4} ３Ｄ嵌入（ＩＥ４不顯示）
預(yù)設(shè)值：無(wú)
繼承性：無(wú)

一般范例：DIV { border-style : ridge groove outset inset }
同軸范例：

　　要附帶說(shuō)明的是，如果指定了四個(gè)合法設(shè)定值，則會(huì)依序套用于四個(gè)邊框；如果只有指定一個(gè)合法設(shè)訂值，則會(huì)統(tǒng)一套用于四個(gè)邊框；若只有指定二或三個(gè)合法設(shè)定值，則未指定的邊框會(huì)套用對(duì)邊的樣式設(shè)定值。
DIV{border-width:outset} →top=outset;right=outset;bottom=outset;left=outset
DIV{border-width:outset inset} →top=outset;right=inset;bottom=outset;left=inset
DIV{border-width:outset inset ridge} →top=outset;right=inset;bottom=ridge;left=inset

border-top　　綜合設(shè)定上邊框性質(zhì) border-right　綜合設(shè)定右邊框性質(zhì)
border-bottom　綜合設(shè)定下邊框性質(zhì) border-left　　綜合設(shè)定左邊框性質(zhì)

支　持：ＩＥ４、ＮＣ４
適　用：區(qū)塊元素
可能值：設(shè)定該邊框?qū)挾龋?qǐng)參考上面的介紹與說(shuō)明
設(shè)定該邊框樣式，請(qǐng)參考上面的介紹與說(shuō)明
設(shè)定該邊框顏色，請(qǐng)參考上面的介紹與說(shuō)明
預(yù)設(shè)值：無(wú)
繼承性：無(wú)

一般范例：DIV { border-top : 2pt solid BLUE }
同軸范例：

border　綜合設(shè)定邊框性質(zhì)
支　持：ＩＥ４、ＮＣ４
適　用：區(qū)塊元素
可能值：設(shè)定邊框?qū)挾龋?qǐng)參考上面的介紹與說(shuō)明
設(shè)定邊框樣式，請(qǐng)參考上面的介紹與說(shuō)明
設(shè)定邊框顏色，請(qǐng)參考上面的介紹與說(shuō)明
預(yù)設(shè)值：無(wú)
繼承性：無(wú)

一般范例：DIV { border : 2pt solid BLUE }
同軸范例：

　　要附帶說(shuō)明的是，這個(gè)指令只能指定一組設(shè)定值，也就是說(shuō)，上右下左四個(gè)邊框都將套用同一組的設(shè)定值，而不能作個(gè)別邊框的設(shè)定值變化。

padding-top　　　設(shè)定上方補(bǔ)白寬度 padding-right　設(shè)定右方補(bǔ)白寬度
padding-bottom　設(shè)定下方補(bǔ)白寬度 padding-left　　設(shè)定左方補(bǔ)白寬度

支　持：ＩＥ４、ＮＣ４
適　用：區(qū)塊元素
可能值：長(zhǎng)度單位，請(qǐng)參考第一章基本單位的相關(guān)說(shuō)明
百分比，相對(duì)于元素寬度大小
預(yù)設(shè)值：0
繼承性：無(wú)

一般范例：DIV { padding-top : 5pt }
同軸范例：

padding　綜合設(shè)定補(bǔ)白寬度
支　持：ＩＥ４、ＮＣ４
適　用：區(qū)塊元素
可能值：依序設(shè)定top,right,bottom,left的補(bǔ)白寬度 {1,4} 長(zhǎng)度單位，請(qǐng)參考第一章基本單位的相關(guān)說(shuō)明
{1,4} 百分比，相對(duì)于元素寬度大小
預(yù)設(shè)值：無(wú)
繼承性：無(wú)

一般范例：DIV { padding : 2pt 5pt 2pt 5pt }
同軸范例：

　　要附帶說(shuō)明的是，如果指定了四個(gè)合法設(shè)定值，則會(huì)依序套用于四個(gè)補(bǔ)白；如果只有指定一個(gè)合法設(shè)訂值，則會(huì)統(tǒng)一套用于四個(gè)補(bǔ)白；若只有指定二或三個(gè)合法設(shè)定值，則未指定的補(bǔ)白會(huì)套用對(duì)邊的寬度設(shè)定值。
DIV { padding: 1pt } →top=1pt;right=1pt;bottom=1pt;left=1pt
DIV { padding: 1pt 2pt } →top=1pt;right=2pt;bottom=1pt;left=2pt
DIV { padding: 1pt 2pt 3pt } →top=1pt;right=2pt;bottom=3pt;left=2pt

CSS應(yīng)用基礎(chǔ)教程(4) 顏色背景

sj33cn — Sun, 05 Mar 2006 04:19:00 +0000

本　章　Ｃ　Ｓ　Ｓ　的　主　要　作　用

　　在前面的章節(jié)介紹完了聲明與應(yīng)用的方法及一些特性之後，從這章開(kāi)始，便要正式進(jìn)入ＣＳＳ的指令介紹了！本章有兩個(gè)介紹的主題，第一個(gè)部份介紹的是顏色與背景性質(zhì)的ＣＳＳ，其主要的作用在于設(shè)定元素的前景顏色、背景顏色與背景圖形等樣式設(shè)定的性質(zhì)；而第二部份為您介紹的是用于控制擺放元素位置的ＣＳＳ的指令。

顏　色　背　景　的　Ｃ　Ｓ　Ｓ　指　令

color　設(shè)定前景顏色
支　持：ＩＥ３、ＩＥ４、ＮＣ４
適　用：所有元素
可能值：設(shè)定顏色，請(qǐng)參考第一章顏色使用的相關(guān)說(shuō)明
預(yù)設(shè)值：視瀏覽器而定
繼承性：有

一般范例：SPAN { color : BLUE }
同軸范例：

background-color　設(shè)定背景顏色
支　持：ＩＥ４、ＮＣ４
適　用：所有元素
可能值：設(shè)定顏色，請(qǐng)參考第一章顏色使用的相關(guān)說(shuō)明
transparent 將父元素（顏色或圖案）的背景透明化
預(yù)設(shè)值：transparent
繼承性：無(wú)

一般范例：BODY { background-color : BLUE }
同軸范例：

background-image　設(shè)定背景圖形
支　持：ＩＥ４、ＮＣ４
適　用：所有元素
可能值：設(shè)定圖檔URL，請(qǐng)參考第一章URL表示的相關(guān)說(shuō)明
none 不使用背景圖案
預(yù)設(shè)值：transparent
繼承性：無(wú)

一般范例：
BODY { background-image : URL(“http://yourweb/path/file_name”) }
同軸范例：
http://yourweb/path/file_name‘)”>

background-repeat　設(shè)定背景重復(fù)
支　持：ＩＥ４、ＮＣ４
適　用：所有元素
可能值： repeat 重復(fù)背景圖形填滿頁(yè)面
repeat-x 水平方向重復(fù)背景圖形
repeat-y 垂直方向重復(fù)背景圖形
no-repeat 不重復(fù)顯示背景圖形
預(yù)設(shè)值：repeat
繼承性：無(wú)

一般范例：BODY { background-repeat : repeat-x }
同軸范例：

background-attachment　設(shè)定背景附著
支　持：ＩＥ４、ＮＣ４
適　用：所有元素
可能值： scroll 背景圖形隨著卷軸卷動(dòng)
fixed 背景圖形隨著卷軸卷動(dòng)（浮水印）
預(yù)設(shè)值：scrool
繼承性：無(wú)

一般范例：BODY { background-attachment : fixed }
同軸范例：

background-position　設(shè)定背景位置
支　持：ＩＥ４、ＮＣ４
適　用：區(qū)塊元素
可能值： X% Y% 圖形上X% Y%的點(diǎn)對(duì)準(zhǔn)元素的X% Y%位置
X Y 將圖形左上角置于元素左上角水平 X垂直 Y之處
center 背景圖形置于中央
left 背景圖形對(duì)　左邊
right 背景圖形對(duì)　右邊
top 背景圖形對(duì)　頂部
bottom 背景圖形對(duì)　底部
預(yù)設(shè)值：0% 0%
繼承性：無(wú)

一般范例：BODY { background- position : 100% 50% }
同軸范例：

background　綜合設(shè)定背景性質(zhì)
支　持：ＩＥ３、ＩＥ４、ＮＣ４
適　用：所有元素
可能值： background-color 設(shè)定背景顏色
background-image 設(shè)定背景圖形
background-repeat 設(shè)定背景重復(fù)
background-attachment 設(shè)定背景附著
background-position 設(shè)定背景位置
預(yù)設(shè)值：無(wú)
繼承性：無(wú)

一般范例：
BODY { BLUE url(image/gif) repeat-x fixed center }
同軸范例：

位　置　擺　放　的　Ｃ　Ｓ　Ｓ　指　令

float　設(shè)定浮動(dòng)性質(zhì)（多用于文繞圖的情形）
支　持：ＩＥ４、ＮＣ４
適　用：區(qū)塊元素或圖形
可能值： left 元素*左，文字圍繞其右
right 元素*右，文字圍繞其左
none 以預(yù)設(shè)的方法顯示
預(yù)設(shè)值：none
繼承性：無(wú)

一般范例：DIV { float : right }
同軸范例：

clear　設(shè)定清除性質(zhì)（設(shè)定是否允許浮動(dòng)元素之存在）
支　持：ＩＥ４
適　用：區(qū)塊元素或圖形
可能值： both 若兩邊有浮動(dòng)元素，則該元素移至浮動(dòng)元素下方
left 若左邊有浮動(dòng)元素，則該元素移至浮動(dòng)元素下方
right 若右邊有浮動(dòng)元素，則該元素移至浮動(dòng)元素下方
none 以預(yù)設(shè)的方法顯示
預(yù)設(shè)值：none
繼承性：無(wú)

一般范例：DIV { clear : right }
同軸范例：

width　設(shè)定寬度
支　持：ＩＥ４、ＮＣ４
適　用：區(qū)塊元素或圖形
可能值：長(zhǎng)度單位，請(qǐng)參考第一章基本單位的相關(guān)說(shuō)明
百分比，以父元素寬度為基準(zhǔn)
auto 以固定比例自動(dòng)變化大小
預(yù)設(shè)值：auto
繼承性：無(wú)

一般范例：DIV { width : 300pt }
同軸范例：

height　設(shè)定高度
支　持：ＩＥ４、ＮＣ４
適　用：區(qū)塊元素或圖形
可能值：長(zhǎng)度單位，請(qǐng)參考第一章基本單位的相關(guān)說(shuō)明
百分比，以父元素寬度為基準(zhǔn)
auto 以固定比例自動(dòng)變化大小
預(yù)設(shè)值：auto
繼承性：無(wú)

一般范例：DIV { height : 300pt }
同軸范例：

position　設(shè)定位置
支　持：ＩＥ４、ＮＣ４
適　用：區(qū)塊元素
可能值： absolute 以父元素為基準(zhǔn)，擺設(shè)在特定位置上
relative 以相鄰元素為基準(zhǔn)，擺設(shè)在特定位置上
static 預(yù)設(shè)位置，以該元素于原始碼中位置而定
預(yù)設(shè)值：absolute
繼承性：無(wú)

一般范例：DIV { position : static }
同軸范例：

top　設(shè)定頂端位置
支　持：ＩＥ４、ＮＣ４
適　用：區(qū)塊元素
可能值：長(zhǎng)度單位，請(qǐng)參考第一章基本單位的相關(guān)說(shuō)明
百分比，以父元素寬度為基準(zhǔn)
auto 以正常方式顯示
預(yù)設(shè)值：auto
繼承性：無(wú)

一般范例：DIV { top : 30pt }
同軸范例：

left　設(shè)定左端位置
支　持：ＩＥ４、ＮＣ４
適　用：區(qū)塊元素
可能值：長(zhǎng)度單位，請(qǐng)參考第一章基本單位的相關(guān)說(shuō)明
百分比，以父元素寬度為基準(zhǔn)
auto 以正常方式顯示
預(yù)設(shè)值：auto
繼承性：無(wú)

一般范例：DIV { left : 30pt }
同軸范例：

clip　設(shè)定裁剪（設(shè)定某區(qū)域形狀及大小，區(qū)域外通透）
支　持：ＩＥ４、ＮＣ４
適　用：區(qū)塊元素
可能值： rect(top,right,bottom,left) 設(shè)定矩形之上右下左長(zhǎng)度，會(huì)自動(dòng)比對(duì)對(duì)邊長(zhǎng)度
一般寫(xiě)法為rect(0,長(zhǎng)度,長(zhǎng)度,0)
不可以寫(xiě)為rect(0,0,長(zhǎng)度,長(zhǎng)度)
四個(gè)數(shù)值皆可以”auto”代替
auto 以正常方式顯示
預(yù)設(shè)值：auto
繼承性：無(wú)

一般范例：DIV { clip : rect(0,100px,50px,0) }
同軸范例：

overflow　設(shè)定溢位處理（控制當(dāng)元素內(nèi)容超過(guò)該元素大小時(shí)的顯示方式）
支　持：ＩＥ４
適　用：區(qū)塊元素
可能值： visible 元素將不會(huì)依所設(shè)訂大小顯示，而能看見(jiàn)所有內(nèi)容
hidden 超過(guò)元素所設(shè)訂大小之部份將被隱藏不予顯示
scroll 如有必要出現(xiàn)卷軸可讓使用者看到全部的內(nèi)容
auto 以預(yù)設(shè)的方式顯示
預(yù)設(shè)值：auto
繼承性：無(wú)

一般范例：DIV { overflow : scroll }
同軸范例：

visibility　設(shè)定可視度
支　持：ＩＥ４、ＮＣ４
適　用：所有元素
可能值： visible 設(shè)定該元素顯示
hidden 設(shè)定該元素不顯示，但仍占據(jù)空間
inherit 以父元素可視度決定
預(yù)設(shè)值：inherit
繼承性：無(wú)

一般范例：DIV { visibility : hidden }
同軸范例：

z-index　設(shè)定Ｚ軸參數(shù)（三度空間）
支　持：ＩＥ４、ＮＣ４
適　用：區(qū)塊元素
可能值：十進(jìn)位數(shù)值，數(shù)值大的元素會(huì)出現(xiàn)在數(shù)值小的元素的上方
auto 當(dāng)元素位置重復(fù)時(shí)，原始碼中寫(xiě)在後面元素會(huì)出現(xiàn)在寫(xiě)在前面元素的上方
預(yù)設(shè)值：auto
繼承性：無(wú)

一般范例：DIV { z-index : 3 }
同軸范例：

CSS應(yīng)用基礎(chǔ)教程(5) 文字性質(zhì)

sj33cn — Sun, 05 Mar 2006 04:19:00 +0000

本　章　Ｃ　Ｓ　Ｓ　的　主　要　作　用

　　本章要介紹的是文字相關(guān)的ＣＳＳ指令。通常一個(gè)網(wǎng)站的內(nèi)容最多的就是文字了，透過(guò)這些文字相關(guān)的ＣＳＳ指令，您可以將您的網(wǎng)頁(yè)內(nèi)容排版得美美的。本章將分兩個(gè)部份為您介紹，第一部份是字型性質(zhì)的ＣＳＳ指令，用以控制文字字型的各種樣式；第二部份介紹的是文字性質(zhì)的ＣＳＳ指令，用以控制文字段落的外觀及擺設(shè)方式。

字　型　性　質(zhì)　的　Ｃ　Ｓ　Ｓ　指　令

font-family　設(shè)定文字字型
支　持：ＩＥ３、ＩＥ４
適　用：所有元素
可能值：字型名稱
預(yù)設(shè)值：視瀏覽器而定
繼承性：有

一般范例：SPAN { family-name : “標(biāo)楷體” }
同軸范例：

font-style　設(shè)定字體樣式
支　持：ＩＥ３、ＩＥ４、ＮＣ４
適　用：所有元素
可能值： normal 普通字
italic 斜體字
oblique 斜體字
預(yù)設(shè)值：normal
繼承性：有

一般范例：SPAN { font-style : italic }
同軸范例：

font-weight　設(shè)定字型份量
支　持：ＩＥ３、ＩＥ４、ＮＣ４
適　用：所有元素
可能值： normal 普通字
bold 粗體字
bolder 相對(duì)于父元素稍粗
lighter 相對(duì)于父元素稍細(xì)
100,200,300,
400,500,600,
700,800,900. 數(shù)字由小到大代表筆畫(huà)由細(xì)到粗
normal=400　bold=700
預(yù)設(shè)值：normal
繼承性：有

一般范例：SPAN { font-weight : bolder }
同軸范例：

font-size　設(shè)定文字大小
支　持：ＩＥ３、ＩＥ４、ＮＣ４
適　用：所有元素
可能值：絕對(duì)大小，可用的參數(shù)由小到大分別有七項(xiàng)
xx-small, x-small, small, medium, large, x-large, xx-large
相對(duì)大小，可用的參數(shù)為larger, smaller兩項(xiàng)
以父元素字型大小為基準(zhǔn)
長(zhǎng)度單位，請(qǐng)參考第一章基本單位的相關(guān)說(shuō)明
百分比，以父元素字型大小為基準(zhǔn)
預(yù)設(shè)值：medium
繼承性：有

一般范例：SPAN { font-size : 12pt }
同軸范例：

font-variant　設(shè)定文字轉(zhuǎn)換
支　持：ＩＥ３、ＩＥ４、ＮＣ４
適　用：所有元素
可能值： normal 普通字
small-caps 將小寫(xiě)文字轉(zhuǎn)換為大寫(xiě)
預(yù)設(shè)值：normal
繼承性：有

一般范例：SPAN { font-variant : small-caps }
同軸范例：

font　綜合設(shè)定字型性質(zhì)
支　持：ＩＥ３、ＩＥ４、ＮＣ４
適　用：所有元素
可能值：設(shè)定字體樣式
設(shè)定文字轉(zhuǎn)換
設(shè)定字型份量
設(shè)定文字大小與列高（請(qǐng)參考設(shè)定文字列高部份）
設(shè)定文字字型
預(yù)設(shè)值：無(wú)
繼承性：有

一般范例： SPAN { font : bolder small-caps 12pt/120% Arial }
同軸范例：< SPAN style=”font : bolder small-caps 12pt/120% Arial”>

文　字　性　質(zhì)　的　Ｃ　Ｓ　Ｓ　指　令

line-height　設(shè)定列高
支　持：ＩＥ３、ＩＥ４、ＮＣ４
適　用：所有元素
可能值： normal 普通列高，根據(jù)字體變化合理高度，視瀏覽器而定
以元素字型大小乘以該數(shù)即為列高
設(shè)定長(zhǎng)度，請(qǐng)參考第一章基本單位的相關(guān)說(shuō)明
百分比，相對(duì)于元素字型大小為比例
預(yù)設(shè)值：normal
繼承性：有

一般范例：DIV { line-height : 120% }
同軸范例：

text-align　設(shè)定文字對(duì)　
支　持：ＩＥ３、ＩＥ４、ＮＣ４
適　用：區(qū)塊元素
可能值： center 對(duì)　中央
right 對(duì)　右邊
left 對(duì)　左邊
justify 左右對(duì)　
預(yù)設(shè)值：視瀏覽器而定
繼承性：有

一般范例：DIV { text-align : center }
同軸范例：

vertical-align　設(shè)定垂直對(duì)　
支　持：ＩＥ４
適　用：同軸元素
可能值： top 對(duì)　同列最高元素頂端
bottom 對(duì)　同列最低元素底端
baseline 對(duì)　底線
middle 對(duì)　中央
sub 將元素置于下標(biāo)
super 將元素置于上標(biāo)
text-top 對(duì)　文字頂端
text-bottom 對(duì)　文字底端
參照元素本身列高，以父元素底線為基準(zhǔn)作位移
預(yù)設(shè)值：baseline
繼承性：有

一般范例：SPAN { vertical-align : sub }
同軸范例：

text-decoration　設(shè)定文字裝飾
支　持：ＩＥ３、ＩＥ４、ＮＣ４
適　用：所有元素
可能值： none 普通字
underline 文字加底線
overline 文字加頂線
line-through 文字加刪除線
blink 設(shè)定文字閃爍
預(yù)設(shè)值：none
繼承性：有

一般范例：SPAN { text-decoration : blink }
同軸范例：

text-transform　設(shè)定文字轉(zhuǎn)換
支　持：ＩＥ３、ＩＥ４、ＮＣ４
適　用：所有元素
可能值： none 普通字
capitalize 將英文單字地一個(gè)字母轉(zhuǎn)換為大寫(xiě)
uppercase 將所有文字轉(zhuǎn)換為大寫(xiě)
lowercase 將所有文字轉(zhuǎn)換為小寫(xiě)
預(yù)設(shè)值：none
繼承性：有

一般范例：SPAN { text-transform : uppercase }
同軸范例：

letter-spacing　設(shè)定字母間隔
支　持：ＩＥ４
適　用：所有元素
可能值： normal 不改變字母間隔，使用瀏覽器預(yù)設(shè)值
要額外增加的間隔長(zhǎng)度，可為負(fù)值
預(yù)設(shè)值：normal
繼承性：有

一般范例：SPAN { letter-spacing : 0.5pt }
同軸范例：

text-indent　設(shè)定文字縮排
支　持：ＩＥ３、ＩＥ４、ＮＣ４
適　用：區(qū)塊元素
可能值：長(zhǎng)度單位，請(qǐng)參考第一章基本單位的相關(guān)說(shuō)明
以父元素寬度為基準(zhǔn)的百分比值
預(yù)設(shè)值：0
繼承性：有

一般范例：DIV { text-indent : 3pt }
同軸范例：

CSS應(yīng)用基礎(chǔ)教程(3) 應(yīng)用補(bǔ)充

sj33cn — Sun, 05 Mar 2006 04:18:00 +0000

在講挑選者的特性之前，要提一下的是ＣＳＳ繼承的特性。所謂的繼承的特性是指被包在內(nèi)部的標(biāo)簽將擁有外部標(biāo)簽的樣式性質(zhì)。繼承的特性最典型的應(yīng)用通常發(fā)揮在預(yù)設(shè)整份網(wǎng)頁(yè)的樣式，而要指定為其它樣式的部份再依要設(shè)定在個(gè)別元素里即可。這項(xiàng)特性可以提供網(wǎng)頁(yè)設(shè)計(jì)者更理想的發(fā)揮空間。

　　接下來(lái)就要講挑選者特性的應(yīng)用！其實(shí)這部份應(yīng)該算是聲明的一種方式，但是在您看過(guò)第二章的基本的聲明與應(yīng)用後，到這邊再講挑選者您會(huì)比較有概念點(diǎn)。在ＣＳＳ應(yīng)用或設(shè)計(jì)的時(shí)候，有幾種依據(jù)元素的關(guān)系或性質(zhì)來(lái)設(shè)定顯示特定性質(zhì)的方法，就是挑選者特性的應(yīng)用，能讓您在控制與應(yīng)用上更加靈活。

一、前後文挑選者：依聲明標(biāo)簽前後文關(guān)系顯示特定性質(zhì)的方法。
前後文挑選者便是當(dāng)瀏覽器在顯示HTML原始碼所指定的內(nèi)容時(shí)，會(huì)考慮元素標(biāo)簽的前後關(guān)系，而去顯示指定的樣式聲明。也就是說(shuō)只要HTML原始碼內(nèi)的標(biāo)簽排列前後順序符合時(shí)，該項(xiàng)聲明便會(huì)發(fā)生作用了！

元素A(標(biāo)簽A) 元素B(標(biāo)簽B) 元素C(標(biāo)簽C) … { 樣式規(guī)則}
要注意的是，前後文挑選者的聲明跟集體聲明很像，但是集體聲明的元素標(biāo)簽間要用逗號(hào)隔開(kāi)，而用前後文挑選者聲明時(shí)元素標(biāo)簽間要用空格隔開(kāi)；而這兩種聲明方式您可以混合使用。
元素A 元素B, 元素C 元素D 元素E, … { 樣式規(guī)則}
這樣您就可以用集體聲明的方式，聲明數(shù)組前後文挑選者的樣式規(guī)則。

二、類別挑選者：讓單一或數(shù)個(gè)標(biāo)簽使用同組樣式規(guī)則的方法。
類別(class)可以讓不同的元素標(biāo)簽共同套用同一組樣式性質(zhì)或相同的元素標(biāo)簽套用不同組的樣式性質(zhì)。首先介紹的是如何讓不同的元素套用同一組樣式性質(zhì)，如下面范例所寫(xiě)即可。

　　　…
　

…

　　　…

要注意在聲明時(shí)前面的小點(diǎn)，CLASS名稱可任取。而要讓相同的元素標(biāo)簽套用不同組的樣式性質(zhì)時(shí)，也可以應(yīng)用類別特性來(lái)設(shè)定。

　　　…
　

…

　　　…

要注意同樣是在聲明時(shí)的小點(diǎn)，CLASS名稱可任取。靈活運(yùn)用類別特性，可以讓您的樣式設(shè)定更具機(jī)動(dòng)性唷！

三、ＩＤ挑選者：與類別挑選者類似，不同的是在『唯一性』。
ＩＤ特性的使用與類別特性十分雷同，但是，文件里的各個(gè)ＩＤ都是唯一的。換句話說(shuō)，類別特性可以重復(fù)套用在單一或數(shù)個(gè)元素標(biāo)簽之上，但是ＩＤ屬性在一份文件里只能出現(xiàn)一次。如下面范例所寫(xiě)即可。

　　　…
　

…

　　　…

可以看到，聲明的方式是利用井字號(hào)『#』。而ＩＤ的這種『唯一性』正是讓ja;vascript或 VBScript能夠?qū)υ剡M(jìn)行控制的關(guān)鍵。

　　透過(guò)以上的介紹的挑選者特性的聲明與使用，可以讓您的樣式設(shè)定更具機(jī)動(dòng)與變化。其實(shí)您可以先熟悉上一章為您介紹的基本的聲明與應(yīng)用方法，再應(yīng)用本章所講的挑選者特性，一步步地去熟悉樣式表的使用。

連　結(jié)　擬　似　特　性　的　應(yīng)　用

　　還記得在HTML的基本語(yǔ)法，在BODY標(biāo)簽中可以用link、alink、vlink屬性去控制可連結(jié)或已連結(jié)的字體顏色嗎？現(xiàn)在亦可用ＣＳＳ去控制這些性質(zhì)，稱為『擬似類別』（pseudo class）。您可以將其當(dāng)作一般類別，聲明其樣式規(guī)則，而實(shí)際上，這些擬似類別并不用像上面講的類別挑選者，在HTML原始碼中再行設(shè)定指向的類別（CLASS）。下面介紹擬似類別的聲明與應(yīng)用。

一般的聲明方式：擬似類別是以冒號(hào)來(lái)聲明。
只要在架構(gòu)中加入下面的聲明後，則頁(yè)面中的連結(jié)文字就會(huì)依您設(shè)定的樣式顯式了！
A:link { 樣式規(guī)則 }
A:active { 樣式規(guī)則 }
A:visited { 樣式規(guī)則 }
A:hover { 樣式規(guī) 則 }
A:link用以設(shè)定未參觀連結(jié)的樣式規(guī)則。A:active用以設(shè)定作用中連結(jié)的樣式規(guī)則。A:visited用以設(shè)定已參觀連結(jié)的樣式規(guī)則。A:hover用以設(shè)定滑鼠移到連結(jié)之上時(shí)的樣式規(guī)則。而其中hover并不被NC4所支援，其它三個(gè)特性兩大瀏覽器都有支持。

　　如果您用的是IE4以上的瀏覽器，從本站鏈接您就可以知道 hover作用的妙處，以簡(jiǎn)單的樣式設(shè)定就可以達(dá)成以往要寫(xiě)好長(zhǎng)一串設(shè)定的相同效果。這個(gè)連結(jié)擬似類別也可以與上面說(shuō)過(guò)的類別挑選者特性合并使用。

Ｄ　Ｉ　Ｖ　與　Ｓ　Ｐ　Ａ　Ｎ　的　比　較

　　雖然樣式表可以套用在任何標(biāo)簽之上，但是 P和ＳＰＡＮ元素的使用更是大大地?cái)U(kuò)展了HTML的應(yīng)用層面。P和ＳＰＡＮ這兩個(gè)元素在應(yīng)用上十分類似，使用時(shí)都必加上結(jié)尾標(biāo)簽，也就是< P>…

和… 。兩個(gè)可以應(yīng)用的屬性與事件處理也很類似，都可以配合前面提過(guò)的挑選者特性來(lái)編寫(xiě)。兩者也都不強(qiáng)加顯示功能于頁(yè)面內(nèi)容之上，可以說(shuō)是使用上十分廣泛的元素標(biāo)簽。

　　而P和ＳＰＡＮ的不同之處在于：P元素定義為區(qū)塊（block），在

…

之間是一個(gè)很完整的段落區(qū)塊。而ＳＰＡＮ元素則是定義為同軸（in-line），…< /SPAN>應(yīng)用于于小范圍內(nèi)的設(shè)定。兩者可以彼此混合，夾雜使用，因?yàn)楸舜耸窍嗷オ?dú)立的。也因此，您可以利用這兩個(gè)元素，配合其它性質(zhì)，靈活地調(diào)整您的網(wǎng)頁(yè) 顯示的內(nèi)容。

CSS應(yīng)用基礎(chǔ)教程(1) 基本認(rèn)識(shí)

sj33cn — Sun, 05 Mar 2006 04:17:00 +0000

關(guān)　於　Ｃ　Ｓ　Ｓ　的　概　論

　　ＣＳＳ是『Cascading Style Sheets』的簡(jiǎn)稱，中文翻為「串接樣式表」，也有人只翻為「樣式表」。ＣＳＳ用以作為網(wǎng)頁(yè)的排版與風(fēng)格設(shè)計(jì)，在所謂的「新式網(wǎng)頁(yè)」里，ＣＳＳ不容置疑是相當(dāng)重要的一環(huán)。ＣＳＳ是以既有的基礎(chǔ)，用以彌補(bǔ)既存ＨＴＭＬ規(guī)格里的不足，也讓網(wǎng)頁(yè)的設(shè)計(jì)更為靈活。

　　這份教學(xué)文件就要來(lái)為您介紹ＣＳＳ的應(yīng)用羅！在這邊并不介紹ＣＳＳ的所有規(guī)格，僅就您在網(wǎng)頁(yè)寫(xiě)作上較常用到，較可能用到的語(yǔ)法部份及應(yīng)用的方法來(lái)為您作介紹。也由於現(xiàn)在兩瀏覽器的相容是漸行漸遠(yuǎn)，將貼心地為您注明支援該語(yǔ)法的瀏覽器。而ＩＥ從 3.0開(kāi)始便支援部份語(yǔ)法了，這點(diǎn)也會(huì)為為您注明的。

各　章　節(jié)　的　概　略　介　紹

　　為了您參考與學(xué)習(xí)上的方便，在這里先為您大略地說(shuō)明一下這份教學(xué)文件各章節(jié)所包含的內(nèi)容吧！讓您在參考時(shí)有個(gè)方向與概念。基本上，前兩章著重於概念與基本認(rèn)知的建立，也就是一些為您做一些札根的工作；第三章則為您補(bǔ)充在應(yīng)用與設(shè)定上的一些其它方式或特性的說(shuō)明與介紹。而第四章到第六章則著重於語(yǔ)法、參數(shù)與性質(zhì)的介紹，也就是真正建立在樣式表里面的東東。

第一章　ＣＳＳ的基本認(rèn)識(shí)：
就是本章啦！就介紹您一些ＣＳＳ基本概念與認(rèn)識(shí)。
第二章　ＣＳＳ的應(yīng)用方式：
為您介紹ＣＳＳ的基本宣告、應(yīng)用方法與特性介紹。
第三章　ＣＳＳ的應(yīng)用補(bǔ)充：
為您介紹ＣＳＳ的其它宣告方式、應(yīng)用與特性介紹。
第四章　頁(yè)面性質(zhì)的ＣＳＳ：
為您介紹頁(yè)面性質(zhì)的ＣＳＳ相關(guān)語(yǔ)法、參數(shù)與性質(zhì)。
第五章　文字性質(zhì)的ＣＳＳ：
為您介紹文字性質(zhì)的ＣＳＳ相關(guān)語(yǔ)法、參數(shù)與性質(zhì)。
第六章　區(qū)塊性質(zhì)的ＣＳＳ：
為您介紹區(qū)塊性質(zhì)的ＣＳＳ相關(guān)語(yǔ)法、參數(shù)與性質(zhì)。

應(yīng)　用　上　的　基　本　認(rèn)　識(shí)

　　應(yīng)用ＣＳＳ并不困難，但是請(qǐng)您先參考這里的基本認(rèn)識(shí)，對(duì)一些用語(yǔ)有了一點(diǎn)基本概念後，對(duì)於您在看後面的教學(xué)會(huì)有助益，看起來(lái)也才不會(huì)太吃力！

一、基本用語(yǔ)的認(rèn)識(shí)：
元件(element)：亦即HTML基本語(yǔ)法中的標(biāo)簽(tag)。
屬性(attribute)：用以描述標(biāo)簽特性的屬性。
例如：

中，HR為標(biāo)簽，WIDTH為屬性，而80%即為WIDTH屬性的值。
性質(zhì)(property)：用以描述元件的特性。相當(dāng)於HTML基本語(yǔ)法中的屬性。
樣式(style)：擁有一組或數(shù)組的性質(zhì)，用以描述元件特性。
挑選者(selector)：套用樣式的元件。
例如：
H3{ COLOR : BLUE }中，H3為挑選者，COLOR為性質(zhì)，BLUE為COLOR性質(zhì)的值。

二、基本單位的認(rèn)識(shí)：
有相對(duì)單位與絕對(duì)單位兩種單位表達(dá)方式。
相對(duì)單位：

『em』：相對(duì)於字母高度的比例因子。
『en』：相對(duì)於字型大小的比例因子。
『%』：相對(duì)於長(zhǎng)度單位（通常是目前字型的大小）的百分比例。
絕對(duì)單位：
『in』：英寸。
『cm』：公分。
『mm』：公厘。
『px』：像素（系統(tǒng)預(yù)設(shè)單位）。
『pc』：pica，印刷活字單位。
『pt』：像點(diǎn)。
相對(duì)關(guān)系：1in= 6pc= 72pt= 2.54cm= 25.4mm

三、顏色使用的認(rèn)識(shí)：

顏色的表示共有五種方式。
『#RRGGBB』：
以三個(gè)00到FF的十六進(jìn)位值分別表示0到255十進(jìn)位值的紅、綠、藍(lán)三原色數(shù)值。
『#RGB』：
簡(jiǎn)略表示法，只用三個(gè)0到F的十六進(jìn)位值分別表示紅、綠、藍(lán)三原色數(shù)值。而事實(shí)上，瀏覽器會(huì)自動(dòng)擴(kuò)展為六個(gè)十六進(jìn)位的值，如『#ABC』將變?yōu)椤?AABBCC』。但是，顯見(jiàn)這樣的表示法并不精確。
『rgb(R,G,B)』：
以0到255十進(jìn)位值的紅、綠、藍(lán)三原色數(shù)值來(lái)表示顏色。
『rgb(R%,G%,B%)』：
以紅、綠、藍(lán)彼此相對(duì)的數(shù)值比例來(lái)表示顏色，如『rgb(60%,100%,75%)』。
『Color_Name』：
直接以顏色名稱來(lái)表示顏色，共有141種標(biāo)準(zhǔn)的顏色名稱。

CSS應(yīng)用基礎(chǔ)教程(2) 應(yīng)用方式

sj33cn — Sun, 05 Mar 2006 04:17:00 +0000

Ｃ　Ｓ　Ｓ　的　聲　明　方　式

　　這章節(jié)將開(kāi)始為您介紹ＣＳＳ的應(yīng)用。當(dāng)然一開(kāi)始要介紹的是如何去建立個(gè)樣式表（Style Sheets），包括了聲明的方式和應(yīng)用在網(wǎng)頁(yè)上的方法，最後還會(huì)為您概述一下ＣＳＳ的一些特性。概略來(lái)說(shuō)，ＣＳＳ的聲明有三種方式：

一、基本聲明：最典型的ＣＳＳ聲明方式。
element {property: value}　用中文來(lái)表示的話，也就是
元件(標(biāo)簽) {性質(zhì)(屬性)名稱: 設(shè)定值}
例如：
H3 {COLOR: BLUE}　即為一組聲明。

二、集體聲明：同時(shí)聲明某個(gè)或數(shù)個(gè)元件(標(biāo)簽)（各元件(標(biāo) 簽)間以逗號(hào)分隔）的一組或數(shù)組樣式規(guī)則(性質(zhì))（各組規(guī)則間以分號(hào)分隔）。
元件(標(biāo)簽) {
性質(zhì)(屬性)名稱1: 設(shè)定值1;
性質(zhì)(屬性)名稱2: 設(shè)定值2;
… }
或是
元件A(標(biāo)簽A), 元件B(標(biāo)簽B), 元件C(標(biāo)簽C), … {
性質(zhì)(屬性)名稱1: 設(shè)定值1;
性質(zhì)(屬性)名稱2: 設(shè)定值2;
…}
例如：
TD {
COLOR: BLUE;
font-size: 9pt;
}
或是
TD,P,P {
COLOR: BLUE;
font-size: 9pt;
}

三、分項(xiàng)聲明：將許多樣式規(guī)則分組再分別聲明。
元件A(標(biāo)簽A) {性質(zhì)(屬性)名稱1: 設(shè)定值1; 性質(zhì)(屬性)名稱2: 設(shè)定值2; }
元件A(標(biāo)簽A) {性質(zhì)(屬性)名稱3: 設(shè)定值3; 性質(zhì)(屬性)名稱4: 設(shè)定值4; }
例如：
TD { COLOR: BLUE; font-size: 9pt}
TD { font-family: “標(biāo)楷體”; line-height: 150%}
這樣子的聲明方式并不會(huì)互相抵觸，因?yàn)樗暶鞯男再|(zhì)是不同的。如果不小心對(duì)同樣一個(gè)性質(zhì)作了重復(fù)的聲明，則只有後來(lái)聲明的設(shè)定值才會(huì)發(fā)生作用。

　　要附帶提一下的是，在您的聲明中，只要您的格式正確就會(huì)被接受，而不論是大小寫(xiě)、空白或換行都不會(huì)對(duì)顯示的結(jié)果有影響的，您可依自己習(xí)慣來(lái)編寫(xiě)。

Ｃ　Ｓ　Ｓ　的　應(yīng)　用　方　法

　　接下來(lái)要為您介紹的是將所建立的樣式表應(yīng)用在網(wǎng)頁(yè)上的四種基本方法。

一、使用STYLE屬性：將STYLE屬性直接加在個(gè)別的元件標(biāo)簽里。
<元件(標(biāo)簽) STYLE=”性質(zhì)(屬性)1: 設(shè)定值1; 性質(zhì)(屬性)2: 設(shè)定值2; …}
例如：

這種用法的優(yōu)點(diǎn) 是可靈巧應(yīng)用樣式於各標(biāo)簽中，但是缺點(diǎn)則是沒(méi)有整篇文件的『統(tǒng)一性』。

二、使用STYLE標(biāo)簽：將樣式規(guī)則寫(xiě)在標(biāo)簽之中。

例如：

通常是將整個(gè)的結(jié)構(gòu)寫(xiě)在網(wǎng)頁(yè)的部份之中。這種用法的優(yōu)點(diǎn)就是在於整篇文件的統(tǒng)一性，只要是有聲明的的元件即會(huì)套用該樣式規(guī)則。缺點(diǎn)就是在個(gè)別元件的靈活度不足。

三、使用 LINK標(biāo)簽：將樣式規(guī)則寫(xiě)在.css的樣式檔案中，再以標(biāo)簽引入。
假設(shè)我們把樣式規(guī)則存成一個(gè)example.css的檔案，我們只要在網(wǎng)頁(yè)中加入

即可套用該樣式檔案中所制定好的樣式了。通常是將LINK標(biāo)簽寫(xiě)在網(wǎng)頁(yè)的部份之中。這種用法的優(yōu)點(diǎn)就是在於可以把要套用相同樣式規(guī)則的數(shù)篇文件都指定到同一個(gè)樣式檔案即可。缺點(diǎn)也是在個(gè)別文件或元件的靈活度不足。

四、使用@import引入：跟LINK用法很像，但必　放在中。

例如：

要注意的是，行末的分號(hào)是絕對(duì)不可少的！切記切記！

　　很明顯的，不管是LINK還是@import的用法都可能可以直接套用他人現(xiàn)有的樣式表。不過(guò)，基於網(wǎng)路的禮儀，這種事別做的好，至少也應(yīng)該知會(huì) 對(duì)方一聲，要先取得人家的同意才行！

　　而四種應(yīng)用方法各有其優(yōu)缺點(diǎn)，您可以綜合地使用，并不會(huì)相互抵觸。但是如果相同的性質(zhì)屬性遇上重復(fù)的聲明的話，就要考量套用優(yōu)先權(quán)的問(wèn)題了！一般來(lái)講，優(yōu)先權(quán)的順序有以下的幾點(diǎn)原則：
網(wǎng)頁(yè)設(shè)計(jì)者的樣式設(shè)定＞使用者的樣式設(shè)定＞瀏覽器的樣式設(shè)定
STYLE屬性的樣式設(shè)定＞ STYLE標(biāo)簽樣式設(shè)定＞鏈結(jié)進(jìn)來(lái)的樣式設(shè)定
後面聲明的樣式設(shè)定＞前面的樣式設(shè)定
所謂『鏈結(jié)進(jìn)來(lái)的樣式設(shè)定』指的就是用上面提到過(guò)的LINK標(biāo)簽與@import引入這兩種應(yīng)用方式所鏈結(jié)進(jìn)來(lái)的的樣式設(shè)定。

　　以上就是ＣＳＳ最基本的聲明與應(yīng)用的方法介紹，有了這些基本的認(rèn)識(shí)與方法，您已經(jīng)可以開(kāi)始建立您的樣式表！除了上面提到的基本的聲明與應(yīng)用的方法之外，還有其它的聲明與應(yīng)用的方法，將為您在下一章中再作介紹。

一区二区免费视频中文乱码,欧洲熟妇色 欧美,国产精品一区二区熟女不卡

CSS應(yīng)用基礎(chǔ)教程(6) 區(qū)塊性質(zhì)

CSS應(yīng)用基礎(chǔ)教程(4) 顏色背景

CSS應(yīng)用基礎(chǔ)教程(5) 文字性質(zhì)

CSS應(yīng)用基礎(chǔ)教程(3) 應(yīng)用補(bǔ)充

…

CSS應(yīng)用基礎(chǔ)教程(1) 基本認(rèn)識(shí)

CSS應(yīng)用基礎(chǔ)教程(2) 應(yīng)用方式

一区二区免费视频中文乱码,欧洲熟妇色欧美,国产精品一区二区熟女不卡