第8章級聯(lián)樣式表_第1頁
第8章級聯(lián)樣式表_第2頁
第8章級聯(lián)樣式表_第3頁
第8章級聯(lián)樣式表_第4頁
第8章級聯(lián)樣式表_第5頁
已閱讀5頁,還剩74頁未讀, 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說明:本文檔由用戶提供并上傳,收益歸屬內(nèi)容提供方,若內(nèi)容存在侵權(quán),請進(jìn)行舉報或認(rèn)領(lǐng)

文檔簡介

第8章級聯(lián)樣式表(CSS)技術(shù)CSS就是一種叫做樣式表(stylesheet)的技術(shù),也有人稱之為層疊樣式表(CascadingStyleSheet)。在主頁制作時采用CSS技術(shù),可以有效地對頁面的布局、字體、顏色、背景和其他效果實現(xiàn)更加精確的控制。只要對相應(yīng)的代碼做一些簡單的修改,就可以改變整個頁面的風(fēng)格。8.1

CSS簡介CSS樣式表的特點如下:將顯示格式和文檔結(jié)構(gòu)分離對HTML語言處理樣式的最好補(bǔ)充體積更小加快網(wǎng)頁下載速度實現(xiàn)動態(tài)更新、減少工作量支持CSS的瀏覽器增多8.2樣式定義定義CSS的語句形式如下:

selector{property:value;property:value;…}

SELECTOR:選擇符。當(dāng)多個對象具有相同的樣式定義時,多個對象之間可以用逗號分隔8.2.1樣式定義的格式在CSS樣式中有3種選擇符分別是HTML選擇符Class選擇符ID選擇符8.2.2選擇符的分類HTML選擇符HTML選擇符就是HTML的標(biāo)記符,例如P、BODY、A等。如果用CSS定義了他們,那么在整個網(wǎng)頁中,該標(biāo)識的屬性都應(yīng)用定義中的設(shè)置。HTML選擇符的定義方法如下:

tag{property:value}Class選擇符Class選擇符可以分為兩種,一種是相關(guān)的classselector,它只與一種HTML標(biāo)記有關(guān)系。它的語法格式如下:

Tag.Classname{property:value}第二種是獨(dú)立Class選擇符,它可以被任何HTML標(biāo)記所應(yīng)用。它的語法格式如下:

.Classname{property:value}ID選擇符ID選擇符其實與獨(dú)立的Class選擇符的功能一樣,而他們的區(qū)別在于語法和用法不同。它的語法格式如下:

#IDname{property:value}

ID選擇符的用法是在HTML標(biāo)記中應(yīng)用ID屬性引用CSS樣式8.3使用樣式用<style>標(biāo)記將樣式表嵌入在HTML文件的頭部。<style>標(biāo)記的屬性type指明樣式的類別,除了CSS樣式表外,還有Netscape瀏覽器使用的JSS(JavaScriptStyleSheets,Java腳本樣式表)樣式表,其樣式類別為text/javascript;type的默認(rèn)值為text/css。<style>標(biāo)記內(nèi)定義的前后加上注釋符<!--……-->的作用是使不支持CSS的瀏覽器忽略樣式表的定義。嵌入樣式表的作用范圍是在本HTML文件內(nèi)。8.3.1嵌入樣式表如果多個HTML文件要共享樣式表,可以將樣式表定義為一個獨(dú)立的CSS樣式文件。HTML文件在頭部用<link>標(biāo)記鏈接到CSS樣式文件。8.3.2鏈接外部樣式表這種方式是在HTML文件的頭部<style></style>標(biāo)記之間,用CSS樣式表的@import聲明引入外部樣式表。格式為:

<style> @importURL("外部樣式文件名");

…</style>

8.3.3引入外部的樣式表這種方式是在HTML標(biāo)記中,將定義的樣式規(guī)則作為標(biāo)記style屬性的屬性值。樣式定義的作用范圍僅限于此標(biāo)記范圍之內(nèi)。一個內(nèi)嵌樣式的應(yīng)用如下:

<bodystyle="font-family:"宋體";font-size:12pt;background:yellow">

要在一個HTML文件中使用內(nèi)聯(lián)樣式,必須在該文件的頭部對整個文件進(jìn)行單獨(dú)的樣式表語言聲明,聲明如下:

<metahttp-equiv="Content-Type"content="text/css">8.3.4內(nèi)嵌樣式樣式表的作用優(yōu)先順序遵循以下原則:內(nèi)聯(lián)樣式中所定義樣式的優(yōu)先級最高。其他樣式按其在HTML文件中出現(xiàn)或者被引用的順序,遵循就近原則,靠近文本越近的優(yōu)先級越高。選擇符的作用優(yōu)先順序為:上下文選擇符、類選擇符、ID選擇符,優(yōu)先級依次降低。未在任何文件中定義的樣式,將遵循瀏覽器的默認(rèn)樣式。8.3.5

CSS樣式的優(yōu)先級8.4

Style對象內(nèi)嵌樣式是使用<style>標(biāo)簽屬性直接為單個HTML元素應(yīng)用的樣式表(CSS)指派。而使用

style對象可以檢查這些指派,并進(jìn)行新的指派或更改已有的指派。要使用style對象,應(yīng)該在元素對象上使用style關(guān)鍵字。要獲得內(nèi)嵌樣式的當(dāng)前設(shè)置,應(yīng)該在style對象上使用對應(yīng)的style對象的屬性。8.4.1style元素對象1.檢索樣式表中的屬性值在Netscape6.0以后的版本中,使用Style對象檢索屬性值。語法:

document.getElementById(對象名稱).style.屬性

在IE瀏覽器中,使用Style對象檢索屬性值。語法:

document.all(對象名稱).style.屬性8.4.2style元素對象的樣式標(biāo)簽屬性和樣式屬性2.樣式標(biāo)簽屬性和樣式屬性屬性說明background設(shè)置或檢索對象最多5個獨(dú)立的背景屬性backgroundColor設(shè)置或檢索對象的背景顏色backgroundImage設(shè)置或檢索對象的背景圖像backgroundPosition設(shè)置或檢索對象背景的位置backgroundPositionX設(shè)置或檢索backgroundPosition屬性的x坐標(biāo)backgroundPositionY設(shè)置或檢索backgroundPosition屬性的y坐標(biāo)behavior設(shè)置或檢索DHTML行為的位置border設(shè)置或檢索對象周圍邊框的繪制屬性borderBottom設(shè)置或檢索對象下邊框的屬性borderBottomColor設(shè)置或檢索對象下邊框的顏色borderBottomStyle設(shè)置或檢索對象下邊框的樣式borderBottomWidth設(shè)置或檢索對象下邊框的寬度borderColor設(shè)置或檢索對象的邊框顏色borderLeft設(shè)置或檢索對象左邊框的屬性borderLeftColor設(shè)置或檢索對象左邊框的顏色borderLeftStyle設(shè)置或檢索對象左邊框的樣式borderLeftWidth設(shè)置或檢索對象左邊框的寬度borderRight設(shè)置或檢索對象右邊框的屬性borderRightColor設(shè)置或檢索對象右邊框的顏色borderRightStyle設(shè)置或檢索對象右邊框的樣式borderRightWidth設(shè)置或檢索對象右邊框的寬度borderStyle設(shè)置或檢索對象上下左右邊框的樣式borderTop設(shè)置或檢索對象上邊框的屬性borderTopColor設(shè)置或檢索對象上邊框的顏色borderTopStyle設(shè)置或檢索對象上邊框的樣式borderTopWidth設(shè)置或檢索對象上邊框的寬度borderWidth設(shè)置或檢索對象上下左右邊框的寬度bottom設(shè)置或檢索對象相對于文檔層次中下一個定位對象的底部的位置color設(shè)置或檢索對象文本的顏色cursor設(shè)置或檢索當(dāng)鼠標(biāo)指針指向?qū)ο髸r所使用的鼠標(biāo)指針direction設(shè)置或檢索對象的閱讀順序display設(shè)置或檢索對象是否需要渲染font設(shè)置或檢索對象最多六個獨(dú)立的字體屬性fontFamily設(shè)置或檢索對象文本所使用的字體名稱fontSize設(shè)置或檢索對象文本使用的字體大小fontStyle設(shè)置或檢索對象的字體樣式,如斜體、常規(guī)或傾斜fontVariant設(shè)置或檢索對象文本是否以小型大寫字母顯示fontWeight設(shè)置或檢索對象的字體寬度height設(shè)置或檢索對象的高度left設(shè)置或檢索對象相對于文檔層次中下一個定位對象的左邊界的位置letterSpacing設(shè)置或檢索對象的字符間附加空間的總和lineHeight設(shè)置或檢索對象兩行間的距離listStyle設(shè)置或檢索對象最多3個獨(dú)立的listStyle屬性listStyleImage檢索要為對象應(yīng)用的列表項目符號的圖像listStylePosition檢索相對于對象內(nèi)容如何繪制項目符號listStyleType檢索對象預(yù)定義的項目符號類型margin設(shè)置或檢索對象的上下左右邊距marginBottom設(shè)置或檢索對象的下邊距寬度marginLeft設(shè)置或檢索對象的左邊距寬度marginRight設(shè)置或檢索對象的右邊距寬度marginTop設(shè)置或檢索對象的上邊距寬度padding設(shè)置或檢索要在對象和其邊距(若存在的邊框的話)之間要插入的全部空間paddingBottom設(shè)置或檢索要在對象下邊框和內(nèi)容之間插入的空間總量paddingLeft設(shè)置或檢索要在對象左邊框和內(nèi)容之間插入的空間總量paddingRight設(shè)置或檢索要在對象右邊框和內(nèi)容之間插入的空間總量paddingTop設(shè)置或檢索對象上邊框和內(nèi)容之間插入的空間總量right設(shè)置或檢索對象相對于文檔層次中下一個已定位的對象的右邊界的位置scrollbar3dLightColor設(shè)置或檢索滾動條上滾動按鈕和滾動滑塊的左上顏色scrollbarArrowColor設(shè)置或檢索滾動箭頭標(biāo)識的顏色scrollbarBaseColor設(shè)置或檢索滾動條的主要顏色,其中包含滾動按鈕和滾動滑塊scrollbarDarkShadowColor設(shè)置或檢索滾動條上滑槽的顏色scrollbarFaceColor設(shè)置或檢索滾動條和滾動條的滾動箭頭的顏色scrollbarHighlightColor設(shè)置或檢索滾動框和滾動條滾動箭頭的左上邊緣顏色scrollbarShadowColor設(shè)置或檢索滾動框和滾動條滾動箭頭的右下邊緣顏色scrollbarTrackColor設(shè)置或檢索滾動條軌跡元素的顏色styleFloat設(shè)置或檢索文本要繞排到對象的哪一側(cè)tableLayout檢索表明表格布局是否固定的字符串textAlign設(shè)置或檢索對象中的文本是左對齊、右對齊、居中對齊還是兩端對齊textDecoration設(shè)置或檢索對象中的文本是否有閃爍、刪除線、上劃線或下劃線的樣式top設(shè)置或檢索對象相對于文檔層次中下一個定位對象的上邊界的位置verticalAlign設(shè)置或檢索對象的垂直排列visibility設(shè)置或檢索對象的內(nèi)容是否顯示whiteSpace設(shè)置或檢索對象中是否自動換行width設(shè)置或檢索對象的寬度wordBreak設(shè)置或檢索單詞內(nèi)的換行行為,特別是對象中出現(xiàn)多語言的情況wordSpacing設(shè)置或檢索對象中單詞間的附加空間總量wordWrap設(shè)置或檢索當(dāng)內(nèi)容超過其容器邊界時是否斷詞zIndex設(shè)置或檢索定位對象的堆疊次序zoom設(shè)置或檢索對象的放大比例3.顏色和背景屬性(1)BackgroundColor屬性BackgroundColor屬性用于設(shè)置或檢索對象的背景顏色。其對應(yīng)的樣式標(biāo)簽屬性為background-color屬性。語法:

background-color:color

color:指定顏色。(2)Color屬性Color屬性用于設(shè)置或檢索對象的文本顏色,無默認(rèn)值。其對應(yīng)的樣式標(biāo)簽屬性為color屬性。語法:

color:color

color:指定顏色。(3)backgroundImage屬性backgroundImage屬性用來設(shè)置或檢索對象的背景圖像。其對應(yīng)的樣式標(biāo)簽屬性為background-image屬性。語法:

background-image:none|url(url)

none:無背景圖。url:使用絕對或相對地址指定背景圖像。(4)backgroundPosition屬性backgroundPosition屬性用來設(shè)置或檢索對象的背景圖像位置。必須先指定background-image屬性。其對應(yīng)的樣式標(biāo)簽屬性為background-position屬性。語法:

background-position:length||lengthbackground-position:position||position

length:百分?jǐn)?shù)

|由浮點數(shù)字和單位標(biāo)識符組成的長度值。position:top|center|bottom|left|center|right(5)backgroundRepeat屬性backgroundRepeat屬性用來設(shè)置或檢索對象的背景圖像是否及如何鋪排。必須先指定對象的背景圖像。其對應(yīng)的樣式標(biāo)簽屬性為background-repeat屬性。語法:

background-repeat:repeat|no-repeat|repeat-x|repeat-y

repeat:背景圖像在縱向和橫向上平鋪。no-repeat:背景圖像不平鋪。repeat-x:背景圖像在橫向上平鋪。repeat-y:背景圖像在縱向平鋪。(6)BackgroundAttachment屬性BackgroundAttachment屬性用來設(shè)置或檢索背景圖像是隨對象內(nèi)容滾動還是固定的。其對應(yīng)的樣式標(biāo)簽屬性為background-attachment屬性。語法:

background-attachment:scroll|fixed

scroll:背景圖像是隨對象內(nèi)容滾動。Fixed:背景圖像固定。4.邊框?qū)傩裕?)borderColor屬性borderColor屬性用于設(shè)置或檢索對象的邊框顏色。其對應(yīng)的樣式標(biāo)簽屬性為border-color屬性。語法:

border-color:color(2)borderWidth屬性borderWidth屬性用于設(shè)置或檢索對象上下左右邊框的寬度。其對應(yīng)的樣式標(biāo)簽屬性為border-width屬性。語法:

border-width:border-top-widthborder-left-widthborder-bottom-widthborder-right-width(3)borderStyle屬性borderStyle屬性用于設(shè)置或檢索對象上下左右邊框的樣式。其對應(yīng)的樣式標(biāo)簽屬性為border-style屬性。語法:

border-style:none|hidden|inherit|dashed|solid|double|inset|outset|ridge|groove5.定位屬性(1)clip屬性clip屬性檢索或設(shè)置對象的可視區(qū)域。區(qū)域外的部分是透明的。必須將postiton的值設(shè)為absolute,此屬性方可使用。其對應(yīng)的樣式標(biāo)簽屬性為clip屬性。語法:

clip:auto|rect(numbernumbernumbernumber)

auto:對象無剪切。rect(numbernumbernumbernumber):依據(jù)上-右-下-左的順序提供自對象左上角為(0,0)坐標(biāo)計算的4個偏移數(shù)值,其中任意數(shù)值都可用auto替換,即為此邊不剪切。(2)top屬性top屬性用于設(shè)置或檢索對象相對于文檔層次中下一個定位對象的上邊界的位置。其對應(yīng)的樣式標(biāo)簽屬性為top屬性。語法:

top:auto|length

auto:默認(rèn)值。無特殊定位,根據(jù)HTML定位規(guī)則在文檔流中分配。Length:由浮點數(shù)字和單位標(biāo)識符組成的長度值/百分?jǐn)?shù)。必須定義position屬性值為absolute或者relative此取值方可生效。(3)left屬性left屬性用于設(shè)置或檢索對象相對于文檔層次中下一個定位對象的左邊界的位置。其對應(yīng)的樣式標(biāo)簽屬性為left屬性。語法:

left:auto|length

auto:默認(rèn)值。無特殊定位,根據(jù)HTML定位規(guī)則在文檔流中分配。Length:由浮點數(shù)字和單位標(biāo)識符組成的長度值|百分?jǐn)?shù)。必須定義position屬性值為absolute或者relative此取值方可生效。(4)paddingTop屬性paddingTop屬性用于設(shè)置對象與其最近一個定位的父對象頂部相關(guān)的位置。其對應(yīng)的樣式標(biāo)簽屬性為paddingTop屬性。語法:

padding-top:length

length:由浮點數(shù)字和單位標(biāo)識符組成的長度值或者百分?jǐn)?shù)。百分?jǐn)?shù)是基于父對象的寬度。(5)Position屬性Position屬性用于檢索對象的定位方式,其中包括posLeft、posRight、posTop和posBottom屬性,表示檢索對象的4個不同定位方式。其對應(yīng)的樣式標(biāo)簽屬性為position屬性。語法:

position:static|absolute|fixed|relative

static:無特殊定位,對象遵循HTML定位規(guī)則。absolute:將對象從文檔流中拖出,使用left,right,top,bottom等屬性進(jìn)行絕對定位。而其層疊通過z-index屬性定義。此時對象不具有邊距,但仍有補(bǔ)白和邊框。relative:對象不可層疊,但將依據(jù)left,right,top,bottom等屬性在正常文檔流中偏移位置fixed:IE5.5及NS6尚不支持此屬性。6.字體屬性(1)fontStyle屬性fontStyle屬性用于設(shè)置或檢索對象中的字體樣式。其對應(yīng)的樣式標(biāo)簽屬性為font-style屬性。語法:

font-style:normal|italic|oblique

normal:默認(rèn)值。正常的字體。italic:斜體。對于沒有斜體變量的特殊字體,將應(yīng)用

oblique。oblique:傾斜的字體。(2)fontVariant屬性fontVariant屬性用于設(shè)置或檢索對象中的文本是否為小型的大寫字母。其對應(yīng)的樣式標(biāo)簽屬性為font-variant屬性。語法:

font-variant:normal|small-caps

normal:默認(rèn)值。正常的字體。small-caps:小型的大寫字母字體。(3)fontWeight屬性fontWeight屬性設(shè)置或檢索對象中的文本字體的粗細(xì)。其作用由用戶端系統(tǒng)安裝的字體的特定字體變量映射決定,系統(tǒng)選擇最近的匹配。也就是說,用戶可能看不到不同值之間的差異。其對應(yīng)的樣式標(biāo)簽屬性為font-weight屬性。語法:

font-weight:normal|bold|bolder|lighter|100|200|300|400|500|600|700|800|900(4)fontSize屬性fontSize屬性設(shè)置或檢索對象中的字體尺寸。其對應(yīng)的樣式標(biāo)簽屬性為font-size屬性。語法:

font-size:xx-small|x-small|small|medium|large|x-large|xx-large|larger|smaller|length(5)lineheight屬性lineheight屬性檢索或設(shè)置對象的行高。即字體最底端與字體內(nèi)部頂端之間的距離。其對應(yīng)的樣式標(biāo)簽屬性為line-height屬性。語法:

line-height:normal|length

normal:默認(rèn)值。默認(rèn)行高

length:百分比數(shù)字

|由浮點數(shù)字和單位標(biāo)識符組成的長度值,允許為負(fù)值。其百分比取值是基于字體的高度尺寸。

(6)fontFamily屬性fontFamily屬性設(shè)置或檢索用于對象中文本的字體名稱序列。默認(rèn)值為

"TimesNewRoman"。其對應(yīng)的樣式標(biāo)簽屬性為font-family屬性。語法:

font-family:namefont-family:ncursive|fantasy|monospace|serif|sans-serif

name:字體名稱。按優(yōu)先順序排列。以逗號隔開。如果字體名稱包含空格,則應(yīng)使用引號括起。第二種聲明方式使用所列出的字體序列名稱。(7)textDecoration屬性textDecoration屬性用于設(shè)置或檢索對象中的文本的裝飾。其對應(yīng)的樣式標(biāo)簽屬性為text-decoration屬性。語法:

text-decoration:none|underline|blink|overline|line-through7.其他屬性zoom屬性用于設(shè)置或檢索對象的縮放比例。其對應(yīng)的樣式標(biāo)簽屬性為zoom屬性。語法:

zoom:normal|number

normal:使用對象的實際尺寸。number:百分?jǐn)?shù)|無符號浮點實數(shù)。浮點實數(shù)值為1.0或百分?jǐn)?shù)為100%時相當(dāng)于此屬性的normal值。8.5

CSS屬性字體屬性說明font設(shè)置或者檢索對象中文本特性的復(fù)合屬性font-family一個指定的字體名或者一個種類的字體族科font-size字體顯示的大小font-style以3個方式中的一個來顯示字體:normal(普通),italic(斜體)或者oblique(傾斜)font-weight使字體加粗或者變細(xì)font-variant設(shè)置英文大小寫轉(zhuǎn)換8.5.1字體屬性font復(fù)合字體屬性語法:

font:font-style||font-variant||font-weight||font-size||line-height||font-family

該屬性是復(fù)合屬性。聲明方式中的參數(shù)必須按照如上的排列順序。每個參數(shù)僅允許有一個值。忽略的將使用其參數(shù)對應(yīng)的獨(dú)立屬性默認(rèn)值。font-family指定字體語法:

font-family:字體1,字體2,字體3……

可以設(shè)置多種字體。按優(yōu)先順序排列,以逗號隔開。如果字體名稱包含空格,則應(yīng)使用引號括起。當(dāng)瀏覽器找不到第一種字體,將使用第二種字體替代,以此類推。font-size設(shè)定字號語法:

font-size:<absolute-size>|<relative-size>

<absolute-size>:指的是絕對長度。使用時應(yīng)謹(jǐn)慎地考慮到其在不同瀏覽器上瀏覽時可能出現(xiàn)的不同效果。對于一個用戶來說,絕對長度的字體有可能會很大或者很小,如xx-small|x-small|small|medium|large|x-large|xx-large等。<relative-size>:指的是相對長度,一般使用百分比實現(xiàn),其百分比取值是基于父對象中字體的尺寸。font-style設(shè)定樣式語法:

font-style:normal|italic|oblique

normal:正常值。italic:斜體。oblique:偏斜體。font-weight設(shè)定字體粗細(xì)語法:

font-weight:normal|bold|bolder|lighter|100-900文本屬性說明letter-spacing定義一個附加在字符之間的間隔數(shù)量word-spacing定義一個附加在單詞之間的間隔數(shù)量text-decoration有5個文本修飾屬性,選擇其中之一來修飾文本text-align設(shè)置文本的水平對齊方式,包括左對齊、右對齊、居中、兩端對齊vertical-align設(shè)置文本的垂直對齊方式,包括垂直向上對齊、垂直向下對齊、垂直居中、文字向上對齊、文字向下對齊等text-indent文字的首行縮進(jìn)line-height文本基線之間的間隔值text-transform控制英文文字大小寫8.5.2文本屬性letter-spacing設(shè)定字符間距語法:

letter-spacing:normal|length

normal:正常值。length:指定長度,包含長度單位。word-spacing設(shè)定單詞間距語法:

word-spacing:normal|length

normal:正常值。length:指定長度,包含長度單位。text-decoration設(shè)定文字修飾語法:

text-decoration:underline|overline|line-through|blink|nonetext-align設(shè)定橫向文字對齊方式語法:

text-align:left|right|center|justityvertical-align設(shè)定縱向文字對齊方式語法:

vertical-align:super|sub|top|middle|bottom|text-top|text-bottomtext-indent設(shè)定文字首行縮進(jìn)語法:

text-indent:value

使用text-indent屬性可以設(shè)定頁面文字首行縮進(jìn)。line-height設(shè)定文字行高語法:

line-height:value

使用line-height屬性可以設(shè)定頁面文字行高。顏色和背景屬性說明color設(shè)定頁面元素的前景色background-color設(shè)定頁面元素的背景色background-image設(shè)定頁面元素的背景圖像background-repeat設(shè)定一個指定的背景圖像被重復(fù)的方式background-attachment設(shè)定背景圖像是否跟隨頁面內(nèi)容滾動background-position設(shè)定水平和垂直方向上的位置background背景屬性的綜合設(shè)定8.5.3顏色和背景屬性color設(shè)定顏色語法:

color:color-value

HTML語言使用十六進(jìn)制的RGB顏色值對顏色進(jìn)行控制,即顏色可以通過英文名稱或者十六進(jìn)制來表現(xiàn)。如標(biāo)準(zhǔn)的紅色,可以用RED作為名稱來表現(xiàn),也可以用#FF0000作為十六進(jìn)制來表現(xiàn)。能夠使用的預(yù)設(shè)顏色命名總共有140種,常用的有16種:Black、Olive、Teal、Red、Blue、Maroon、Navy、Gray、Lime、Fuchsia、White、Green、Purple、Silver、Yellow和Aqua。background-color設(shè)定背景顏色語法:

background-color:color-valuebackground-image設(shè)定背景圖像語法:

background-image:none|url(url)

none:無背景圖。url(url):使用絕對或相對地址指定背景圖像。不僅可以輸入本地圖像文件的路徑和文件名稱,也可以用URL的形式輸入其他位置的圖像名稱。頁面中可以用JPG或者GIF圖片作為背景圖,這與向網(wǎng)頁中插入圖片不同,背景圖像放在網(wǎng)頁的最底層,文字和圖片等都位于其上。background-repeat設(shè)定背景圖像平鋪語法:

background-repeat:repeat|repeat-x|repeat-y|no-repeatbackground-attachment設(shè)定背景圖像是否跟隨頁面內(nèi)容滾動語法:

background-attachment:scroll|fixed

scroll:背景圖像跟隨頁面內(nèi)容滾動。fixed:背景圖像固定。background-position設(shè)定背景圖像位置語法:

background-position:[value]|[top|center|bottom]|[left|center|right]

背景圖像位置屬性可以確定背景圖像的絕對位置,這是HTML標(biāo)記不具備的功能。該屬性只能用于塊級元素和替換元素(包括img,input,textarea,select和object)background設(shè)定背景綜合屬性語法:

background:background-color||background-image||background-repeat||background-attachment||background-position

如果使用該復(fù)合屬性定義其單個參數(shù),則其他參數(shù)的默認(rèn)值將無條件覆蓋各自對應(yīng)的單個屬性設(shè)置容器屬性說明width設(shè)定元素的寬度height設(shè)定元素的高度float允許文字環(huán)繞在一個元素的周圍clear指定在某一個元素的某一邊是否允許有環(huán)繞的文字或者元素padding設(shè)定在邊框與內(nèi)容之間插入的空間距離,有4個屬性值分別用于設(shè)定上下左右的填充距離。margin設(shè)定一個元素在4個方向與瀏覽器窗口邊界或者上一級元素邊界的距離,有4個屬性值:top、right、bottom、left,分別控制4個方向8.5.4容器屬性列表屬性說明list-style-type設(shè)定引導(dǎo)列表項目的符號類型list-style-image選擇圖像作為項目的引導(dǎo)符號list-style-position決定列表項目所縮進(jìn)的程度list-style綜合設(shè)定列表項目屬性8.5.5列表屬性list-style-type設(shè)定列表樣式語法:

list-style-type:valuelist-style-image設(shè)定列表圖像語法:

list-style-image:none|url(url)

none:不指定圖像。url(url):使用絕對或者相對地址指定背景圖像。list-style-position設(shè)定列表位置語法:

list-style-position:outside|inside

outside:列表貼近左側(cè)邊框。inside:列表縮進(jìn)。list-style設(shè)定綜合屬性語法:

list-style:list-style-image||list-style-position||list-style-type語法:

溫馨提示

  • 1. 本站所有資源如無特殊說明,都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等,如果需要附件,請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙,網(wǎng)頁內(nèi)容里面會有圖紙預(yù)覽,若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲空間,僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理,對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯,并不能對任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容,請與我們聯(lián)系,我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論