歡迎喜歡文章的朋友們自行轉錄,請在轉錄開頭註明出處與連結感謝各位的尊重與支持!^_^

2012年11月29日 星期四

[CSS] 段落設定屬性


CSS段落屬性能幫助網頁排版、段落、字距、對齊等,排出漂亮的版型!



letter-spacing

功能 - 設定文字間隙 ( 可設單位屬性 : 點pt、英寸in、公分cm、像素px ),此性質可設定字距,也就是字與字的間隔,只需指定一個長度單位給它或用normal特徵字設為預設值。
語法 -  letter-spacing: NORMAL︱( length )
範例 -  letter-spacing:10pt

line-height
功能 - 設定文字行列高度 ( 可設單位屬性 : 點pt、英寸in、公分cm、像素px、百分比% ),此性質可設定列高,可指定特徵字normal設為預設值,或指定含單位的長度值,或百分比(參照於父元件)均可。
語法 - line-height: NORMAL︱( number )︱( length )︱( percentage ) 
範例 - line-height:10pt}

text-align功能 - 設定調整文字 ( 可設左邊、右邊、置中、整齊 ),這個性質可決定文句在區塊內的水平對齊方式,可用值有left、right、center、justify。
語法 - text-align: left︱right︱center︱justify 
範例 - text-align: center

text-decoration
功能 - 設定文字裝飾 ( 分為 : 無、加底線、加橫線、加頂線 )。設定此區塊內的字句要不要加裝飾線,可用值有none(不加)、underline(加底線)、overline(加頂線)、line-through(加刪除線)、blink(大致同none)。
語法 - text-decoration: none | underline︱line-through︱overline 
範例 - text-decoration: underline

text-indent功能 - 設定文字縮排 ( 可設單位屬性 : 點pt、英寸in、公分cm、像素px、百分比% )。這個性質可設定段落的首行縮排(就像作文時一樣,首行要縮排),可指定含單位的長度值,或是百分比值(參照於父元件)。
語法 - text-indent : ( length )︱( percentage ) 
範例 - text-indent : 1cm

text-transform
功能 - 設定文字改變 ( 可設無、第一個字母大寫、大寫、小寫 )。設定英文字母大小寫顯示法。可用值有none(不自動轉換)、capitalize(第一個字母自動轉為大寫)、uppercase(全部自動轉換為大寫)、lowercase(全部自動轉換為小寫)。
語法 -  text-transform : none︱capitalize︱uppercase︱lowercase
範例 -  text-transform : capitalize

text-autospace
這是用來調整字距的性質,用來設定是否於特定位置加大空白間距,以增加美觀。可用特徵字有none(不使用)、ideograph-alpha(於遠東語系與拼音語系間加大空白)、ideograph-numeric(於遠東語系與數字間加大空白)、ideograph-parenthesis(於遠東語系與括號間加大空白)、ideograph-space(遠東語系之兩旁加大空白)。一般很少有人用這個性值,通常是text-autospace:none。

text-justify設定段落中各句如何調整,使段落左右之邊界對齊。可用值有inter-word(利用調整字距)、newspaper(利用調整字距或字母間距)、distribute(與newspaper很像,但最適用於東亞)、distribute-all-lines(連最後一行也調整至同寬,一般不會用這個值)、inter-ideograph(利用增加或減少字距來調整)、auto(由瀏覽器語系決定)。這個性質要IE5.0以上才能使用,一般都用text-justify:auto。

word-break設定一行結束時的斷字法,可用值有normal(允許斷字)、break-all(允許斷字,適用於大量中文夾雜少量英文)、keep-all(只允許於英文斷字,適用於大量英文夾雜少量中文)。一般用word-break:break-all較適於中文字。

Related Posts Plugin for WordPress, Blogger...