第2-1章 用CSS設置文字與背景

1、第3章 用CSS設置文字與背景本章要點CSS設置文字樣式CSS段落樣式和列表樣式CSS顏色和背景樣式文字與背景的綜合實例3.1 CSS文字與段落樣式1.字型font-family ：字體1，字體2，字體3，說明：這個屬性是一個按照優(yōu)先順序列出的字體名稱，它的表述方法與大多數(shù)的CSS屬性有些不同，它的值是用逗號分隔的，用來指定可替換的字體。例如：bodyfont-family:gill,helvetica,sans-serif 上面這行代碼執(zhí)行時，如果瀏覽器沒有找到gill字體，那么將使用helvetica或者sans-serif字體來替代。3.1.1 CSS文字樣式2.字號font-size：

2、 | 說明：關(guān)鍵字指的是字體尺寸的絕對值，推薦單位為點數(shù)（pt）。點數(shù)（pt）是計算機字體的標準單位，這一單位的好處是設定的字號會隨著顯示器的分辨率的變化而調(diào)整大小，這樣可以防止不同分辨率顯示器中字體大小不一致。如果使用點數(shù)作為單位，推薦正文文字大小為9pt。 3.字體樣式font-style：normal | italic | oblique說明：normal表示 正常字體，italic 表示斜體，oblique表示偏斜體（有時本身并不是斜體，而是被系統(tǒng)自動變斜的普通字形）。4.字體粗細font-weight ：normal | bold |boder| lighter | 100 | 20

3、0 | 300 | 400 | 500 | 600 | 700 | 800 | 900說明：font-weight 定義了字體的粗細值。這些值從100排到900，每一個數(shù)字所表示的字體都要比它前一個粗一些。在這些值當中， normal相當于400， bold相當于700， bolder相當于900。5.字體大小寫font-variant：normal | small-caps說明：font-variant 屬性決定了字符是以普通還是以小體大寫(small-caps)顯示。6.文字修飾text-decoration：underline|overline|line-through|blink|no

4、ne說明：underline表示下劃線；overline表示上劃線；line-through表示刪除線；blink表示閃爍文字（只有Netscape瀏覽器支持）；none表示默認值（去掉超鏈接下劃線用此值）。7.英文大小寫轉(zhuǎn)換text-transform：captalize|uppercase|lowercase|none說明：capitalize表示首字母大寫；uppercase表示大寫；lowercase表示小寫；none表示默認值。1.段落的水平對齊方式text-align：Left| right| center| justify說明：left表示左對齊；right表示右對齊；cente

5、r表示居中對齊；justify表示兩端對齊。2.字符間距l(xiāng)etter-spacing：normal|說明：字符間距用來設置字符或英文字母間距。3.單詞間距word-spacing：normal|說明：單詞間距用來設置英文單詞之間的距離。使用正值為增加單詞的間距，使用負值為減小單詞的間距。3.1.2 CSS段落文字4.文字的首行縮進text-indent：value說明：文字縮進與字號單位保持統(tǒng)一。如字號為9pt，若想創(chuàng)建兩個中文縮進的效果，文字縮進就應該為18pt，也可以用設為2em。5.行高line-height：value說明：行高值可以絕對像素值，也可用百分比數(shù)來表示。當值為數(shù)字時，行高

6、由字體大小的量與該數(shù)字相加所得，百分比的值相對與字體的大小而定。3.1.3 CSS 列表某種意義上講，不是描述性的文本的任何內(nèi)容都可以認為是列表。 1.列表類型要影響列表的樣式，最簡單（同時支持最充分）的辦法就是改變其標志類型。list-style-type : value說明：對于type屬性，可以設置多種符號類型。2.列表項圖像如果要把列表的標志改成一個圖像，可以利用 list-style-image 屬性：ul li list-style-image : url(*.gif)說明：這個屬性指定作為一個有序或無序列表項標志的圖像。圖像相對于列表項內(nèi)容的放置位置通常使用 list-style

7、-position 屬性控制。3.列表標志位置CSS可以確定標志出現(xiàn)在列表項內(nèi)容之外還是內(nèi)容內(nèi)部。這是利用 list-style-position 完成的。例如：list-style-position 屬性設置在何處放置列表項標記。說明：該屬性用于聲明列表標志相對于列表項內(nèi)容的位置。外部 (outside) 標志會放在離列表項邊框邊界一定距離處，不過這距離在 CSS 中未定義。內(nèi)部 (inside) 標志處理為好像它們是插入在列表項內(nèi)容最前面的行內(nèi)元素一樣。4.簡寫列表樣式為簡單起見，可以將以上 3 個列表樣式屬性合并為一個方便的屬性：list-style，就像這樣：li list-style

8、 : url(example.gif) square insidelist-style 的值可以按任何順序列出，而且這些值都可以忽略。只要提供了一個值，其它的就會填入其默認值。3.2 CSS顏色與背景樣式CSS屬性color用于指定元素的前景色。 CSS屬性background-color用于指定元素的背景色。例如： body background-color: #FFCC66;h1 color: #990000;background-color: #FC9804;該例中，我們?yōu)閎ody和h1元素分別應用了不同的背景色。 3.2.1 設置顏色3.2.2 設置背景圖像 CSS屬性backgrou

9、nd-image用于設置背景圖像。利用該屬性可以設置網(wǎng)頁的背景，也可以設置表格、段落的背景。如果要把某個圖片作為網(wǎng)頁的背景圖像，只要在body元素上應用background-image屬性、然后給出該圖片的存放位置就行了。例如：body background-color: #FFCC66;background-image: url(butterfly.gif);3.2.3 背景圖像的重復方式CSS屬性background-repeat用于設置背景圖像的重復方式。background-repeat的四種不同取值。（1）repeat 表示背景圖像平鋪，默認值為repeat。（2）repeat-x

10、表示背景圖像只在x方向平鋪。（3）repeat-y 表示背景圖像只在y方向平鋪。（4）no-repeat 表示背景圖像不重復，以原始大小顯示。3.2.4 固定背景圖像CSS屬性background-attachment用于指定背景圖像是固定在屏幕上的、還是隨著它所在的元素而滾動的。一個固定的背景圖像不會隨著用戶滾動頁面而發(fā)生滾動（它是固定在屏幕上的），而一個非固定的背景圖像會隨著頁面的滾動而滾動。background-attachment的兩種不同取值。（1）scroll 表示圖像會跟隨頁面滾動（非固定的）。（2）fixed 表示圖像是固定在屏幕上的。3.2.5 背景圖片位置默認情況下背景圖片

11、都是從設置了BACKGROUND屬性的標記的左上角開始出現(xiàn)的，但實際制作時設計者往往希望背景出現(xiàn)在指定的位置。在CSS中可以通過background-position屬性輕松地調(diào)整背景圖片的位置。background-position的9種不同取值。（1）bottom right 表示背景圖像在右下角。（2）top left 表示背景圖像左上角。（3）top center 表示背景圖像在頂部中間。（4）top right 表示背景圖像在右上角。（5）center left 表示背景圖像在左邊中間。（6）center center表示背景圖像在正中央。（7）center right 表示背景圖像

12、在右邊中部。（8）bottom left表示背景圖像在左下角。（9）bottom center表示背景圖像在底部中間。3.2.6 背景樣式的縮寫CSS屬性background是上述所有與背景有關(guān)的屬性的縮寫用法。使用background屬性可以減少屬性的數(shù)目，因此令樣式表更簡短易讀。 例如，下面五行代碼：background-color: #FFCC66;background-image: url(butterfly.gif);background-repeat: no-repeat;background-attachment: fixed;background-position: right

13、 bottom;如果使用background屬性的話，實現(xiàn)同樣的效果只需一行代碼即可：background: #FFCC66 url(butterfly.gif) no-repeat fixed right bottom;3.3 綜合實例 3.3.1 文字的綜合應用新聞網(wǎng)頁通常要把新聞的標題、新聞來源、新聞的發(fā)布日期、新聞媒體、新聞內(nèi)容等信息通過不同在字體和段落表現(xiàn)出來。因此，設計新聞顯示頁面要特別注意文字和段落的排版。圖3-17是一個新浪網(wǎng)的一個新聞頁面。 仔細觀察頁面的特點，首先建立段落的HTML結(jié)構(gòu)，頁面分為標題、新聞來源、正文三個部分。其次設置各頁面元素的CSS樣式，標題和新聞來源居中

14、顯示，正文里有兩個段落加粗顯示。此外新聞頁面上還有不同樣式的超鏈接，我們可以先定義一個通用的超鏈接樣式，再把特殊的超鏈接樣式單獨定義。實例的完整代碼如例3-17所示。3.3.2 背景的綜合應用通過添加各種標記，可以讓網(wǎng)頁擁有多個背景。本例的效果如圖所示。首先定義頁面的背景色。CSS代碼如下：body background-color:#0099FF; /*頁面背景色*/ text-align:center; /*頁面居中*/ 其次定義頁面的主體的背景圖片。CSS代碼如下：#bg width:1000px; height:820px; background: url(bg.jpg); /*背景圖片*/再定義頁面內(nèi)容部分的背景圖片。CSS代碼如下：#content width:450px; heig