序
看過了之前的背景應用。CSS 是否有在您心中留下一些好感呢?現在我們就進入
這次的第二個主題: CSS 在文字與段落的應用!其實,這樣的編排教學方式我自
己也很困惑。因為這和國外或是本土 有關CSS的文章編排有很大的出入。或許各
位專家會覺得我說的沒頭沒尾的,但是我覺得先將基本語 法介紹給大家知道再來
敘述一些高階應用或是CSS的基本理念會是比較引人入勝的方法。畢竟大家都 想
要了解究竟CSS能帶給大家什麼好處。廢話不多說,讓我們先來看看這次要學習的
語法吧!
1.FONT-FAMILY------字型家族 8.LINE-HEIGHT------行距
2.FONT-STYLE-------字型樣式 9.TEXT-DECORATION--文字修飾
3.FONT-SIZE--------文字大小 10.TEXT-TRANSFORM---文字轉換
4.FONT-WEIGHT------文字粗細 11.TEXT-ALIGN-------文字對齊
5.TEXT-INDENT------首行內縮 12.COLOR------------色彩
6.WORD-SPACING-----文字字距 13.MARGIN-LEFT------向左縮排
7.LETTER-SPACING---字母間距 14.MARGIN-RIGHT-----向右縮排
FONT-FAMILY------字型家族
為什麼我會翻譯成字型家族呢?因為這個元件裡可以包含許多的字型,瀏覽器根
據所定義的字型 去搜尋字體。如果所列的字型都搜尋不到,則使用瀏覽器內定的
字型。語法如下:
Font-Family:新細明體,標楷體,細明體.....
FONT-STYLE-------字型樣式
字型樣式和之前的 HTML 是一樣的,分為一般和斜體。各位一定很奇怪那粗體呢
?粗體就是第4點 要提的,所以別急,讓我們一個一個看下去。字型樣式的語法
是
Font-Style:normal
Font-Style:italic
Font-Style:oblique
在這個指令中最大的問題是 OBLIQUE 這個屬性在 NESCAPE 不能夠使用。所以盡
量不要用吧!以 免兩大瀏覽器呈現的效果不同
FONT-SIZE--------文字大小
和 HTML 比起來,CSS這個語法可就靈活多了。看一看下面的範例吧。
Font-Size:20pt
Font-Size:20px
Font-Size:medium
Font-Size:200%
必須要注意的是第三行,文字大小有所謂的相對和絕對。相對有 LARGER,
SMALLER 兩種屬性。絕對 則有下列 xx-small, x-small, small, medium,
large, x-large, xx-large七種。相對大小的值是 以前面也就是上一層級的文字
大小位基準。
FONT-WEIGHT------文字粗細
經過擴充的文字粗細有下列的表達方法:
Font-Weight:normal
Font-Weight:bold
Font-Weight:bolder
Font-Weight:100
預設值是 normal。Bolder 是比之前層級更粗一級的意思,也有Lighter是更細一
級的意思。數字 的表示方式有100到900這九種等級。Bold則等於700。
TEXT-INDENT------首行內縮
這是一個新的概念。有鑑於一般排版上有首行內縮的文章,CSS 也將這個加入了
:
Text-Indent:15pt
Text-Indent:15%
WORD-SPACING-----文字字距
文字字距是表達文字間要留多少空間的方法:
Word-Spacing:20pt
預設值是 normal。而值可為任何一種長度單位。例如最常用的pt, px。公分,公
厘等也可以用。
LETTER-SPACING---字母間距
和上一個幾乎是一樣的表示方法
Letter-Spacing:2pt
參考上一個元件。
LINE-HEIGHT------行距
每一行之間的距離
Line-Height:20pt
這就要特別注意了!如果設定了行距,儘量不要用<br>來斷行,用<p>來指定才不
會 有問題。
TEXT-DECORATION--文字修飾
文字修飾的應用大多在設定連結不要顯示底線,現在先看看它的用法,之後再談
連結的問題。
Text-Decoration:none
Text-Decoration:underline
Text-Decoration:overline
Text-Decoration:linethrough
Text-Decoration:blink
none為預設值,也就是什麼都沒有。underline加底線。linethrough加刪除線
。overline加頂線。blink閃爍。
TEXT-TRANSFORM---文字轉換
文字轉換的語法如下:
Text-Transform:none
Text-Transform:capitalize
Text-Transform:uppercase
Text-Transform:lowercase
none為預設值,也就是什麼都沒有。capitalize將英文字第一個字轉成大寫
。uppercase轉成大寫lowercase轉成小寫
TEXT-ALIGN-------文字對齊
這個大家就應該很熟了。
Text-Align:center
Text-Align:right
Text-Align:left
Text-Align:justify
center為對中靠齊。right對右靠齊。left對左靠齊。justify頭尾切齊。
COLOR------------色彩
指定文字顏色
Color:#000000
Color:black
Color:rgb(225,225,225)
上述三種顏色的表現方式皆可以被 CSS 接受。如果沒有任何顏色被指定,則預設
值是黑色。
MARGIN-LEFT------向左縮排
左邊界值:
Margin-Left:20pt
Margin-Left:20%
MARGIN-RIGHT-----向右縮排
右邊界值
Margin-Right:20pt
Margin-Right:20%