我們來先來分析一下這個(gè)案例。

　　標(biāo)題容器左對齊，有固定的寬高。標(biāo)題文字白色，水平垂直居中。

　　正文共四個(gè)段落，每個(gè)段落都有固定的寬度，右側(cè)邊界對齊。

　　前三個(gè)段落首行空兩個(gè)字。每個(gè)段落里都有一段高亮的文本，有顏色和下劃線修飾，也有文本斜體和加粗效果。

　　段落中的一些文字還有顏色、加粗、下劃線以及傾斜等修飾效果。

　　第四個(gè)段落起始有個(gè)吉他圖標(biāo)，英文字體有外發(fā)光效果。

　　下面我們來制作這個(gè)網(wǎng)頁。

　　創(chuàng)建 007-css-case-1 文件夾，在文件里創(chuàng)建一個(gè) case-text-fonts.html 頁面文件和 case-1.css 樣式文件。

　　在 html 文件內(nèi)創(chuàng)建基礎(chǔ)代碼，在 head 標(biāo)簽內(nèi)部引入外部樣式 case-1.css。

　　首先來制作標(biāo)題。

　　添加一個(gè) h1 元素，填入標(biāo)題文本。

　　在編寫標(biāo)題樣式之前，假設(shè) UI 設(shè)計(jì)師給你的是一篇文章的圖片，你可能就犯難了，如何獲得標(biāo)題的寬高、背景顏色和文字大小呢?

　　大家打開電腦里的QQ，登錄進(jìn)去，Mac電腦按下鍵盤 Control + Command + A，Windows電腦按下ctrl+alt+a，圈選頁面標(biāo)題，點(diǎn)擊對號按鈕，完成截屏。

　　在瀏覽器中輸入 ps.gaoding.com，打開在線版 PS。點(diǎn)擊文件，新建，再點(diǎn)擊創(chuàng)建按鈕。最后，Control + V，將截屏的圖片粘貼過來。

　　應(yīng)用選框工具，發(fā)現(xiàn)標(biāo)題選區(qū)的寬度和高度分別為 200 和 50 像素，文字的大小為 24 像素。

　　應(yīng)用吸管工具，點(diǎn)擊標(biāo)題框吸取背景色，點(diǎn)擊前景色按鈕，得到十六進(jìn)制顏色值 #a52a2a。

　　有了這三個(gè)值，就可以定義標(biāo)題的樣式了。

　　h1 {

　　width: 200px;

　　height: 50px;

　　background-color: #a52a2a;

　　color: white;

　　line-height: 50px;

　　font-size: 24px;

　　text-align: center;

　　}

　　定義 h1 選擇器，聲明樣式 width: 200px，height: 50px，background-color: #a52a2a，color: white，font-size: 24px,text-align:center

　　在瀏覽器中查看頁面，標(biāo)題的效果基本上都實(shí)現(xiàn)了。接下來完成文本的垂直居中對齊。

　　可以通過給文本聲明 line-height 行高屬性，來間接實(shí)現(xiàn)文本的垂直居中，那行高的值設(shè)置為多少呢?根據(jù)前面學(xué)習(xí)的行高知識，將行高的值設(shè)置為 50px，也就是文本所在容器的高度。這樣，文本在容器中恰好就垂直居中了。

　　接下來制作四個(gè)段落。

　　在 HTML里添加四個(gè) p 元素，填入一些文本。下面給這些段落添加樣式。

　　p {

　　width: 500px;

　　text-indent: 2em;

　　text-align: justify;

　　word-spacing: 10px;

　　text-transform: capitalize;

　　line-height: 28px;

　　}

　　定義 p 選擇器，聲明樣式：width: 500px，讓每一個(gè)段落都有固定的寬度。text-indent: 2em，每個(gè)段首空兩格。text-align: justify，實(shí)現(xiàn)段落右側(cè)邊界對齊。給最后一段英文添加樣式：word-spacing: 10px，添加單詞間距。text-transform: capitalize，每個(gè)單詞首字母大寫。最后再添加 line-height: 28px，給段落設(shè)置一個(gè)行間距。

　　四個(gè)段落基本上制作完畢了。接下來裝飾個(gè)別段落和文字。

　　分別使用三個(gè) span 元素將這三部分文字包裹起來。給第一個(gè)和第三個(gè) span 元素定義 class 屬性，值為 mark1。(第一個(gè)段落里面的帶有下滑劃線區(qū)域,和第三個(gè)段落中的下劃線區(qū)域)

　　在CSS中定義 mark1 選擇器，聲明樣式 color: red，text-decoration-line: underline，text-decoration-style: double。

　　我們看，這兩部分文本被紅色、雙下劃線修飾了。

　　實(shí)際效果第三部分文本還帶有一個(gè)波浪線。需要再定義一個(gè)樣式覆蓋一下。

　　給這個(gè) span 的樣式類再添加一個(gè) mark2。

　　定義選擇器 mark2，聲明樣式 text-decoration-style: wavy。

　　效果實(shí)現(xiàn)了。

　　給第二個(gè) span 添加 class 屬性，值為 mark3。

　　定義選擇器 mark3，聲明樣式 color: orange。

　　第二部分文本變成了橙色。

　　案例還要求這兩部分文字為傾斜效果。使用 span 元素把他們包裹起來，定義 class 等于 mark4。

　　定義選擇器 mark4，聲明樣式 font-style: italic。

　　文本傾斜效果實(shí)現(xiàn)了。

　　實(shí)際上，千鋒全部學(xué)科的名稱和被特殊修飾的文本都有加粗效果，給全部學(xué)科再添加一個(gè) span元素包裹在外層。給所有需要加粗的 span 都添加 mark0 樣式類名。

　　定義選擇器 mark0，聲明樣式 font-weight: bold。

　　文本加粗效果實(shí)現(xiàn)了。

　　.mark0 {

　　font-weight:bold

　　}

　　.mark1 {

　　color: red;

　　text-decoration-line: underline;

　　text-decoration-style: double;

　　}

　　.mark2 {

　　text-decoration-style: wavy;

　　}

　　.mark3 {

　　color:orange;

　　}

　　.mark4 {

　　font-style: italic;

　　}

　　最后，給英文段落定義特殊字體并添加外發(fā)光的效果。

　　.p1 {

　　font-family: "Sofia", sans-serif;

　　text-indent: 0;

　　}

　　在 head 里添加引用谷歌字體的 css 鏈接，和自定義 icon 圖標(biāo)的 js 地址。

　　給英文的段落元素定義 class 屬性，值為 p1 font-effect-outline。

　　添加 p1 選擇器，聲明樣式：font-family: "Sofia", sans-serif。

　　字體效果實(shí)現(xiàn)了!在段首還有一個(gè) icon 圖標(biāo)。

　　如何查找自己心儀的圖標(biāo)呢?大家可以訪問 fontawesome 官網(wǎng)這個(gè)地址，海量圖標(biāo)就任你選擇了。guitar 就在這里。 (https://fontawesome.com/search?p=2&favorites=staff)

　　在段落頭部添加 i 元素，定義 class屬性，值為 fas fa-guitar。 (注意中間有空格)。

　　我們發(fā)現(xiàn)，真正使用這個(gè)圖標(biāo)時(shí)，樣式類的值，要求在官網(wǎng)查找到的圖標(biāo)名字前，加上 fa- (讀作：fa杠)，并且還需要添加 fas。

　　圖標(biāo)添加好了!實(shí)際的效果，最后一行沒有縮進(jìn)。

　　在 .p1 (注意這里有點(diǎn)) 選擇器里添加 text-indent: 0，來覆蓋 p 元素的樣式。

　　為什么能覆蓋呢?答對了，因?yàn)樽饔玫膬?yōu)先級—— class 選擇器要大于元素選擇器。

　　這樣，就取消了最后一行的段首縮進(jìn)!

上一篇

CSS填充屬性和CSS寬度與高度屬性

下一篇

CSS選擇器的權(quán)重如何判斷？