|
網(wǎng)站建設(shè)是指使用標(biāo)識(shí)語言（markup language)，通過一系列設(shè)計(jì)、建模、和執(zhí)行的過程將電子格式的信息通過互聯(lián)網(wǎng)傳輸，最終以圖形用戶界面（GUI）的形式被用戶所瀏覽。簡(jiǎn)單來說，網(wǎng)頁設(shè)計(jì)的目的就是產(chǎn)生網(wǎng)站。簡(jiǎn)單的信息如文字，圖片（GIF，JPEG，PNG）和表格，都可以通過使超文件標(biāo)示語言、可擴(kuò)展超文本標(biāo)記語言等標(biāo)示語言放置到網(wǎng)站頁面上。
本章ＣＳＳ的主要作用
在前面的章節(jié)介紹完了聲明與應(yīng)用的方法及 一些特性之後，從這章開始，便要正式進(jìn)入ＣＳＳ的指令介紹了！本章有兩個(gè)介紹的主 題，第一個(gè)部份介紹的是顏色與背景性質(zhì)的ＣＳＳ，其主要的作用在于設(shè)定元素的前景 顏色、背景顏色與背景圖形等樣式設(shè)定的性質(zhì)；而第二部份為您介紹的是用于控制擺放 元素位置的ＣＳＳ的指令。
顏色背景的ＣＳＳ指令
color設(shè)定前景顏色 支持：ＩＥ３、ＩＥ４、ＮＣ４
適用：所有元素
可能值： <color>設(shè)定顏色，請(qǐng)參考第一章顏色使用的相關(guān)說明預(yù)設(shè)值：視瀏覽器而定
繼承性：有
一般范例：SPAN { color : BLUE }
同軸范例：<SPAN style="color:BLUE">
background-color設(shè)定背景顏色 支持：ＩＥ４、ＮＣ４
適用：所有元素
可能值： <color>設(shè)定顏色，請(qǐng)參考第一章顏色使用的相關(guān)說明transparent將父元素（顏色或圖案）的背景透明化預(yù)設(shè)值：transparent
繼承性：無
一般范例：BODY { background-color : BLUE }
同軸范例：<BODY style="background-color:BLUE">
background-image設(shè)定背景圖形 支持：ＩＥ４、ＮＣ４
適用：所有元素
可能值： <url>設(shè)定圖檔URL，請(qǐng)參考第一章URL表示的相關(guān)說明none不使用背景圖案預(yù)設(shè)值：transparent
繼承性：無
一般范例：
BODY { background-image : URL("http://yourweb/path/file_name") }
同軸范例：
<BODY style="background-image:URL('http://yourweb/path/file_name')">
background-repeat設(shè)定背景重復(fù) 支持：ＩＥ４、ＮＣ４
適用：所有元素
可能值： repeat重復(fù)背景圖形填滿頁面repeat-x水平方向重復(fù)背景圖形repeat-y垂直方向重復(fù)背景圖形no-repeat不重復(fù)顯示背景圖形預(yù)設(shè)值：repeat
繼承性：無
一般范例：BODY { background-repeat : repeat-x }
同軸范例：<BODY style="background-repeat: repeat-x">
background-attachment設(shè)定背景附著 支持：ＩＥ４、ＮＣ４
適用：所有元素
可能值： scroll背景圖形隨著卷軸卷動(dòng)fixed背景圖形隨著卷軸卷動(dòng)（浮水�。╊A(yù)設(shè)值：scrool
繼承性：無
一般范例：BODY { background-attachment : fixed }
同軸范例：<BODY style="background-attachment:fixed">
background-position設(shè)定背景位置 支持：ＩＥ４、ＮＣ４
適用：區(qū)塊元素
可能值： <percent> X% Y%圖形上X% Y%的點(diǎn)對(duì)準(zhǔn)元素的X% Y%位置<length> X Y將圖形左上角置于元素左上角水平 X垂直 Y之處center背景圖形置于中央left背景圖形對(duì)左邊right背景圖形對(duì)右邊top背景圖形對(duì)頂部bottom背景圖形對(duì)底部預(yù)設(shè)值：0% 0%
繼承性：無
一般范例：BODY { background- position : 100% 50% }
同軸范例：<BODY style="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è)值：無
繼承性：無
一般范例：
BODY { BLUE url(image/gif) repeat-x fixed center }
同軸范例：
<BODY style="BLUE url(image/gif) repeat-x fixed center">
位置擺放的ＣＳＳ指令
float設(shè)定浮動(dòng)性質(zhì)（多用于文繞圖的情形） 支持：ＩＥ４、ＮＣ４
適用：區(qū)塊元素或圖形
可能值： left元素靠左，文字圍繞其右right元素靠右，文字圍繞其左none以預(yù)設(shè)的方法顯示預(yù)設(shè)值：none
繼承性：無
一般范例：DIV { float : right }
同軸范例：<DIV style="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
繼承性：無
一般范例：DIV { clear : right }
同軸范例：<DIV style="clear:right">
width設(shè)定寬度 支持：ＩＥ４、ＮＣ４
適用：區(qū)塊元素或圖形
可能值： <length>長(zhǎng)度單位，請(qǐng)參考第一章基本單位的相關(guān)說明<percentage>百分比，以父元素寬度為基準(zhǔn)auto以固定比例自動(dòng)變化大小預(yù)設(shè)值：auto
繼承性：無
一般范例：DIV { width : 300pt }
同軸范例：<DIV style="width:300pt">
height設(shè)定高度 支持：ＩＥ４、ＮＣ４
適用：區(qū)塊元素或圖形
可能值： <length>長(zhǎng)度單位，請(qǐng)參考第一章基本單位的相關(guān)說明<percentage>百分比，以父元素寬度為基準(zhǔn)auto以固定比例自動(dòng)變化大小預(yù)設(shè)值：auto
繼承性：無
一般范例：DIV { height : 300pt }
同軸范例：<DIV style="height:300pt">
position設(shè)定位置 支持：ＩＥ４、ＮＣ４
適用：區(qū)塊元素
可能值： absolute以父元素為基準(zhǔn)，擺設(shè)在特定位置上relative以相鄰元素為基準(zhǔn)，擺設(shè)在特定位置上static預(yù)設(shè)位置，以該元素于原始碼中位置而定預(yù)設(shè)值：absolute
繼承性：無
一般范例：DIV { position : static }
同軸范例：<DIV style="position:static">
top設(shè)定頂端位置 支持：ＩＥ４、ＮＣ４
適用：區(qū)塊元素
可能值： <length>長(zhǎng)度單位，請(qǐng)參考第一章基本單位的相關(guān)說明<percentage>百分比，以父元素寬度為基準(zhǔn)auto以正常方式顯示預(yù)設(shè)值：auto
繼承性：無
一般范例：DIV { top : 30pt }
同軸范例：<DIV style="top:30pt">
left設(shè)定左端位置 支持：ＩＥ４、ＮＣ４
適用：區(qū)塊元素
可能值： <length>長(zhǎng)度單位，請(qǐng)參考第一章基本單位的相關(guān)說明<percentage>百分比，以父元素寬度為基準(zhǔn)auto以正常方式顯示預(yù)設(shè)值：auto
繼承性：無
一般范例：DIV { left : 30pt }
同軸范例：<DIV style="left:30pt">
clip設(shè)定裁剪（設(shè)定某區(qū)域形狀及大小，區(qū)域外通透） 支持：ＩＥ４、ＮＣ４
適用：區(qū)塊元素
可能值： rect(top,right,bottom,left)設(shè)定矩形之上右下左長(zhǎng)度，會(huì)自動(dòng)比對(duì)對(duì)邊長(zhǎng)度
一般 寫法為rect(0,長(zhǎng)度,長(zhǎng)度,0)
不可以寫為rect(0,0,長(zhǎng)度,長(zhǎng)度)
四個(gè)數(shù)值皆可以"auto"代替auto以正常方式顯示預(yù)設(shè)值：auto
繼承性：無
一般范例：DIV { clip : rect(0,100px,50px,0) }
同軸范例：<DIV style="clip:rect(0,100px,50px,0)">
overflow設(shè)定溢位處理（控制當(dāng)元素內(nèi)容超過該元素大小時(shí)的顯示方式） 支持：ＩＥ４
適用：區(qū)塊元素
可能值： visible元素將不會(huì)依所設(shè)訂大小顯示，而能看見所有內(nèi)容hidden超過元素所設(shè)訂大小之部份將被隱藏不予顯示scroll如有必要出現(xiàn)卷軸可讓使用者看到全部的內(nèi)容auto以預(yù)設(shè)的方式顯示預(yù)設(shè)值：auto
繼承性：無
一般范例：DIV { overflow : scroll }
同軸范例：<DIV style="overflow:scroll">
visibility設(shè)定可視度 支持：ＩＥ４、ＮＣ４
適用：所有元素
可能值： visible設(shè)定該元素顯示hidden設(shè)定該元素不顯示，但仍占據(jù)空間inherit以父元素可視度決定預(yù)設(shè)值：inherit
繼承性：無
一般范例：DIV { visibility : hidden }
同軸范例：<DIV style="visibility:hidden">
z-index設(shè)定Ｚ軸參數(shù)（三度空間） 支持：ＩＥ４、ＮＣ４
適用：區(qū)塊元素
可能值： <number>十進(jìn)位數(shù)值，數(shù)值大的元素會(huì)出現(xiàn)在數(shù)值小的元素的上方auto當(dāng)元素位置重復(fù)時(shí)，原始碼中寫在後面元素會(huì)出現(xiàn)在寫在前面元素的上方預(yù)設(shè)值：auto
繼承性：無
一般范例：DIV { z-index : 3 }
同軸范例：<DIV style="z-index:3">大多數(shù)人在上網(wǎng)的時(shí)候，都會(huì)瀏覽網(wǎng)頁提供給我們的信息。
|
溫馨提示：喜歡本站的話，請(qǐng)收藏一下本站！
