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

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

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

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

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

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

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

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

類解

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

性解

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