零基礎學前端之CSS文字與字型綜合案例

千鋒IT教育發表於2023-02-02

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

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

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

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

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

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

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

建立 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 地址。

<link rel="stylesheet" href=" fonts.googleapis.com/cs ">

<script src=" kit.fontawesome.com/772 " crossorigin="anonymous"></script>

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

新增 p1 選擇器,宣告樣式:font-family: "Sofia", sans-serif。

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

如何查詢自己心儀的圖示呢?大家可以訪問 fontawesome 官網這個地址,海量圖示就任你選擇了。guitar 就在這裡。 ( fontawesome.com/search?

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

我們發現,真正使用這個圖示時,樣式類的值,要求在官網查詢到的圖示名字前,加上 fa- (讀作:fa槓),並且還需要新增 fas。

圖示新增好了!實際的效果,最後一行沒有縮排。

在 .p1 (注意這裡有點) 選擇器裡新增 text-indent: 0,來覆蓋 p 元素的樣式。

為什麼能覆蓋呢?答對了,因為作用的優先順序—— class 選擇器要大於元素選擇器。

這樣,就取消了最後一行的段首縮排!


來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/70023145/viewspace-2933795/,如需轉載,請註明出處,否則將追究法律責任。

相關文章