font-family 設置字體名稱 可以使用多個名稱,用逗號分隔,瀏覽器則按照先後順序依次使用可用字體 font-size 設置字體大小 length 用長度值指定文字大小,不允許負值 percentage 用百分比指定文字大小,其百分比取值是基於父對象中字體的尺寸,不允許負值 font-weig ...
font-family 設置字體名稱
可以使用多個名稱,用逗號分隔,瀏覽器則按照先後順序依次使用可用字體
p { font-family:'宋體','黑體','Arial'; }
font-size 設置字體大小
length 用長度值指定文字大小,不允許負值
percentage 用百分比指定文字大小,其百分比取值是基於父對象中字體的尺寸,不允許負值
p { font-size:14px;}
font-weight 控制字體粗細
normal 正常的字體,相當於數字值400
bold 粗體,相當於數字值700
100~900 定義由細到粗的字元
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;}
div { width:50%;}
img { height:200px;}
div { height:100px;}
外邊距 margin : auto | length
margin-top 設置上邊的外邊距
margin-bottom 設置下邊的外邊距
margin-left 設置左邊的外邊距
margin-right 設置右邊的外邊距
縮寫型式:
margin: 上邊距 右邊距 下邊距 左邊距
margin: 上下邊距 左右邊距
margin: 上邊距 左右邊距 下邊距
div { width:300px; height:100px; margin:10px;}
div { width:300px; height:100px; margin:0 auto;}
內邊距 padding : length
padding-top 設置上邊的內邊距
padding-bottom 設置下邊的內邊距
padding-left 設置左邊的內邊距
padding-right 設置右邊的內邊距
div { width:300px; height:100px; padding:10px;}
透明度 opacity : <number>
number值為 0.0-1.0 之間的小數
相容全瀏覽器的寫法:
div{ filter:alpha(opacity=50); } /* IE6-IE8 */
div{ opacity:0.5; } /* 現代瀏覽器 */