讓網頁中的字型美起來

來源:互聯網
上載者:User
網頁   

你可能正建立自己在網上的家-WEB頁,又或者它已經被你安置在網路某一角裡。無論出於什麼目的,你都希望有更多的指導,告訴你該如何更好的布置家。  

在目前許多的指導中,他們都在訴說,應該加一點聲音或者一個說話的場地。的確我們都需要它,但我希望關心更多WEB家裡底層的東西,比如如何把字型弄的漂亮些,或者讓頁面顏色變的活潑些,讓訪問者增加“看欲”,還有更多你曾經都沒有關注的細微之處。今天,我們首先來探討頁面的字型。  

一.HTML中定義字型   

字型的確是很好打交道的,一開始製作頁面,它就以預設的樣式顯示。隨著逐步的深入,你會改變一下預設的設定,增大或者減小字型。  

一般字型預設的標籤格式:<p>網頁教學網</p>   

接下來,我們把字型設定為黑體或者宋體字樣式,它的標籤如下:  

<p><font face="黑體">網頁教學網</font></p>   

在以上格式裡,我們引出了字型的標籤元素<font></font>.該標籤具有下面三個屬性值:  

size="..." 設定字型的大小,一般從1到7,它的預設值是+3,每次改變字型都是+3或者-3。  

color="..." 字型顏色的設定。定義顏色可以利用RGB的16進位值,比如: color=“#ffffff” 。也可以直接利用顏色英文來定義,比如: color=“white”   

face="..." 字型樣式的設定,比如:face=“黑體”。或者 face=“黑體,宋體”。後者的格式,每當瀏覽器訪問第一種字型失敗後,瀏覽器就會訪問第二種字型,依此類推。  

下面是一個完整的字型格式:  

<font face="黑體" size="2" color="#FFFFFF">網頁教學網</font>   

HTML還提供了以下字型樣式標籤:  

1.六個標題樣式   

從h1到h6,如:<h1><font face="黑體" size="2">網頁教學網</font></h1>   

2.字型風格   

斜體字:<em>網頁教學網</em>   

粗體字:<strong>網頁教學網</strong>   

斜體+粗體字:<strong><em>網頁教學網</em></strong>   

3.定義文本   

定義大字型  

<big>網頁教學網</big>,如果還想增大字型可以採用,<big><big><big>網頁教學網</big></big></big>   

定義小字型
<small>網頁教學網</small>或者<small><small><small>網頁教學網</small></small></small>   

如果你在字型標籤中設定了size="...",那麼<big>標籤將不起作用。

  除了以上常用字型標籤元素外,HTML還包含很多其它標籤,但不我們不多用。

  二.CSS(層疊樣式表)改變字型   

在過去頁面上的字型是一成不變的,靜靜的呆在那。當DHTML(動態網頁)出現後,我們能有更多方式控制字型了。一般來說,動態字型的實現核心是CSS(層疊樣式表)加JavaScript。使用了以上兩項技術後,字型就能產生許多變化。  

1.CSS定義字型的標籤元素   

font-family: 設定字型字族。  

<span style="font-family: 黑體, 宋體(GB)">網頁教學網</span>   

font-sytle:設定字型類型。  

<span style="font-style: normal">網頁教學網</span>   

font-weight:設定字型的字重。  

<span style="font-weight: bold">網頁教學網</span>   

font-size:設定字型大小。  

<span style="font-size: 14pt">網頁教學網</span>   

font-decoration:修飾文本字型,比如帶底線“underline”。  

<span style="text-decoration: underline">網頁教學網</span>   

對於以上的字型設定,我們可以採用一個方便的方法:  

<span style="font:normal bold 14pt 黑體">網頁教學網</span>   

在style定義的次序是:font-style,font-weight,font-size,font-family.   

2.CSS定義字型和<font>定義字型的衝突   

對於CSS定義字型和<font>定義字型,我們都要注意以下問題,比如有以下字型設定:
<span style="font-family: 宋體(KSC); font-size: 200pt"><font>網頁教學網</font></span>   

這時侯字型大小將以font-size: 200pt的定義來設定。但如果你在<font>中加入size屬性,比如:  

<span style="font-family: 宋體(KSC); font-size: 200pt"><font size="5">網頁教學網</font></span>   

這時侯,字型的大小以size的設定為準,font-size: 200pt將不起作用。其它的屬性也是一樣。如果你無需動態字型,就利用HTML4.0的<font>來定義字型,需要動態字型時,就需要使用CSS和JavaScritp來定義字型及引發事件。  

3.定義CSS字型屬性類   

一般我們在製作動態字型時,我們會首先利用CSS定義出頁面字型的整個屬性,然後在頁面中引用,而不用對每段文本進行設定,這也是實現動態字型首先一步。
<html>
<head>
<style type="text/css">
.tt2 { font-family:"黑體"; font-size: 16px; font-style: normal; line-height: 17px }
</style>
</head>
<body>
<p class="tt2">網頁教學網</p>
</body>
</html>
在以上代碼中,“網頁教學網”兩個字引用了.main_2類定義的字型樣式。當然你可以在<style></style>中定義不同的字型樣式,以便頁面中根據不同字型加以引用。比如:
<html>
<head>
<style type="text/css">
.tt1 { font-family:"宋體"; font-size: 15px; font-style: normal; }
.tt2 { font-family:"黑體"; font-size: 16px; font-style: normal; }
</style>
</head>
<body>
<p class="tt1">網頁教學網</p>
<p class="tt2">網頁教學網</p>
</body>
</html>
對於CSS(層疊樣式表)的更多介紹,請參看本站的教程下載欄目,下載之後好好去研究吧  

三.讓字型動起來   

要讓字型動起來,我們可以利用本身CSS的事件或者讓JavaScript引發事件。  

1.CSS引發事件   

例一
<html>
<head>
<style type="text/css">
</style>
</head>
<body>
<p><a href="http://www.webjx.com/">網頁教學網</a></p>
</body>
</html>
link定義的是連結在頁面顯示的顏色(黑色)及連結沒有底線,visited定義的是單擊連結後的顏色(白色),hover定義的是指向連結時的動態顏色。以上執行個體表示,當指向連結“網頁教學網”後字型顏色從黑色變成藍色,並加底線,單擊連結後,連結顏色變成白色。

例二
<html>
<head>
<title></title>
</head>
<body>
<p >網頁教學網 </p>
</body>
</html>
以上執行個體是利用內聯改變字型樣式,當滑鼠指向“網頁教學網”時字型因為定義了this.style.fontSize=200,這兩個字放大至200pt,當滑鼠移開“網頁教學網”時,因定義了this.style.fontSize=100,這兩個字型縮小到100pt.

2.JavaScript引發事件。

<html>
<head>
<style>
H1.italic {font-style:italic}
H1.bold {font-style:bold; }
</style>
</head>
<body>
<script language="JavaScript">
function changeHead() {
if (H1_1.className=="bold") {
H1_1.className="italic" }
else {
H1_1.className="bold";}
}
</script>
<h1 id="H1_1" class="bold" >網頁教學網 </h1>
</body>
</html>   

在上面的執行個體當中,我們首先定義了兩個CSS類H1.italic和H1.bold,然後利用JavaScript指令碼定義函數 changeHead(),最後在需要的地方引發事件執行定義好的函數。這裡我們引發了兩個單擊事件onmouseover和onmouseout。在這裡我還要說一點,因為你定義了H1兩個類H1.italic 和H1.bold,所以當你在引用時,要首先設定class="bold",表示字型以bold樣式出現。然後,移動滑鼠到“網頁教學網”上,觸發了事件一,移開“網頁教學網”時,觸發了事件二。

對於動態字型,我們還有很多方法來完善它。只是在考慮利用動態字型時,需要瞭解不同瀏覽器會產生不一樣的結果。這時侯,就需要不停測試,來找到一個兩全其美的方法。最後,希望你在看完這篇文章後,找一點CSS及JavaScript的資料來看,因為它們才是實現所有“夢想”的工具。



相關文章

Beyond APAC's No.1 Cloud

19.6% IaaS Market Share in Asia Pacific - Gartner IT Service report, 2018

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。