close

文字的設定也很簡單

font-family
color
font-size
font-weight
font-style

text-align

text-indent
text-decoration
letter-spacing
word-spacing
line-height 
字型
顏色
大小
厚度(粗體)
風格(斜體)

對齊方式
首行縮排
效果(底線等)
字元間距
單字間距
行高 















以下整理出文字設定相關的css例子(省略位置、底色等語法)

<style>
.word_font {
 font-family:'微軟正黑體', Arial; color:#333333; font-size:12pt;
 font-weight:bold; font-style:italic;
 text-align:left; text-indent:80px; text-decoration:underline;
 letter-spacing:10px; word-spacing:20px; line-height:40px;
 padding:10px;
}
</style>

<div class="word_font">
 基本文字效果:字型、顏色、大小,加上粗體、斜體<br /><br />
 換行按Shift+Enter會出現→<br /><br />
 加上"padding"(和div的間距)之後<br />
 文字就不會整個貼壁了<br /><br />
 靠左對齊、首行縮排,<br />
 文字效果的底線、字元間距、<br />
 單字間距、行高。<br />
</div>

P.S. padding(留白)也可以上(top)下(bottom)左(left)右(right)獨立設定,如:padding-top:10px;

text-align
文字對齊
left
right
center
justified 
靠左
靠右
置中
左右 
text-decoration
文字效果 
overline
line-through
underline 
頂線
刪除線
底線 










文字設定範例連結~!
(畫面分成font和text兩個部分表現,可按右鍵檢視完整原始碼)

arrow
arrow
    創作者介紹
    創作者 #賴家裡{Claire} 的頭像
    #賴家裡{Claire}

    [div]賴在家裡的賴家裡的家裡[/div]

    #賴家裡{Claire} 發表在 痞客邦 留言(0) 人氣()