網(wǎng)頁(yè)設(shè)計(jì)與制作第13章

1、第13章 CSS的屬性和值一、CSS字體屬性1、字體集合(font-family)可以用一個(gè)指定的字體名或一個(gè)種類的字體集合。多個(gè)集合的賦值是可以使用的，而如果確定了一個(gè)指定的字體賦值，就應(yīng)該有一個(gè)種類集合名隨后，以防第1個(gè)選擇不存在。定義一個(gè)字體的集合的時(shí)候，就相當(dāng)于定義了一個(gè)字體的控制集合，當(dāng)瀏覽器解釋執(zhí)行的時(shí)候，會(huì)控制集合中所列的字體順序從前到后的選擇字體。任何包含空格的字體名都必須用單引號(hào)引住。字體集合也可以用字體屬性給出。案例名稱：字體集合 l2-1.htm字體集合pfont-family:隸書(shū),times,serif字體集合text/css CSS字體 2002:7:25 eva(

2、原創(chuàng)) FONT-FAMILY屬性： 每部機(jī)器上都裝有多種字體，瀏覽器會(huì)使用默認(rèn)的字體瀏覽網(wǎng)頁(yè)，比如簡(jiǎn)體中文版WINDOWS漢字默認(rèn)是宋體，英文默認(rèn)是ARIAL。 使用FONT-FAMILY屬性則可以規(guī)定瀏覽器用什么字體解讀網(wǎng)頁(yè)。 FONT-FAMILY語(yǔ)法實(shí)例： h2 font-family:times,impact,sans-serif 說(shuō)明如下: helvetica是瀏覽器首先尋找的字體名稱，如果有就使用它。在helvetica字體沒(méi)有找到的情況下，則會(huì)尋找impact字體，如果找到就使用它。如果以上兩種字體都沒(méi)有找到，則指示瀏覽使用sans-serif（通用字體）。在你不能保證你列出的

3、字體瀏覽者一定會(huì)安裝時(shí)，將一種通用字體加在字體列表中是一種好的做法。因此我們提倡使用最基本的字體制作網(wǎng)頁(yè)，比如中文用宋體，英文用ARIAL，這樣使得你的網(wǎng)頁(yè)不會(huì)因?yàn)闉g覽器沒(méi)能使用合適的字體解讀而變樣。 如果一種字體的名稱中有空格，如Times New Roman，在CSS語(yǔ)句中要用引號(hào)包含該字體。 例：Body font-family:Times New Roman,serif 如果該語(yǔ)句已在雙引號(hào)里，則字體名降級(jí)為單引號(hào)。 例： 如果該語(yǔ)句包括其它CSS規(guī)則，字體說(shuō)明應(yīng)放在最后。 例:H2 color:red;margin:10px;font-family:Times New Roman,s

4、erif2、字體風(fēng)格(font-style)該屬性以3個(gè)方法的其中一個(gè)來(lái)定義顯示的字體：normal（普通）、italic（斜體）或oblique（傾斜）。案例名稱：字體風(fēng)格 l2-2.htm字體風(fēng)格pfont-style:oblique字體風(fēng)格3、字體變形(font-variant)字體變形屬性決定了字體的顯示是normal（普通）還是small-caps（小型大寫(xiě)字母）。當(dāng)設(shè)置字體變形為小型大寫(xiě)字母時(shí)文字中的所有小寫(xiě)字母會(huì)顯示比大寫(xiě)字母稍小的大寫(xiě)字母。案例名稱：字體變形 l2-3.htm字體變形pfont-variant:small-caps字體變形ABCabc4、字體加粗(font-we

5、ight)字體加粗屬性用作說(shuō)明字體的字重,該屬性值可以從100到900，normal相當(dāng)于400，bold相當(dāng)于700，bolder是將繼承值加上一個(gè)等級(jí)，lighter是將繼承值減上一個(gè)等級(jí)。瀏覽器能不能正確顯示要看使用的字體類型支持幾種粗細(xì)值。案例名稱：字體加粗 l2-4.htm字體加粗pfont-family:Verdana;font-size:20ptfont-weight:100font-weight:600font-weight:200font-weight:700font-weight:300font-weight:800font-weight:400font-weight:90

6、0font-weight:500 5、字體大小(font-size)字體大小屬性用作修改字體顯示的大?。簒x-small/x-small/small/medium/large/x-large/xx-large /smaller/larger/百分比/高度。關(guān)鍵字的本級(jí)與上級(jí)的比是：1:1.5，比如：medium與large的比是1:1.5；而larger是將繼承值加上一級(jí)，smaller是將繼承值減上一級(jí)；百分比是將默認(rèn)字體擴(kuò)大或縮小若干倍；高度的單位前面已講過(guò)。案例名稱：字體大小 l2-5.htm字體大小spanfont-size:20ptxx-smallx-smallsmallmedium

7、largex-largexx-large50%100%200%5pt10pt20pt20pt20ptsmaller20ptlarger6、字體(font)屬性值： | | / 該屬性可以一次定義前面所提到的所有屬性，還有行高。例如Pfont:italic bold 12pt/14pt 黑體,Times 用于指定該段為italic（斜體）和bold（字重），24點(diǎn)大小和行高為44點(diǎn)，黑體或Times字體。案例名稱：字體大小 l2-6.htm字體pfont:italic bold 24pt/50pt 黑體,Times字體字體二、CSS文本屬性1、字體間隔(letter-spacing)字母間隔屬性

8、定義一個(gè)附加在字符之間的間隔數(shù)量。該值必須符合長(zhǎng)度格式，允許使用負(fù)值。一個(gè)設(shè)為0值會(huì)阻止文字的調(diào)整。案例名稱：字體間隔 l2-7.htm字體間隔pletter-spacing:40pt字體間隔CSS另外還有word-spacing,例如word-spacing：10pt，但是這種規(guī)定字符之間寬度的方式只在Netscape Communicator6.0才被很好的支持。2、字體修飾(text-decoration)文本修飾屬性允許通過(guò)5個(gè)屬性中的一個(gè)來(lái)修飾文本：underline（下劃線）、overline（上劃線）、line-through（刪除線）、blink（閃爍，只適用NetScape瀏

9、覽器），或默認(rèn)地使用none。當(dāng)需要同是寫(xiě)上兩種屬性的時(shí)候，在中間加上空格就可以了。案例名稱：字體修飾 l2-8.htm字體修飾p text-decoration:line-through underline字體修飾3、縱向排列(vertical-align)縱向排列屬性可以用作一個(gè)內(nèi)部元素的縱向位置，相對(duì)于它的上級(jí)元素或相對(duì)于元素行（一個(gè)內(nèi)部元素是沒(méi)有行在其前和其后斷開(kāi)的，例如，在HTML中的EM、A和IMG）。該值可以是一個(gè)相對(duì)于元素行高屬性的百分比，它會(huì)在上給基線上增高元素基線的指定數(shù)量。該值可以是負(fù)值。baseline（使元素和上級(jí)元素的基線對(duì)齊）middle（縱向?qū)R元素基線加上上級(jí)

10、元素的高度字母x的高度的一半的中點(diǎn)）sub（下標(biāo)）super（上標(biāo)）text-top（使元素和上級(jí)元素的字體向上對(duì)齊）text-bottom（使元素和上級(jí)元素的字體向下對(duì)齊）影響相對(duì)于元素行的位置的關(guān)鍵字有下面兩個(gè)。top（使元素和行中最高的元素向上對(duì)齊）bottom（使元素和行中最低的元素向下對(duì)齊）案例名稱：縱向排列 l2-9.htm縱向排列spanvertical-align:super縱向排列CSS樣式4、文本轉(zhuǎn)換(text-transform)文本轉(zhuǎn)換屬性允許通過(guò)以下4個(gè)屬性中的一個(gè)來(lái)轉(zhuǎn)換文本。capitalize（使每個(gè)字的第1個(gè)字母大寫(xiě)）uppercase（使每個(gè)字的所有字母大寫(xiě)）

11、lowercase（使每個(gè)字的所有字母小寫(xiě)）none（使用原始值）案例名稱：文本轉(zhuǎn)換 l2-10.htm廣本轉(zhuǎn)換ptext-transform:capitalize廣本轉(zhuǎn)換css樣式abc5、文本排列(text-align)文本排列屬性可以應(yīng)用于塊級(jí)元素（如P、H1等），使元素文本得到排列，這個(gè)屬性的功能類似于HTML的段、標(biāo)題和部分ALIGN屬性：center、left、right，justify(兩端對(duì)齊)。注意：justify比較特殊，很多情況都不支持。案例名稱：文本排列 l2-11.htm文本排列On a dark desert highway, cool wind in my hai

12、r;Warm smell of colitas, rising up through the air;Up ahead in the distance, I saw a shimmering light. On a dark desert highway, cool wind in my hair;Warm smell of colitas, rising up through the air;Up ahead in the distance, I saw a shimmering light. 6、文本縮進(jìn)(text-indent)文本縮進(jìn)屬性可以應(yīng)用于塊級(jí)元素（如p和H1等），定義該元素第

13、1行可以接受的縮進(jìn)數(shù)量。該值必須是一個(gè)長(zhǎng)度或一個(gè)百分比。若為百分比則視上級(jí)元素的寬度而定?？蔀樨?fù)值。案例名稱：文本縮進(jìn) l2-12.htm文本縮進(jìn)文本縮進(jìn)文本縮進(jìn)文本縮進(jìn)文本縮進(jìn)文本縮進(jìn)文本縮進(jìn)文本縮進(jìn)文本縮進(jìn)文本縮進(jìn)文本縮進(jìn)文本縮進(jìn)文本縮進(jìn)文本縮進(jìn)文本縮進(jìn)文本縮進(jìn)文本縮進(jìn)文本縮進(jìn)文本縮進(jìn)文本縮進(jìn)文本縮進(jìn)7、行高(line-height)行高屬性可以接受一個(gè)控制文本基線之間的間隔的值。當(dāng)值為數(shù)字時(shí)，行高由元素字體大小的量與該數(shù)字相乘所得。百分比的值相對(duì)于元素字體的大小而定。行高屬性不允許使用負(fù)值。行高也可以由帶有字體大小的字體屬性產(chǎn)生。行高屬性可以用于雙行距的文本。案例名稱：行高 l2-13.

14、htm行高pline-height:900%行高行高8、顏色(color)案例名稱：顏色（顯示效果：文字顏色為深藍(lán)色） l2-14.htm顏色pcolor:#000088顏色三、CSS背景屬性1、背景顏色(background-color)背景顏色屬性設(shè)定一個(gè)元素的背景顏色。案例名稱：背景顏色 l2-15.htm背景顏色pcolor:red背景顏色2、背景圖像(background-image:url(圖片URL)背景圖像屬性設(shè)定一個(gè)元素的背景圖像。案例名稱：背景圖像 l2-16.htm背景圖像pbackground-image:url(hs a.gif)背景圖像3、背景重復(fù)(backgrou

15、nd-repeat)當(dāng)值為repeat-x時(shí)，圖像橫向重復(fù)；當(dāng)值為repeat-y時(shí)圖像縱向重復(fù)；當(dāng)使用repeat的時(shí)候，背景圖片滿屏平鋪；當(dāng)值為no-repeat的時(shí)候，只顯示一張圖，無(wú)任何方向的平鋪。案例名稱：背景重復(fù) l2-17.htm背景重復(fù)pbackground-image:url(hs.gif);background-repeat:repeat-x背景圖像4、背景圖像的依附(background-attachment)（直接在DREAMWARE里面實(shí)現(xiàn)更方便）屬性：fixed（背景圖案永遠(yuǎn)靜止，文字在背景上面“滾動(dòng)”）scroll（背景圖案隨著頁(yè)面上的文字一起“滾動(dòng)”）5、背景圖

16、像的初始位置(background-position)屬性值：百分比/距離/left/center/right/top/center/bottom初始值：0% 0%或left top百分比值參照元素本身的尺寸；距離是偏向于左上角的橫向、縱向的位置，單位前面已講過(guò)。案例名稱：背景位置 l2-18.htm背景位置pbackground-image:url(hs.gif);background-repeat:no-repeat;background-position:50% 5pt背景圖像6、背景(background)使用該屬性可以一次設(shè)置前面所提到的所有有關(guān)背景的屬性。類似于font屬性。屬性值

17、：| | | | 四、CSS容器屬性1、邊界(border)邊框?qū)傩允且粋€(gè)用于設(shè)置一個(gè)元素邊框的寬度、式樣和顏色的屬性。medium (是缺省值) thin (比medium細(xì)) thick (比medium粗) 用長(zhǎng)度單位定值?？梢杂媒^對(duì)長(zhǎng)度單位(cm, mm, in, pt,pc)或者用相對(duì)長(zhǎng)度單位 (em, ex,px)。border-top-width:thin/medium/thick/寬度值border-right-width:thin/medium/thick/寬度值border-bottom-width:thin/medium/thick/寬度值border-left-widt

18、h:thin/medium/thick/寬度值border-width:thin/medium/thick/寬度值（可以一次給出一個(gè)、兩個(gè)、三個(gè)或四個(gè)值，只有一個(gè)值4邊相等，某一邊框的寬度值缺失取對(duì)邊的寬度值，順序是：上右下左。）border-color:顏色值（可以一次給出一個(gè)、兩個(gè)、三個(gè)或四個(gè)值）border-style:none/dotted/dashed/solid/double/groove/ridge/inset/outset （可以一次給出一個(gè)、兩個(gè)、三個(gè)或四個(gè)值）border-top: | | border-right: | | border-bottom: | | borde

19、r-left: | | border: | | 注意：使用邊界屬性可以一次地設(shè)置所有邊界的寬度，也可以選擇分別設(shè)置上邊界、下邊界、左邊界和右邊界寬度；可以一次地設(shè)置所有邊界的寬度、樣式、顏色，也可以分別設(shè)置所有邊界的樣式、顏色；還可以分別設(shè)置上邊界、下邊界、左邊界和右邊界的寬度、樣式和顏色。案例名稱：邊框 l2-19.htm邊框pborder:10px groove blueinputborder:1px solid blue;background-color:#999999邊框 2、邊距(margin)設(shè)置了一個(gè)元素在四個(gè)方向上距離瀏覽器窗口邊界或上級(jí)元素的邊距。每個(gè)值可以是距離值或百分比之

20、一，百分比參考上一級(jí)元素的寬度，可以為負(fù)值。如果邊界在垂直方向鄰接（重疊），則會(huì)改用其中最大的那個(gè)邊界值，而水平方向則不會(huì)。margin-top:距離值/百分比margin-right:距離值/百分比margin-bottom:距離值/百分比margin-left:距離值/百分比margin:距離值/百分比（該屬性是上邊距、右邊距、下邊距和左邊距屬性的略寫(xiě)，可以一次給出一個(gè)、兩個(gè)、三個(gè)或四個(gè)值，只有一個(gè)值4邊距相等，某一邊距的距離值缺失取對(duì)邊的距離值，順序是：上右下左。）案例名稱：邊界 l2-20.htm邊界bodymargin:1em 2em 4em 6em邊界邊界邊界邊界邊界邊界邊界邊界邊

21、界邊界邊界邊界邊界CSS中margin 屬性參數(shù)省略的原則今天和大家分享一下css中各種塊級(jí)元素都可能會(huì)用到的margin屬性中參數(shù)的省略原則，相信大家看過(guò)之后會(huì)領(lǐng)會(huì)css當(dāng)中一些深層次的指導(dǎo)性思想。大家都知道，使用margin屬性是用來(lái)設(shè)置對(duì)象四邊的外邊距，如果提供全部四個(gè)參數(shù)，將按上-右-下-左的順序作用于四邊，即：margin：top right bottom left;記住這個(gè)模式的好的途徑是：這4個(gè)值從元素頂端開(kāi)始，順時(shí)針圍繞元素。值總是按照這個(gè)順序被使用，因此若想得到預(yù)期的效果，必須正確地排序它們。為什么會(huì)省略？有時(shí)，為margin輸入的值有些重復(fù),例如程序代碼:pmargin：0

22、.25em 1em 0.25em 1em;為了那些懶人少輸入這些煩人的代碼(不知道這是否是初衷，但肯定有這樣的懶人)，或許更實(shí)際的些是為了減小css文件的字節(jié)數(shù)，以減小帶寬占用，節(jié)省經(jīng)濟(jì)支出，因此出現(xiàn)了更簡(jiǎn)單的替代方法，不必這樣重復(fù)輸入一對(duì)值，可以用下面的標(biāo)記來(lái)代替它：pmargin:0.25em 1em;這樣的兩個(gè)值足以代替那四個(gè)值，是怎么做的呢？省略原則css定義了幾個(gè)步驟以接收少于四個(gè)的margin參數(shù)：1.如果沒(méi)有l(wèi)eft值，則使用right代替。2.如果沒(méi)有bottom值，則使用top代替。3.如果沒(méi)有right值，則使用top值代替。換句話來(lái)說(shuō)，如果給margin賦了三個(gè)值，則第四

23、個(gè)（left）由復(fù)制第二個(gè)（right）得到。如果給出了兩個(gè)，則第四個(gè)由復(fù)制第二個(gè)得到，第三個(gè)（bottom）由復(fù)制第一個(gè)（top）得到。最后，如果只給出了一個(gè)值，那么將被復(fù)制到其他三個(gè)。假如更喜歡直觀的說(shuō)明，請(qǐng)看如下所示的圖解。舉三個(gè)例子你應(yīng)該更加清楚了：1. b margin:10px; 和 b margin:10px 10px 10px 10px;是等價(jià)的；2. b margin:10px 5px; 和 b margin:10px 5px 10px 5px;是等價(jià)的；3. b margin: 5px 3px 4px;和 b margin:5px 3px 4px 3px;是等價(jià)的；有了這些

24、原則的指引之后，我想你在編寫(xiě)css的時(shí)候頭腦中對(duì)于margin屬性中參數(shù)的省略的思路應(yīng)該更加清晰了吧！.3、填充距padding一個(gè)元素的填充距是邊框和元素的內(nèi)容之間的間隔和數(shù)值。每個(gè)值可以是距離值或百分比之一，百分比參考上一級(jí)元素的寬度，填充距屬性不能使用負(fù)值。padding-top:距離值/百分比padding-right:距離值/百分比padding-bottom:距離值/百分比padding-left:距離值/百分比padding:距離值/百分比（該屬性是上距、右填充距、下填充距和左填充距屬性的略寫(xiě)，可以一次給出一個(gè)、兩個(gè)、三個(gè)或四個(gè)值，只有一個(gè)值4填充距相等，某一邊距的距離值缺失取對(duì)

25、邊的距離值，順序是：上右下左。） 案例名稱：填充距 l2-21.htm填充距ppadding:20px填充距填充距填充距填充距填充距填充距填充距填充距填充距填充距填充距4、寬度和高度(width、height)設(shè)定容器的寬和高width:寬度值/百分比/autoheight:寬度值/auto案例名稱：容器寬高 l2-22.htm寬度和高度inputwidth:200pt;height:50px5、浮動(dòng)和清除(float、clear)float：left|right|noneclear：none|left|right|both (IE不支持) float元素可以使文字環(huán)繞在一個(gè)元素的四周，初始值

26、為none，當(dāng)屬性值是right或left時(shí)，該元素就會(huì)相應(yīng)出現(xiàn)在右邊或左邊，即：文字環(huán)繞于該元素的左邊或右邊。案例名稱：浮動(dòng) l2-23.htm浮動(dòng).box1 float:right 我們可以非常明顯的看出應(yīng)用樣式表前后的區(qū)別。在使用樣式表之前，頁(yè)面表格中的圖片和文字與表格邊框完全沒(méi)有間隔，而且圖片位于文字上方，沒(méi)有什么美觀而言；但是在使用了樣式表之后，表格的邊框與其中的內(nèi)容之間有了整齊的間隔，而且圖片居右，文字環(huán)繞其周圍，實(shí)現(xiàn)了圖文混排的效果。五、分級(jí)屬性(list-style)disc (缺省值，黑圓點(diǎn)) circle (空心圓點(diǎn)) square (小黑方塊) decimal (數(shù)字排序

27、) lower-roman (小寫(xiě)羅馬字排序) upper-roman (大寫(xiě)羅馬字排序) lower-alpha (小寫(xiě)字母排序) upper-alpha (大寫(xiě)字母排序) none (無(wú)列表項(xiàng)標(biāo)記) list-style-type:disc|circle|square|decimal|lower-roman|upper-roman|lower-alpha|upper-alpha|nonelist-style-image:url(圖片URL)|nonelist-style-position:inside|outsidelist-style:|案例名稱：列表 l2-24.htm列表.list1

28、 list-style-position: inside;list-style-type: disc;font-size: 12px;line-height: 18px;color: #FF9900;.list2 font-family: 宋體;font-size: 12px;color: #006600;list-style-position: outside;list-style-type: square;line-height: 18px;.list3 font-family: 宋體;font-size: 12px;line-height: 18px;color: #000099;list-style-position: outside;list-style-image: url(list.gif);使用List（列表）可以讓你頁(yè)面中的內(nèi)容更具條理性，不過(guò)頁(yè)面中默認(rèn)的列表效果確不夠漂亮。每個(gè)列表項(xiàng)目的前面都是使用黑點(diǎn)或數(shù)字來(lái)標(biāo)識(shí)，影響了我們頁(yè)面的美觀。本例將通過(guò)CSS的list參數(shù)的設(shè)置，定義列表項(xiàng)樣式、列表項(xiàng)圖片和位置，從而