HTML5+CSS3 Web前端設(shè)計(jì)基礎(chǔ)教程 第3版 課件 第4章 實(shí)現(xiàn)Web前端排版的基本美化

第4章本章主要從文本控制、圖像控制、超鏈接應(yīng)用、表格控制等多個(gè)方向，向讀者介紹在工作中經(jīng)常遇到的排版問題。實(shí)現(xiàn)Web前端排版的基本美化4.1控制文本4.1控制文本（1）插入特殊字符（2）批量替換和查找圖4-2“查找和替換”面板4.1控制文本4.1.1CSS中字體屬性與文本屬性介紹表4-1CSS中常用的“字體”屬性CSS字體屬性解

釋font該屬性是簡(jiǎn)寫屬性，其作用在于將所有針對(duì)字體的屬性設(shè)置在一個(gè)聲明中。font-family設(shè)置網(wǎng)頁使用字體的類別。font-size設(shè)置文本的字體大小。font-weight設(shè)置字體的粗細(xì)，包含100～900等多個(gè)級(jí)別。font-style設(shè)置文本的字體樣式。font-variant設(shè)置文本為小型大寫字母的外形。font-stretch（CSS3新增）設(shè)置或檢索對(duì)象中的文字是否橫向拉伸變形。font-size-adjust（CSS3新增）設(shè)置或檢索小寫字母x的高度與對(duì)象文字字號(hào)的比率。4.1控制文本表4-2CSS中常用的“文本”屬性CSS文本屬性解

釋text-transform設(shè)置對(duì)象中的文本的大小寫。word-wrap（CSS3新增）設(shè)置當(dāng)前行超過指定容器的邊界時(shí)是否斷開換行。overflow-wrap（CSS3新增）設(shè)置當(dāng)內(nèi)容超過指定容器的邊界時(shí)是否斷行。white-space設(shè)置對(duì)象內(nèi)空格的處理方式。word-break（CSS3新增）設(shè)置對(duì)象內(nèi)文本的字內(nèi)換行行為。text-align（CSS3更新）設(shè)置文本的水平對(duì)齊方式。text-justify（CSS3新增）設(shè)置對(duì)象內(nèi)調(diào)整文本使用的對(duì)齊方式。text-indent（CSS3更新）設(shè)置文本塊首行的縮進(jìn)（段落設(shè)置中經(jīng)常使用）。line-height設(shè)置行高。text-overflow設(shè)置文本溢出時(shí)的事件。text-decoration（CSS3更新）設(shè)置添加到文本的裝飾效果（超鏈接設(shè)置中經(jīng)常使用）。text-shadow（CSS3新增）設(shè)置文本的陰影。4.1控制文本1．font-family（字體類型）2．font-size（字號(hào)大小）3．font-style（字體風(fēng)格）標(biāo)題設(shè)置固定字號(hào)，字體風(fēng)格為斜體此行設(shè)置為“宋體”此行設(shè)置為“華文彩云”此行設(shè)置為“黑體”，字號(hào)大小為父級(jí)的80%此行設(shè)置為“文鼎pop”，由于系統(tǒng)本機(jī)未安裝該字體，由默認(rèn)字體進(jìn)行渲染此行設(shè)置為“微軟雅黑”圖4-3字體類型、字號(hào)和風(fēng)格預(yù)覽效果4.1控制文本4．font-weight（字體粗細(xì)）5．font-size-adjust（字體適合尺寸）

相同的字號(hào)，但外觀顯示差異較大通過調(diào)整使其外觀差異變小圖4-4font-weight與font-size-adjust預(yù)覽效果6．font-stretch（字體拉伸）4.1控制文本4.1.2在線字體與@font-face1．什么是在線字體

WebFont又稱之為在線字體，主要是把自定義的特殊字體嵌入到網(wǎng)頁中，無需安裝，無需下載，直接在線使用。2．@font-face語法圖4-5font-face預(yù)覽效果4.1控制文本4.1.3文本的首行縮進(jìn)、行高和陰影1．text-indent（文本縮進(jìn)）p{text-indent:24px;}/*由于是固定值，故不能根據(jù)字體大小變化準(zhǔn)確地縮進(jìn)兩個(gè)漢字距離*/p{text-indent:2em;}/*由于是相對(duì)值，故能夠根據(jù)字體大小變化自動(dòng)縮進(jìn)兩個(gè)漢字距離*/2．line-height（行高）4.1控制文本3．text-shadow（文本陰影）圖4-6text-indent、line-height和text-shadow預(yù)覽效果此處對(duì)h1元素設(shè)置了高度，要想讓其中的文字垂直居中，通常將line-height的值設(shè)置為height的值，即兩者的值相同。由于使用了絕對(duì)值進(jìn)行縮進(jìn)，不能自動(dòng)適應(yīng)字體大小的變化。由于使用了相對(duì)值進(jìn)行縮進(jìn)，無論父級(jí)元素字體如何變化，這里總能精確縮進(jìn)2個(gè)漢字的距離除了使用line-height，還可以使用padding將文字設(shè)置為垂直居中，具體修改內(nèi)容如下：h1{

height:80px;padding:20px000;}4.1控制文本4.1.4文本溢出處理1．text-overflow（文本溢出）2．overflow（溢出）3．white-space（處理空格）此處文本溢出，文字折返到下一行此列表項(xiàng)內(nèi)容超出了容器設(shè)置的范圍，出現(xiàn)了省略標(biāo)記圖4-7文本溢出處理預(yù)覽效果4.2控制超鏈接4.2.1文本鏈接、郵件鏈接與錨鏈接4.2.2CSS偽類與超鏈接1．什么是CSS偽類

偽類的語法形式為：選擇符：偽類{屬性:屬性值;}偽

類解

釋:link、:visited、:hover、:active設(shè)置超鏈接被訪問前后的4個(gè)狀態(tài)樣式。:focus設(shè)置對(duì)象在成為輸入焦點(diǎn)時(shí)的樣式。:not(s)（CSS3新增）匹配不含有s選擇符的元素。:root（CSS3新增）匹配某一個(gè)元素在文檔的根元素。:first-child匹配父元素的第一個(gè)子元素。:last-child（CSS3新增）匹配父元素的最后一個(gè)子元素。:nth-child(n)（CSS3新增）匹配父元素的第n個(gè)子元素E，假設(shè)該子元素不是E，則選擇符無效。表4-3常見的偽類及其含義4.2控制超鏈接2．CSS偽類在超鏈接方面的應(yīng)用超鏈接初始效果設(shè)置為，清除下劃線，增加左側(cè)無色背景圖進(jìn)行美化圖4-13偽類在超鏈接方面的應(yīng)用鼠標(biāo)懸停后，出現(xiàn)綠色圖標(biāo)，字體變?yōu)榧t色，并有下劃線出現(xiàn)4.3控制圖像和顏色4.3.1CSS中控制圖像和顏色的基本屬性屬

性解

釋background（CSS3更新）簡(jiǎn)寫屬性，作用是將背景屬性設(shè)置在一個(gè)聲明中。background-repeat（CSS3更新）設(shè)置背景圖像是否重復(fù)，以及如何重復(fù)。background-color設(shè)置元素的背景顏色。background-image（CSS3更新）將圖像設(shè)置為背景。background-position（CSS3更新）圖像定位，用于設(shè)置背景圖像的起始位置。background-attachment（CSS3更新）用于設(shè)置背景圖像是否固定或者隨著頁面的其余部分滾動(dòng)。background-size（CSS3新增）定義背景圖片的大小。background-origin（CSS3新增）指定背景圖的顯示區(qū)域。background-clip（CSS3新增）設(shè)置對(duì)象的背景向外裁剪的區(qū)域。表4-4CSS中用于控制圖像的屬性4.3控制圖像和顏色1．background-color2．background-image3．background-repeat4．background-attachment5．background設(shè)置背景顏色設(shè)置背景圖，括號(hào)內(nèi)為圖像路徑設(shè)置圖像是否平鋪，如果不設(shè)置則全屏平鋪水平方向，距左多少像素的距離垂直方向，距頂多少像素的距離設(shè)置背景圖像是固定還是滾動(dòng)圖4-14background屬性簡(jiǎn)寫示意圖4.3控制圖像和顏色圖4-15背景色、背景圖預(yù)覽效果此處圖片通過橫向平鋪實(shí)現(xiàn)效果。此外，同時(shí)設(shè)置圖像高度，如果不設(shè)置，div元素內(nèi)又沒有內(nèi)容將容器撐起來，將無法顯示背景圖片此處圖片設(shè)置了跟隨滾動(dòng)條滾動(dòng)的效果，即便不設(shè)置，瀏覽器默認(rèn)狀態(tài)就是滾動(dòng)效果此處為box容器同時(shí)設(shè)置背景圖和背景色此處設(shè)置的圖像位置為水平方