DIV CSS 佈局教程網

font-family 設置字體名稱

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

XML/HTML Code復制內容到剪貼板

1. p { font-family:'宋體','黑體','Arial'; }  

font-size 設置字體大小

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

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

XML/HTML Code復制內容到剪貼板

1. 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 指定文本字體樣式為傾斜的字體，人為的使文字傾斜，而不是去選取字體中的斜體字

XML/HTML Code復制內容到剪貼板

1. p { font-style: normal; }   
2. p { font-style: italic; }   
3. p { font-style: oblique; }  

font(字體樣式縮寫)

CSS Code復制內容到剪貼板

1. 例：   
2. p{   
3. font-style: italic;   
4. font-weight: bold;   
5. font-size: 14px;   
6. line-height: 22px;   
7. font-family:'宋體';   
8. }   
9.   
10. 縮寫後：   
11. 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 定義閃爍的文本

CSS Code復制內容到剪貼板

1. h1 {text-decoration:overline;}   
2. h2 {text-decoration:line-through;}   
3. h3 {text-decoration:underline;}  

text-shadow 文本陰影

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

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

blur 可選。模糊的距離

color 可選。陰影的顏色

CSS Code復制內容到剪貼板

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

寬度 width : auto | length

高度 height : auto | length

CSS Code復制內容到剪貼板

1. p { width:300px;}   
2. div { width:50%;}   
3. img { height:200px;}   
4. div { height:100px;}  

外邊距 margin : auto | length

margin-top 設置上邊的外邊距

margin-bottom 設置下邊的外邊距

margin-left 設置左邊的外邊距

margin-right 設置右邊的外邊距

縮寫型式：

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

margin: 上下邊距  左右邊距

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

CSS Code復制內容到剪貼板

1. div { width:300px; height:100px; margin:10px;}   
2. div { width:300px; height:100px; margin:0 auto;}  

內邊距 padding : length

padding-top 設置上邊的內邊距

padding-bottom 設置下邊的內邊距

padding-left 設置左邊的內邊距

padding-right 設置右邊的內邊距

XML/HTML Code復制內容到剪貼板

1. div { width:300px; height:100px; padding:10px;}  

透明度 opacity : <number>

number值為 0.0-1.0 之間的小數

兼容全浏覽器的寫法：

XML/HTML Code復制內容到剪貼板

1. div{ filter:alpha(opacity=50); }  /* IE6-IE8 */   
2. div{ opacity:0.5; }  /* 現代浏覽器 */  

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