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

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

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

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

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

5、ight)字體加粗屬性用作說明字體的字重,該屬性值可以從100到900，normal相當(dāng)于400，bold相當(dāng)于700，bolder是將繼承值加上一個等級，lighter是將繼承值減上一個等級。瀏覽器能不能正確顯示要看使用的字體類型支持幾種粗細(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)鍵字的本級與上級的比是：1:1.5，比如：medium與large的比是1:1.5；而larger是將繼承值加上一級，smaller是將繼承值減上一級；百分比是將默認(rèn)字體擴大或縮小若干倍；高度的單位前面已講過。案例名稱：字體大小 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點大小和行高為44點，黑體或Times字體。案例名稱：字體大小 l2-6.htm字體pfont:italic bold 24pt/50pt 黑體,Times字體字體二、CSS文本屬性1、字體間隔(letter-spacing)字母間隔屬性

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

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

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

11、lowercase（使每個字的所有字母小寫）none（使用原始值）案例名稱：文本轉(zhuǎn)換 l2-10.htm廣本轉(zhuǎn)換ptext-transform:capitalize廣本轉(zhuǎn)換css樣式abc5、文本排列(text-align)文本排列屬性可以應(yīng)用于塊級元素（如P、H1等），使元素文本得到排列，這個屬性的功能類似于HTML的段、標(biāo)題和部分ALIGN屬性：center、left、right，justify(兩端對齊)。注意：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、文本縮進(text-indent)文本縮進屬性可以應(yīng)用于塊級元素（如p和H1等），定義該元素第

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

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

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

16、像的初始位置(background-position)屬性值：百分比/距離/left/center/right/top/center/bottom初始值：0% 0%或left top百分比值參照元素本身的尺寸；距離是偏向于左上角的橫向、縱向的位置，單位前面已講過。案例名稱：背景位置 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ū)傩允且粋€用于設(shè)置一個元素邊框的寬度、式樣和顏色的屬性。medium (是缺省值) thin (比medium細(xì)) thick (比medium粗) 用長度單位定值?？梢杂媒^對長度單位(cm, mm, in, pt,pc)或者用相對長度單位 (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/寬度值（可以一次給出一個、兩個、三個或四個值，只有一個值4邊相等，某一邊框的寬度值缺失取對邊的寬度值，順序是：上右下左。）border-color:顏色值（可以一次給出一個、兩個、三個或四個值）border-style:none/dotted/dashed/solid/double/groove/ridge/inset/outset （可以一次給出一個、兩個、三個或四個值）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è)置了一個元素在四個方向上距離瀏覽器窗口邊界或上級元素的邊距。每個值可以是距離值或百分比之

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

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

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

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

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

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

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

27、) lower-roman (小寫羅馬字排序) upper-roman (大寫羅馬字排序) lower-alpha (小寫字母排序) upper-alpha (大寫字母排序) none (無列表項標(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（列表）可以讓你頁面中的內(nèi)容更具條理性，不過頁面中默認(rèn)的列表效果確不夠漂亮。每個列表項目的前面都是使用黑點或數(shù)字來標(biāo)識，影響了我們頁面的美觀。本例將通過CSS的list參數(shù)的設(shè)置，定義列表項樣式、列表項圖片和位置，從而