我們來先來分析一下這個案例。

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

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

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

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

　　第四個段落起始有個吉他圖標，英文字體有外發光效果。

　　下面我們來制作這個網頁。

　　創建 007-css-case-1 文件夾，在文件里創建一個 case-text-fonts.html 頁面文件和 case-1.css 樣式文件。

　　在 html 文件內創建基礎代碼，在 head 標簽內部引入外部樣式 case-1.css。

　　首先來制作標題。

　　添加一個 h1 元素，填入標題文本。

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

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

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

　　應用選框工具，發現標題選區的寬度和高度分別為 200 和 50 像素，文字的大小為 24 像素。

　　應用吸管工具，點擊標題框吸取背景色，點擊前景色按鈕，得到十六進制顏色值 #a52a2a。

　　有了這三個值，就可以定義標題的樣式了。

　　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

　　在瀏覽器中查看頁面，標題的效果基本上都實現了。接下來完成文本的垂直居中對齊。

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

　　接下來制作四個段落。

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

　　p {

　　width: 500px;

　　text-indent: 2em;

　　text-align: justify;

　　word-spacing: 10px;

　　text-transform: capitalize;

　　line-height: 28px;

　　}

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

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

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

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

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

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

　　給這個 span 的樣式類再添加一個 mark2。

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

　　效果實現了。

　　給第二個 span 添加 class 屬性，值為 mark3。

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

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

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

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

　　文本傾斜效果實現了。

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

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

　　文本加粗效果實現了。

　　.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;

　　}

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

　　.p1 {

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

　　text-indent: 0;

　　}

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

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

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

　　字體效果實現了!在段首還有一個 icon 圖標。

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

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

　　我們發現，真正使用這個圖標時，樣式類的值，要求在官網查找到的圖標名字前，加上 fa- (讀作：fa杠)，并且還需要添加 fas。

　　圖標添加好了!實際的效果，最后一行沒有縮進。

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

　　為什么能覆蓋呢?答對了，因為作用的優先級—— class 選擇器要大于元素選擇器。

　　這樣，就取消了最后一行的段首縮進!

上一篇

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

下一篇

CSS選擇器的權重如何判斷？