l  本章簡介：

我們在瀏覽網頁時，任何一個網頁基本都是以文字和圖片傳達資訊的，因此文字和圖片是網頁設計中不可缺少的元素，也是網頁的重要顯示形式。

本章學習設定文字的各種效果，和圖片的與文字的混排效果，以及超連結的樣式，背景圖片的設定等等

l  本章單詞：

Font-family                 字型型別

Font-size                     字型大小

Font-weight                字型粗細

Text-align                   文字水平對齊

Text-indent                 首行文字縮排

Line-height                 文字行高

Text-decoration          文字修飾

Text-shadow               文字陰影

Background-color       背景顏色

Background-image      背景圖片

Background-position   背景位置

Background-repeat     背景平鋪

List-style                     列表型別

Inner-gradient             線性漸變

Radial-gradient           徑向漸變

l  5．1      編輯網頁文字

文字是最重要的組成部分，通過文字可以傳遞各種資訊，接下來將學習設定字型大小，字型型別，文字顏色，字型風格等關於字型的樣式

通過CSS樣式設定文字段落的對齊方式，文字與圖片的對齊方式，以及文字縮排來排版網頁

1.    字型的型別

在CSS中字型的型別是通過 font-family屬性來控制的。

p{ font-family: Verdana,"楷體";}

上面同時聲明瞭兩種字型

多種字型之間要用英文模式下的逗號分隔。

宣告字型時，需要把英文字型放在中文字型的前面，不然無法生效。

在開發中，預設的字型是“宋體”，也是計算機預設的字型。

2.    字型的大小

在網頁中，通過字型的大小來突出主體是非常常用的方法，CSS是通過       font-size 來控制字型大小的，常用單位是 px （畫素）.

p{  font-size: 30px; }

設定字型的單位還有 in , cm ,mm , pt , pc 還有百分比。

最常用的是單位是 px .

3.    字型的風格

使用 font-style 屬性設定的字型風格，屬性有三個值：

斜體字型樣式       italic

p{  font-style: italic;}

傾斜字型樣式       oblique

p{  font-style: oblique;}

標準字型樣式       normal

p{  font-style: normal;}

4.    字型的粗細

在網頁中讓某段文字進行字型的加粗來突出顯示也是很常用的方法

預設值，標準的字型   normal；

p{ font-weight: normal;}

粗體字型       bold

p{ font-weight: bold;}

更粗的字型    bolder

p{ font-weight: bolder;}

更細的字型    lighter

p{ font-weight: lighter;}

自定義字型，100 ~ 900， 400= normal ， 700 等於 bold。

p{ font-weight:888;}

5.    字型的屬性

前面的幾種設定都是單獨使用的，實際上CSS如果對同一部分設定多種字型屬性時，就需要 font 屬性來進行宣告，即利用font 屬性一次設定字型的所有屬性，個屬性之間用英文空格分開，

但是需要遵循：字型風格 > 字型粗細> 字型大小 > 字型型別 ，這種順序。

p{ font: oblique bolder 18px "楷體";}

l  5．2      網頁排版

在網頁當中，排版的網頁文字有：

1.    文字顏色color

在HTML頁面當中，顏色統一使用RBG 格式。

也就是 紅綠藍 三原色模式。

p{     color: rgb(255,255,255);     }

也有 RGBA模式，它在 RGB基礎上增加了控制透明度的引數，透明值為0 ~ 1.

0 是完全透明，1 是完成不透明，並且不能是負數。

p{  color: rgba(123,124,124,1.5); }

2． 水平對齊方式

通過 text-align 屬性可以設定文字：

左對齊

p{  text-align: left;}

居中對齊

p{  text-align: center;}

右對齊

p{  text-align: right;}

兩端對齊

p{  text-align: justify;}

3． 首行縮排

可以通過 line-indent 來設定首行縮排

p{  text-indent: 28px;}

4． 行高

可以通過 line-height 來設定行高

p{ line-height: 28px;}

5． 文字裝飾

標準的文字，none

p{  text-decoration: none;}

文字的下劃線

p{  text-decoration: underline;}

文字的上劃線

p{  text-decoration: overline;}

文字的刪除線

p{  text-decoration: line-through;}

6．垂直對齊方式

在 CSS中通過 vertical-align來設定垂直方向的對齊方式

不過只對表格單元格中的物件使用起作用，對於其他的標籤目前瀏覽器還不支援

在實際的運用中，通常使用 vertical-align 來設定文字和圖片的居中對齊。

p{ vertical-align: middle;}

7．文字的陰影

Text-shadow 屬性有兩個作用，即模糊主題和產生陰影。

Text-shadow : color  x軸位移 y軸位移 模糊半徑

p{  text-shadow: red 10px 10px 2px; }

l  5．3      超連結偽類

作為HTML中常用的標籤，超連結的樣式有顯著的特殊性，當為某文字或圖片設定超連結時

，文字或圖片標籤將繼承超連結的預設樣式。

文字新增超連結後將默認出現下劃線，單擊前文字顏色為藍色，單擊後文本顏色為紫色，正在單擊的超連結為紅色。

這種顏色的不同就是超連結的預設偽類樣式。

 a:link           單擊訪問前的超連結樣式

a:link{ color: red; }

 a:visited       單擊訪問後的超連結樣式

a:visited{ color: red;}

 a:hover        滑鼠懸浮上的超連結樣式

a:hover{ color: red;}

 a:active        單擊未釋放的超連結樣式

a:active{ color: red;}

設定偽類的順序為：a:link   >  a:visited   >  a:hover    >  a:active。

l  5．4      列表樣式

在瀏覽網頁時，使用列表組織網頁內容時無所不在的。

CSS列表有四個屬性來設定列表樣式，分別是：
 

li{ list-style-type: none;}     無標記符號
li{ list-style-type: disc;}     實心圓，預設型別
li{ list-style-type: circle;}   空心圓
li{ list-style-type: square;}   實心正方形
li{ list-style-type: decimal;}  數字

也可以用用簡寫的方式：

li{ list-style: none;}

l  5．5      背景樣式

在瀏覽網頁時能看到各種各樣的背景顏色（background）,有頁面整體的影象背景，顏色背景，也有部分的影象背景，顏色背景等。

1． 背景顏色

在CSS中，使用background-color屬性設定字型，標籤，列表等網頁元素的背景顏色。

背景顏色的表示方法和 color 表示方法一樣，也是用 16進位制的方法來表示

它有一個特殊值 transparent 即透明，也是此屬性的預設值。

li{ background-color: red;}

2． 背景影象

除了背景的顏色還能設定背景的顏色，還可以使用影象作為某個元素的背景。

CSS中使用 background-imgage屬性設定網頁元素的背景影象。

div{ background-image: url("image/title.jpg"); }

如果僅設定背景影象的話，預設影象會自動向水平和垂直兩個方向重複平鋪。

如果想要控制背景影象的平鋪方向的話，則使用 background-repeat 屬性來控制。

有四個值為實現不同的平鋪的方式：

div{ background-repeat: repeat; }       沿水平和垂直兩個方向平鋪
div{ background-repeat: no-repeat; }    不平鋪，背景影象只顯示一次
div{ background-repeat: repeat-x; }     只沿水平方向進行平鋪
div{ background-repeat: repeat-y; }     只沿垂直方向進行平鋪

3． 背景定位

使用 background-position 可以設定背景影象在背景中的位置。

背景影象預設從被修飾的網頁元素的左上角開始顯示影象。

也可以使此屬性設定背景影象出現的位置，讓背景出現一定的偏移

可以使用數值、百分比、關鍵詞、三種方式表示水平和垂直方向的偏移量。

div{ background-position: 200px 100px;}
div{ background-position: 30%   10%;}

第一個表示水平位置，第二個表示垂直位置

div{ background-position: left center right;}  水平方向
div{ background-position: top  center bottom;} 垂直方向

’

背景樣式的CSS屬性也可以像 font屬性進行簡寫，

使用  background把多種屬性綜合宣告在一起

div{ background: #FF0000 url("img/title.jpg") 205px 20px no-repeat}

l  5．6      背景的尺寸

背景是使用率很高的一個屬性，可以顯示實現一些特殊的效果。

但是css的提供的 background功能有時無法滿足所有需求。

使用background-size 可以直接對背景圖片進行控制

使用背景圖片時，那個元素必須有高度和寬度，不然背景圖片會顯示不出來

背景圖片在元素中顯示是按自己本身的高度和寬度來平鋪的，和外面的高寬無關。

1.    auto       預設屬性，讓背景圖片保持原樣。

div{ background-size: auto; }

2．Cover  填滿屬性，會充滿當前的標籤內容。

div{ background-size: cover; }

3．contain 讓背景圖片保持本身的寬高比例，並將圖片縮放到寬度或高度正好適應所定義的背景區域

div{ background-size: contain; }

cover 和 contain 在背景圖片沒處理好時，都會讓圖片失真。

只有為預設值 auto 時，背景圖片才不會失真。

l  5．7      CSS3 漸變

1.  線性漸變

線性漸變使顏色沿著一條直線過渡：從左到右，從右到左，從上到下等。

第一個屬性是方向，第二個和第三個是顏色。

div{ background: linear-gradient(to top,orange,black)}

2． 徑向漸變

徑向漸變使圓形或或橢圓形漸變，顏色不再是沿著一條直線出發，而是從一個起點像所有的方向混合。

body{ background: radial-gradient(oldlace,darkcyan)}

l  本章總結：

1、使用CSS的字型樣式可以設定字型的 大小、型別、風格、粗細等。

2、使用CSS的文字樣式可以設定字型的 顏色、對齊方式、首行縮排、行距、文字裝飾、文字陰影等。

3、使用CSS的超連結樣式可以設定偽類超連結在不同狀態下的樣式

4、使用CSS的列表屬性可以設定列表項的型別

5、使用CSS的的背景屬性可以設定頁面背景顏色，背景圖片，背景尺寸。

6、使用CSS的的漸變效果可以實現背景的多樣性。