容器標籤內可置放的網頁元素,當然有很多種。但依照目前PIXNET的部落格型態,能夠透過CSS修飾外觀的,不外是文字(text)的字型與段落、圖片(image)、表格(table)、表單(form)及連結(link)的顯示。所以接下來我們來談的,就是設定這些內部相關元素的屬性。由於CSS中對於更改同一屬性的方法有時會有多種表示法,我想只要可以達到目的就好,沒必要把所有表示法全部列出來,我可不是在寫規格表。為避免文章過長,這篇內容只介紹字型與段落文字的屬性。

/*(Step 3)設定字型的屬性*/
font-family:"Trebuchet MS",細明體,新細明體;
/*設定字型為"Trebuchet MS"、細明體、新細明體這幾種字型,英文字型須加上引號表示,字型之間要以半形逗點作區隔。當然,你可以設定一堆奇特的字型,但是如果其他人沒這字型的,你設定了也沒用。*/
color:#000;
/*設定字型的顏色為黑色,可自行替換色碼。*/
font-size:15px;
/*設定字型的尺寸大小為15px,可自行替換數值。*/
font-weight:normal;
/*設定字型的粗細為正常(normal),有四種關鍵字選項:lighter、normal、bold、bolder。*/
font-style:normal;
/*設定不使用斜體字型,設定為normal就是不使用,否則就得改用italic(斜體)*/

/*(Step 4)設定段落(paragraph)的屬性*/
letter-spacing:2pt;
/*設定段落中文字的字距為2pt(包括英文字母間的字距,以及中文字的字距)*/
text-decoration:none;
/*設定段落中的文字無底線等裝飾,所有屬性選項值為none(無,預設值)、underline(底線)、overline(頂線)、line-through(刪除線)。*/
text-align:left;
/*設定段落內文字的水平對齊方式為向左對齊。*/
vertical-align:baseline;
/*設定段落內文字或圖片的垂直對齊方式為與基線對齊,所有屬性選項值為baseline(基線,預設值)、sub(下標字)、super(上標字)、top(垂直向上)、middle(垂直置中)、bottom(垂直向下)。*/
text-transform:uppercase;
/*轉換段落中的英文文字為全部大寫。所有屬性選項值為none(無,預設)、capitalize(首字大寫)、uppercase(全部大寫)、lowercase(全部小寫)。*/
text-indent:10pt;
/*設定段落首行縮排10pt。如果設定負數,就可能變成首行凸排。*/
text-height:normal;
/*設定段落行高為一般正常值。這項屬性的設定方式有標準行高、如果要更改行高的話,就使用固定值表示法,直接填入值就可以,例如:text-height:24pt),至於那些百分比表示法跟字型倍數表示法,有興趣的自己去查囉!*/

克里斯 發表在 痞客邦 PIXNET 留言(0) 人氣()