Web前端技術(shù)開發(fā)（HTML5+CSS3+JavaScript）課件 第五單元 使用CSS美化頁面

Web前端開發(fā)技術(shù)第五單元使用CSS美化頁面掌握CSS的基本概念及其使用學(xué)會(huì)插入CSS樣式表學(xué)會(huì)編寫CSS文件CSS選擇符類型的應(yīng)用CSS樣式表的引入5.1CSS基礎(chǔ)5.2CSS字體樣式設(shè)置5.3文本精細(xì)排版5.4背景設(shè)置

CSS基礎(chǔ)15.1.1CSS樣式表的概念CSS（CascadingStyleSheet）即層疊樣式表或稱級(jí)聯(lián)樣式表，簡稱樣式表。樣式：是指對(duì)網(wǎng)頁中的元素（文字、段落、圖像、列表等）外觀的整體概括，即描述所有網(wǎng)頁元素的顯示形式（例如，文字的大小、字體、背景及圖像的顏色、大小等都是樣式）。層疊：就是指當(dāng)HTML文件引用多個(gè)CSS文件時(shí)，如果CSS文件之間所定義的樣式發(fā)生了沖突，將依據(jù)層次的先后來處理樣式對(duì)內(nèi)容的控制，遵循最近優(yōu)先原則；CSS還具有繼承的特性，子元素會(huì)自然繼承父元素的樣式。HTML與CSS的關(guān)系：內(nèi)容結(jié)構(gòu)與表現(xiàn)形式的關(guān)系，HTML確定網(wǎng)頁結(jié)構(gòu)和內(nèi)容，CSS來決定頁面元素的表現(xiàn)形式。5.1.2CSS的選擇器基本語法：語法說明：

5.1.2CSS的選擇器CSS選擇器具有多種不同類型，從大類上分主要有“基本”選擇器和“復(fù)合”選擇器?；具x擇器：1.標(biāo)記選擇器

基于語法：2.類選擇器

基于語法：3.ID選擇符

基于語法：

5.1.2CSS的選擇器復(fù)合選擇器：1.交集選擇器

基于語法：2.并集選擇器

基于語法：3.包含選擇符

基于語法：

5.1.2CSS的選擇器偽類：

偽類不屬于選擇符，它是讓頁面呈現(xiàn)豐富表現(xiàn)力的特殊屬性。之所以稱為“偽”，是因?yàn)樗付ǖ膶?duì)象在文檔中并不存在，它們指定的是元素的某種狀態(tài)。

應(yīng)用最為廣泛的偽類是鏈接的4個(gè)狀態(tài)：未鏈接狀態(tài)（a:link）；已訪問鏈接狀態(tài)（a:visited）；鼠標(biāo)指針懸停在鏈接上的狀態(tài)（a:hover）；被激活（在鼠標(biāo)單擊與釋放之間發(fā)生的事件）的鏈接狀態(tài)（a:active）。基于語法：

5.1.3CSS樣式表引入方式

本小節(jié)介紹插入CSS樣式表到HTML文檔的3種常用方式，分別是鏈入外部樣式表、內(nèi)部樣式表、嵌入樣式表。1.鏈入外部樣式表基本語法：語法說明：rel=＂stylesheet＂是指在HTML文件中使用的是外部樣式表；type=＂text/css＂指明該文件的類型是樣式表文件；href的URL指定CSS樣式表文件地址，一般使用相對(duì)地址來表示。

5.1.3CSS樣式表引入方式2.內(nèi)部樣式表基本語法：語法說明：

<style></style>標(biāo)記用來說明所要定義的樣式；type=＂text/css＂說明這是一段CSS樣式表代碼；<!--與-->標(biāo)記的加入是為了防止一些不支持CSS的瀏覽器，將<style>與</style>之間的CSS代碼當(dāng)成普通的字符串顯示在網(wǎng)頁中。

5.1.3CSS樣式表引入方式3.嵌入樣式表基本語法：語法說明：

style屬性中的內(nèi)容就相當(dāng)于樣式表大括號(hào)里的內(nèi)容。需要指出的是，style屬性可以應(yīng)用于HTML文件中的body標(biāo)記，以及除了basefont、param和script之外的任意元素。插入CSS時(shí)需要注意優(yōu)先級(jí)問題，遵循以下兩個(gè)規(guī)律：

（1）行內(nèi)式>嵌入式>外部樣式；

（2）外部樣式中，出現(xiàn)在后面的優(yōu)先級(jí)高于出現(xiàn)在前面的優(yōu)先級(jí)。

CSS字體樣式設(shè)置25.2CSS字

體

樣

式

設(shè)

置設(shè)置字體——font-family基本語法：語法說明：

font-family屬性可以一次定義多個(gè)字體，而在瀏覽器讀取字體時(shí)，會(huì)按照定義的先后順序來決定選用哪種字體。若瀏覽器在計(jì)算機(jī)上找不到第一種字體，則自動(dòng)讀取第二種字體，若第二種字體也找不到，則自動(dòng)讀取第三種字體，這樣依次類推。如果定義的所有字體都找不見，則選用計(jì)算機(jī)系統(tǒng)的默認(rèn)字體。5.2CSS字

體

樣

式

設(shè)

置設(shè)置字體大小——font-size基本語法：語法說明：font-size屬性定義文字字體大小，下面介紹常用的度量單位如下：px(像素),最常用的單位是px(默認(rèn)單位)。與顯示器的分辨率相關(guān)。

分辨率越高，像素密度越大。通常這也意味著字體看上去會(huì)更??；em，常用在首行縮進(jìn)2個(gè)字符；

關(guān)鍵字，絕對(duì)大小。xx-small、x-small、small、medium、large、x-large、xx-large。分別代表極小、較小、小、中等、大、較大和極大；

百分比是基于父元素中字體的大小為參考值的；

絕對(duì)尺寸，可使用不同的單位包括in(英寸)、cm、mm、pt(點(diǎn))、pc(皮卡)；5.2CSS字

體

樣

式

設(shè)

置設(shè)置字體樣式——font-style基本語法：語法說明：font-style屬性設(shè)置文字的斜體效果，該屬性的取值如下表所示。5.2CSS字

體

樣

式

設(shè)

置設(shè)置字體加粗——font-weight基本語法：語法說明：

font-weight屬性定義文字加粗效果，該屬性的取值如下表所示。5.2CSS字

體

樣

式

設(shè)

置設(shè)置字體變體——font-variant基本語法：語法說明：

font-variant屬性設(shè)置為small-caps表示英文字體顯示為小型的大寫字母；normal表示正常的字體，默認(rèn)值就為這個(gè)字體。5.2CSS字

體

樣

式

設(shè)

置組合設(shè)置字體屬性——font基本語法：語法說明：

font屬性主要用作不同字體屬性的略寫，特別是可以定義行高；屬性與屬性之間一定要用空格間隔開。5.2CSS字

體

樣

式

設(shè)

置設(shè)置文字顏色——color基本語法：語法說明：

設(shè)置顏色的3種方法，此處不再贅述，詳見3.2.1節(jié)。文本精細(xì)排版3基本語法：語法說明：text-decoration屬性設(shè)置添加線，該屬性的取值如下表所示。5.3.1添

加

文

本

修

飾—text-decoration基本語法：語法說明：

text-align屬性設(shè)置文本對(duì)齊方式。其中，left代表左對(duì)齊方式；right代表右對(duì)齊方式；center代表居中對(duì)齊方式；justify代表兩端對(duì)齊方式。text-align屬性可應(yīng)用于HTML中的任何塊級(jí)標(biāo)記，如<p>，<h1>~<h6>等。5.3.2設(shè)

置

文

本

對(duì)

齊

方

式—text-align基本語法：語法說明：

text-indent屬性定義文本塊中首行文本的縮進(jìn)。這最常用于建立一個(gè)“標(biāo)簽頁”效果。長度包括長度值和長度單位，長度單位同樣可以使用之前提到的所有單位。百分比則是相對(duì)上一級(jí)元素的寬度而定的。允許指定負(fù)值。如果使用負(fù)值，那么首行會(huì)被縮進(jìn)到左邊，這會(huì)產(chǎn)生一種“懸掛縮進(jìn)”的效果。5.3.3設(shè)

置

文

本

縮

進(jìn)—text-indent基本語法：語法說明：

其中，normal為瀏覽器默認(rèn)的行高，一般由字體大小屬性來決定；數(shù)字，表示行高為該元素字體大小與該數(shù)字相乘的結(jié)果；長度，表示行高由長度值和長度單位確定；百分比：表示行高是該元素字體大小的百分比。5.3.4調(diào)

整

行

高—line-height基本語法：語法說明：

text-transform屬性用于轉(zhuǎn)換英文的大小寫。該屬性的取值如下表所示。5.3.5轉(zhuǎn)

換

英

文

大

小

寫—text-transform

背景設(shè)置4基本語法：語法說明：

關(guān)鍵字和RGB值的設(shè)置可以參考前面3.2.1章節(jié)介紹。transparent表示透明值，為默認(rèn)值。5.4.1設(shè)

置

背

景

顏

色—background-color基本語法：語法說明：

URL指定要插入的背景圖片路徑或名稱，路徑可以為絕對(duì)路徑也可以為相對(duì)路徑。圖片的格式一般以GIF、JPG和PNG格式為主。none值為默認(rèn)值表示不指定任何背景圖片。5.4.2插

入

背

景

圖

片—background-image基本語法：語法說明：

background-repeat屬性用于設(shè)置圖片平鋪效果。該屬性的取值如下表所示。5.4.3設(shè)

置

重

復(fù)

背

景

圖

片—background-repeat基本語法：語法說明：scroll表示背景圖片是隨著滾動(dòng)條的移動(dòng)而移動(dòng)，為默認(rèn)值；fixed表示背景圖片固定在頁面上不動(dòng)，不隨著滾動(dòng)條的移動(dòng)而移動(dòng)。5.4.4插

入

背

景

附

件—background-attachment基本語法：語法說明：

利用百分比和數(shù)值圖片位置時(shí)，需要指定兩個(gè)值，第一個(gè)代表水平位置，第二個(gè)代表垂直位置，兩個(gè)值之間用空格隔開。默認(rèn)值為“0%0%”或是“00”，表示此時(shí)背景圖片將被定位于對(duì)象內(nèi)容區(qū)域的左上角?！?00%100%”表示右下角。使用數(shù)值時(shí)允許使用負(fù)值。

關(guān)鍵字在水平方向的主要有l(wèi)eft、center、right，表示居左、居中和居右。表示垂直方向的關(guān)鍵字主要有top、center、bottom，表示頂端、居中和底端。其中水平方向和垂直方向的關(guān)鍵字可相互搭配使用。

另外，設(shè)置backgroun