黑客手把手教你黑赌博

書名： HTML5+CSS3+jQuery Mobile APP與移動網站設計從入門到精通
作者名：新視角文化行
本章字數： 2624字
更新時間： 2019-10-23 16:45:10

2.1 設置文字效果

設計網頁離不開字體的設置，恰當的字體運用能夠豐富網頁的內容，美化文字的視覺效果。本節從文字的細節修飾著手，使讀者輕松把握HTML的各種字體格式的變化，制作出更加精美的網頁。

2.1.1 文字樣式標簽

標簽可以用來設置文字的顏色、字體和大小，是網頁設計的常用標簽。可以通過標簽中的face屬性設置不同的字體，可以通過標簽中的size屬性來設置文字的字體大小，還可以通過標簽中的color屬性來設置文字的顏色。

1. 設置字體

face屬性規定的是字體的名稱，如中文字體的“宋體”“楷體”和“微軟雅黑”等。可以通過字體的face屬性設置不同的字體，設置的字體效果必須在瀏覽器中安裝相應的字體才可以正確瀏覽，否則有些特殊字體會被瀏覽器中的普通字體所代替。

設置字體的基本語法如下。

<font face="字體名稱">……</font>

face屬性用于設置文本所采用的字體。如果瀏覽器能夠在當前系統中找到該字體，則使用所設置的字體顯示，如果在當前系統中找不到該字體，則會使用默認的字體顯示文字。

如下面的HTML網頁代碼，分別為文字設置不同的字體。

…
<body>
字體為宋體：<font face="宋體">歡迎光臨我們的網站</font><br>
字體為楷體：<font face="楷體">歡迎光臨我們的網站</font><br>
字體為黑體：<font face="黑體">歡迎光臨我們的網站</font><br>
</body>
…

2. 設置字體大小

文字的大小也是字體的重要屬性之一。除了使用標題文字標簽設置固定大小的字號外，HTML語言還提供了用標簽的size屬性來設置普通文字的字號的方法。

設置文字大小的基本語法如下。

<font size="文字大小">……</font>

size的屬性值為1~7，默認值為3，也可以在屬性值之前加上+或-字符，來指定相對于初始值的增量或減量。文字的字號可以設置為1~7，也可以是+1~+7或者-1~-7。這些字號并沒有固定的大小值，而是相對于默認文字大小來設定的，默認文字的大小與3號字相同，數值越大，文字也越大。

如下面的HTML網頁代碼，分別為文字設置不同的字體大小。

…
<body>
size為1：<font size="1">網頁設計</font><br>
size為2：<font size="2">網頁設計</font><br>
size為3：<font size="3">網頁設計</font><br>
size為4：<font size="4">網頁設計</font><br>
size為5：<font size="5">網頁設計</font><br>
size為6：<font size="6">網頁設計</font><br>
size為7：<font size="7">網頁設計</font><br>
</body>
…

3. 設置文字顏色

在HTML頁面中，可以設置字體的不同顏色，使頁面看起來更加的豐富多彩，吸引瀏覽者的注意。

設置字體顏色的基本語法如下。

<font color="顏色值">……</font>

color屬性的顏色值可以用瀏覽器能夠識別的顏色名稱或十六進制顏色值表示。

如下面的HTML網頁代碼，分別使用顏色名稱和十六進制顏色值設置文字顏色。

…
<body>
紅色文字：<font color="red">網頁設計</font><br>
藍色文字：<font color="#0000FF"> 網頁設計</font><br>
</body>
…

實戰使用標簽設置網頁文字效果

最終文件：最終文件\第2章\2-1-1.html　視頻：視頻\第2章\2-1-1.mp4

01 執行“文件>打開”命令，打開頁面“源文件\第2章\2-1-1.html”，效果如圖2-1所示，切換到代碼視圖中，可以看到相應的HTML代碼，如圖2-2所示。

圖2-1　打開頁面

圖2-2　網頁HTML代碼

02 為頁面中相應的文字添加標簽，并在該標簽中添加相應的屬性設置，如圖2-3所示。保存頁面，在瀏覽器中預覽頁面，可以看到設置后文字的效果，如圖2-4所示。

圖2-3　設置文字的基本屬性

圖2-4　預覽文字效果

技巧

設置網頁的文字顏色時一定要注意文字顏色的清晰和鮮明，并且與網頁的背景色相搭配，從而提高網頁文字的可讀性和網頁的整體美觀程度。

03 返回網頁的HTML代碼中，使用相同的方法為其他相應的文字添加標簽，進行相關設置，如圖2-5所示。保存頁面，在瀏覽器中預覽頁面，可以看到設置后文字的效果，如圖2-6所示。

圖2-5　設置文字的基本屬性

圖2-6　預覽文字效果

提示

在網頁中通過標簽設置字體時，可以將字體設置為任意的字體，但是所設置的字體必須在瀏覽該網頁的電腦中也安裝才能正確顯示，如果電腦中沒有安裝的特殊字體會被瀏覽器中的普通字體所替代。目前，在操作系統中默認安裝的中文字體有宋體、黑色、幼圓和微軟雅黑等。

2.1.2 文字加粗和標簽

網頁中對于需要強調的內容很多時候使用了加粗的方法，以使文字更加醒目。可以實現加粗效果的標簽是標簽和標簽，其中標簽被稱為特別強調標簽，目前比標簽使用更加頻繁。

加粗文字和標簽的基本語法格式舉例如下。

<b>這是粗體字</b>
<strong>這也是粗體字</strong>

在和之間的文字或在和之間的文字，瀏覽器中都會以粗體顯示。

提示

粗體文字標簽和都是需要添加結束標簽的，如果沒有結束標簽，則瀏覽器會認為從或標簽開始的所有文字都是粗體。

2.1.3 文字傾斜和標簽

標簽能夠使作用范圍內的文字傾斜；是強調標簽，它的效果也是使文字傾斜，目前比標簽使用更加頻繁。

傾斜文字標簽和的基本語法格式舉例如下。

<i>斜體文字</i>
<em>斜體文字</em>

2.1.4 文字下劃線標簽

標簽的使用和粗體、斜體標簽類似，可以使用該標簽作用于需要添加下劃線的文字。標簽的基本語法格式舉例如下。

<u>添加了一條下劃線</u>

技巧

在網頁中除了可以使用標簽實現文字的下劃線效果，還可以通過CSS樣式中的text-decoration屬性，設置該屬性值為underline，為網頁中需要實現下劃線的文字應用相應的CSS樣式，同樣可以實現下劃線的效果。

實戰為文字添加加粗、傾斜和下劃線修飾

最終文件：最終文件\第2章\2-1-4.html　視頻：視頻\第2章\2-1-4.mp4

01 執行“文件>打開”命令，打開頁面“源文件\第2章\2-1-4.html”，效果如圖2-7所示，切換到代碼視圖中，可以看到相應的HTML代碼，如圖2-8所示。

圖2-7　打開頁面

圖2-8　網頁HTML代碼

02 為頁面中相應的文字添加加粗文字標簽，如圖2-9所示。保存頁面，在瀏覽器中預覽頁面，可以看到文字加粗顯示的效果，如圖2-10所示。

圖2-9　為文字添加加粗標簽

圖2-10　預覽文字加粗效果

03 返回網頁HTML代碼中，為頁面中相應的文字添加文字傾斜標簽，如圖2-11所示。保存頁面，在瀏覽器中預覽頁面，可以看到文字傾斜顯示的效果，如圖2-12所示。

圖2-11　為文字添加傾斜標簽

圖2-12　預覽文字傾斜效果

04 返回網頁HTML代碼中，為頁面中相應的文字添加下劃線標簽，如圖2-13所示。保存頁面，在瀏覽器中預覽頁面，可以看到文字添加下劃線的效果，如圖2-14所示。

圖2-13　為文字添加下劃線標簽

圖2-14　預覽文字下劃線效果

2.1.5 其他文字修飾標簽

為了滿足不同需求，HTML還有其他用來修飾文字的標簽，比較常用的有上標格式標簽、下標格式標簽和刪除線標簽<strike>等。

為上標格式標簽，多用于數學指數的表示，如某個數的平方或者立方。為下標格式標簽，多用于注釋及數學的底數表示。<strike></strike>為刪除線標簽，多用于刪除效果。

實戰為文字添加上標和刪除線

最終文件：最終文件\第2章\2-1-5.html　視頻：視頻\第2章\2-1-5.mp4

01 執行“文件>打開”命令，打開頁面“源文件\第2章\21-5.html”，效果如圖2-15所示，切換到代碼視圖中，可以看到相應的HTML代碼，如圖2-16所示。

圖2-15　打開頁面

圖2-16　網頁HTML代碼

02 為頁面中相應的文字添加上標格式標簽，從而實現上標的效果，如圖2-17所示。保存頁面，在瀏覽器中預覽頁面，可以看到所實現的上標效果，如圖2-18所示。

圖2-17　為文字添加上標標簽

圖2-18　預覽文字上標效果

03 返回網頁HTML代碼中，為頁面中相應的文字添加刪除線<strike>標簽，如圖2-19所示。保存頁面，在瀏覽器中預覽頁面，可以看到為文字添加刪除線的效果，如圖2-20所示。

圖2-19　為文字添加刪除線標簽

圖2-20　預覽文字刪除線效果

官术网_书友最值得收藏!

2.1 設置文字效果

2.1.1 文字樣式<font>標簽

2.1.2 文字加粗<b>和<strong>標簽

2.1.3 文字傾斜<i>和<em>標簽

2.1.4 文字下劃線<u>標簽

2.1.5 其他文字修飾標簽

官术网_书友最值得收藏!

HTML5+CSS3+jQuery Mobile APP與移動網站設計從入門到精通

2.1 設置文字效果

2.1.1 文字樣式<font>標簽

2.1.2 文字加粗<b>和<strong>標簽

2.1.3 文字傾斜<i>和<em>標簽

2.1.4 文字下劃線<u>標簽

2.1.5 其他文字修飾標簽