HTML5文字格式
CSS對一般網頁文字的設定有兩大類，字體(font)和文字(text)，以下簡單說明：
字體(font)
|
font-family 屬性是用來設定字體的類別。 |
範例呈現
|
<!DOCTYPE html> |
文字(text)
|
我們可以針對文字顏色作設定，color:blue(即為藍色)，也可以用#FFDDFF這種16進位色碼表示法 {color: red;} 文字書寫方向direction，可以決定文字呈現由左到右or相反!! {direction: LTR;} or direction: RTL;} 每行的空間高度(line-height)屬性 { line-height:30px; } or { line-height:150%;} 文字間隔(letter-spacing)屬性 {letter-spacing:10px;} or {letter-spacing:normal;} 文字對齊位置(Text Alignment)屬性 {text-align:center;} or {text-align:right;} or {text-align:justify;} |
範例呈現
| <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>css-text02</title> <style> .myfont1{ direction:LTR; color: #22FFFF; letter-spacing:15px; text-align:center; } .myfont2{ letter-spacing:100px; text-align:right; color: red; } .myfont3{ letter-spacing:normal; text-align:justify; color: #FF66FF; } .myfont4{ direction:RTL; } </style> </head> <body> <p class='myfont1'>CSS很有趣吧!看看字體變化</p> <p class='myfont2'>CSS很有趣吧!看看字體變化</p> <p class='myfont3'>HELLO CSS WORLD!</p> <p class='myfont4'>HELLO CSS WORLD!</p> </body> </html> |
<br>元素（換行）
在html文件輸入里，輸入的文件太長想換行，我們就可以使用<br>元素，例如下面這個例子：
未加上<br>元素 加上<br>元素
1）<!doctype html> |
2）<!doctype html><html> <head> <meta charset="utf-8"> <title>換行</title> </head> <body> <p>天命之謂性，率性之謂道，修道之謂教。<br> 道也者，不可須臾離也﹔可離，非道也。<br> 是故，君子戒慎乎其所不賭，恐懼乎其所不聞。<br> 莫見乎隱，莫顯乎微，故君子慎其獨也。</p> </body> </html> |
|---|
適當的文字格式不僅能發揮畫龍點睛的效果，還能增添網頁效果。常見的格式有粗體、斜體、加底線、大字型、上標、下標等，以下介紹常用的幾個格式。
|
<b></b>:粗體 <i></i>:斜體 <u></u>:加底線 <sub></sub>：下標 <sup></sup>：上標 <small></small>：小字型 <em></em>：強調斜體 <strong></strong>：強調粗體 <dfn></dfn>：定義文字 <code></code>：程式碼文字 <samp></samp>：範例文字 <kbd></kbd>:鍵盤文字 <var></var>:變數文字 <cite></cite>:引用文字 <abbr></abbr>:縮寫文字 <s></s>:刪除字 <q></q>:引用語 <mark></mark>:螢光標記文字 |
|---|
font-size補充（文字大小）
font-size屬性指定HTML元素的大小，其語法如下，設定值有長度、絕對大小、相對大小、百分比等四種指定方式。
長度的指定大小方式，ccs支援的參數如下，其中以px（像素）最常使用：
|
px----像素 pt----點，一點相當於1/72英吋 pc----1pica相當於1/6英吋 em----大寫英文字母M的寬度 ex----小寫英文字母x的高度 in----英吋 cm----釐米（公分） mm----毫米（公里） |
|---|
預設的絕對大小分別有這7等級：原則上這7級的大小以medium為準，每一級縮小或放大1.2倍
| CSS絕對大小預設值 | xx-small | x-small | small | medium | large | x-large | xx-large | ---- |
| HTML字型大小 | 1 | ---- | 2 | 3 | 4 | 5 | 6 | 7 |
相對大小指定的預設值分別為smaller和larger這兩個預設值，分別表示比目前文字大一級或小一級
百分比指定文字就是運用目前文字大小*百分比，例如，段落大小的指定大小為20px的75%=15px
下面例子，會示範不同文字大小：
|
<!doctype html> <html> <head> <meta charset="utf-8"> <title>示範文字大小</title> </head> <body> <p style="font-size:20px">生日快樂Happy Birthday</p> <p style="font-size:20pt">生日快樂Happy Birthday</p> <p style="font-size:1cm">生日快樂Happy Birthday</p> <p style="font-size:xx-small">生日快樂Happy Birthday</p> <p style="font-size:x-small">生日快樂Happy Birthday</p> <p style="font-size:small">生日快樂Happy Birthday</p> <p style="font-size:medium">生日快樂Happy Birthday</p> <p style="font-size:large">生日快樂Happy Birthday</p> <p style="font-size:x-large">生日快樂Happy Birthday</p> <p style="font-size:xx-large">生日快樂Happy Birthday</p> </body> </html> |
|---|
其他功能：<ruby>、<rt>、<rp>元素（拼音或注音）
<ruby>元素用來包住字串及其注音或拼音；
<rt>是ruby text的簡寫，是<ruby>的子元素,用來包住注音或拼音。
<rp>是ruby parenthese的簡寫，也是<ruby>的子元素，用來當瀏覽器不支持<ruby>時就會顯示<rp>裡的括號；反之，瀏覽器顯示<ruby>時，就不會顯示<rp>的括號。
<!doctype html>
|
|---|
