精華區beta b885060xx 關於我們 聯絡資訊
序 看過了之前的背景應用。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%