DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS基礎知識 >> 4.8 字母間距letter-spacing和詞間距word-spacing
4.8 字母間距letter-spacing和詞間距word-spacing
編輯:CSS基礎知識     

CSS使用letter-spacing屬性定義字間距,使用word-spacing屬性定義詞間距。這兩個屬性取值單位都是像素。

一、letter-spacing屬性

語法:

letter-spacing:像素值;

說明:

在CSS入門教程中,我們都是采用像素做單位。

舉例:

在線測試
 
<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>letter-spacing屬性</title>
    <style type="text/css">
        #p1{letter-spacing:0px;}
        #p2{letter-spacing:3px;}
        #p3{letter-spacing:5px;}
    </style>
</head>
<body>
    <p id="p1">Rome was't built in a day.羅馬不是一天建成的。</p><hr/>
    <p id="p2">Rome was't built in a day.羅馬不是一天建成的。</p><hr/>
    <p id="p3">Rome was't built in a day.羅馬不是一天建成的。</p>
</body>
</html>

在浏覽器預覽效果如下:

分析:

letter-spacing控制的是字間距,每一個中文文字作為一個“字”,而每一個英文字母也作為一個“字”!大家要細心留意一下。

默認情況下,letter-spacing我們幾乎都用不上,我們直接采用浏覽器默認樣式就可以了。大家完全可以忽略掉這個屬性。

二、word-spacing屬性

語法:

word-spacing:像素值;

說明:

在CSS初學者階段,我們都是采用像素做單位。

舉例:

在線測試
 
<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>word-spacing屬性</title>
    <style type="text/css">
        #p1{word-spacing:0px;}
        #p2{word-spacing:3px;}
        #p3{word-spacing:5px;}
    </style>
</head>
<body>
    <p id="p1">Rome was't built in a day.羅馬不是一天建成的。</p><hr/>
    <p id="p2">Rome was't built in a day.羅馬不是一天建成的。</p><hr/>
    <p id="p3">Rome was't built in a day.羅馬不是一天建成的。</p>
</body>
</html>

在浏覽器預覽效果如下:

分析:

定義詞間距,以空格為基准進行調節,如果多個單詞被連在一起,則被word-spacing視為一個單詞;如果漢字被空格分隔,則分隔的多個漢字就被視為不同的單詞,word-spacing屬性此時有效。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved