我們來先來分析一下這個案例。
標題容器左對齊，有固定的寬高。標題文字白色，水平垂直居中。
正文共四個段落，每個段落都有固定的寬度，右側邊界對齊。
前三個段落首行空兩個字。每個段落裡都有一段高亮的文本，有顏色和下劃線修飾，也有文本斜體和加粗效果。
段落中的一些文字還有顏色、加粗、下劃線以及傾斜等修飾效果。
第四個段落起始有個吉他圖標，英文字體有外發光效果。
下面我們來製作這個網頁。
創建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 { "Sofia", sans-serif; text-indent: 0;}在head 裡添加引用谷歌字體的css 鏈接，和自定義icon 圖標的js 地址。
<link rel="stylesheet " href="https://fonts.googleapis.com/css?family=Sofia&effect=outline">
<script src="https ://kit.fontawesome.com/772ccfd500.js" crossorigin="anonymous"></script>
給英文的段落元素定義class屬性，值為p1 font-effect-outline。
添加p1 選擇器，聲明樣式："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 選擇器要大於元素選擇器。
這樣，就取消了最後一行的段首縮進！
文章配套視頻鏈接：https://www.bilibili.com/video/BV1oU4y1278g?p=68
文章為用戶上傳，僅供非商業瀏覽。發布者：Lomu，轉轉請註明出處： https://www.daogebangong.com/zh-Hant/articles/detail/Zerobased%20teaching%20you%20to%20learn%20the%20front%20end%20%2067CSS%20text%20and%20font%20comprehensive%20case.html
支付宝扫一扫 
评论列表（196条）
测试