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

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

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

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

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

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

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

建立 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，圈選頁面標題，點選對號按鈕，完成截圖。

在瀏覽器中輸入 http:// 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文字與字型綜合案例

相關文章