css 常用樣式詳細介紹

font-family 設定字體名稱

可以使用多個名稱，用逗號分隔，瀏覽器則依照先後順序依序使用可用字體

p { font-family:'宋体','黑体','Arial'; }

#font-size 設定字體大小

length 以長度值指定文字大小，不允許負值

percentage 以百分比指定文字大小，其百分比取值是基於父物件中字體的尺寸，不允許負值

p { font-size:14px;}

font-weight 控製字體粗細

normal 正常的字體，相當於數字值400

bold 粗體，相當於數字值700

100~900 定義由細到粗的字元

XML/HTML Code複製內容到剪貼簿

1. p { font-weight:bold;}  

font-style 控製字體是否傾斜

normal 指定文字字體樣式為正常的字體

italic 指定文字字體樣式為斜體，對於沒有設計斜體的特殊字體，如果要使用斜體外觀將套用oblique

#oblique 指定文字字體樣式為傾斜的字體，人為的使文字傾斜，而不是去選取字體中的斜體字

p { font-style: normal; }   
p { font-style: italic; }   
p { font-style: oblique; }

font(字體樣式縮寫)

例：   
p{   
font-style: italic;   
font-weight: bold;   
font-size: 14px;   
line-height: 22px;   
font-family:'宋体';   
}   

缩写后：   
p { font: italic bold 14px/22px '宋体'; }

color 文字顏色

•英文單字，例如：red，yellow，green …

•十六進位表示方式，#開頭，6個十六進位的字元或數字組合，例如：#FFFFFF，#000000 …

•RGB模式，紅色0-255，綠色0-255，藍色0-255，例如：RGB(120,33,234)

•RGBA模式，例如：RGBA(255,0,0,0.5)，最後的A表示透明度50%

text-decoration 文字裝飾線條

none 預設。定義標準的文字

underline 定義文字下的一條線

overline 定義文字上的一條線

line-through 定義穿過文字的一條線

blink 定義閃爍的文字

h1 {text-decoration:overline;}   
h2 {text-decoration:line-through;}   
h3 {text-decoration:underline;}

text-shadow 文字陰影

h-shadow 必要。水平陰影的位置。允許負值

v-shadow 必要。垂直陰影的位置。允許負值

blur 可選。模糊的距離

color 可選。陰影的顏色

h1{ text-shadow: 2px 2px 2px #ff0000;}

寬度width : auto | length

高度height : auto | length

p { width:300px;}   
p { width:50%;}   
img { height:200px;}   
p { height:100px;}

#外邊距margin : auto | length

margin-top 設定上邊的外邊距

margin-bottom 設定下邊的外邊距

margin-left 設定左邊的外邊距

#margin-right 設定右邊的外邊距

縮寫型式：

margin: 上邊距 右邊距 下邊距 左邊距

margin: 上邊距 左右邊距

margin: 上方邊距 左右邊距 下邊距

p { width:300px; height:100px; margin:10px;}   
p { width:300px; height:100px; margin:0 auto;}

內邊距padding : length

padding-top 設定上方的內邊距

padding-bottom 設定下邊的內邊距

padding-left 設定左邊的內邊距

padding-right 設定右邊的內邊距

p { width:300px; height:100px; padding:10px;}

透明度opacity :

number值為0.0-1.0 之間的小數

相容全瀏覽器的寫法：

p{ filter:alpha(opacity=50); }  /* IE6-IE8 */   
p{ opacity:0.5; }  /* 现代浏览器 */

#以上這篇css 常用樣式(分享)就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持PHP中文網。

更多css 常用樣式詳細介紹相關文章請關注PHP中文網！