CSS樣式的常見屬性及值
常見樣式屬性及值
字型:
font
-family
-size
-style: normal(正常)|italic(傾斜)|oblique
-weight: normal|bold(粗體)
如果組合起來編寫: font: style weight size family
字型大小的單位可以是 px, em, rem, pt, cm, mm, in, pc
文字:
color
text-align(水平對齊方式): left|center|right|justify(兩端對齊)
vertical-align(錘直對齊方式): top|middle|bottom
text-indent: 首行縮排
line-height: 行高
text-decoration(文字裝飾): none(無)|underline(下劃線)|overline(上劃線)|line-through(刪除線)
text-shadow(文字陰影): 陰影顏色 x軸偏移量 y軸偏移量 模糊半徑
注意:
vertical-align只對img,input,select,textarea,td有效!
如果是在一個div|p中,單行文字錘直居中顯示,使用line-height!
顏色的表示方式:
#十六進位制程式碼
rgb(r,g,b) 其中,r,g,b分量不超過255
rgba(r,g,b,a) 其中a是透明度(alpha)
超連結偽類:
:link 未訪問過的連結
:visited 訪問過的連結
:hover 滑鼠懸浮在連結上
:active 正在點選超連結(滑鼠左鍵還沒放開)
注意: 如果這4種狀態都要處理, 嚴格按照該順序編寫選擇器!
一般情況下, 只需這樣即可:
a { }
a:hover { }
列表樣式:
list-style
list-style-type(列表標記型別): none|disc|circle|square|decimal
list-style-image(自定義圖片作為列表標記): url(圖片地址)
list-style-position(列表標記的位置): outside(標記在li外)|inside(標記在li之內)
背景樣式:
background-color: 背景顏色
background-image: url(圖片地址)
background-repeat: repeat(橫豎都重複)|no-repeat|repeat-x|}repeat-y
background-position(背景圖位置): x座標 y座標
background-size(背景圖的尺寸): w(寬度) h(高度);
注意: x和y座標可以用數值(畫素)|百分比|left|right|top|bottom|center
可以使用漸變樣式來替代背景圖:
線性漸變:
background-image: linear-gradient(方向, 顏色1, 顏色2, ...);
方向: to left, to right, to top, to bottom, 角度(45deg)
徑向漸變:
background-image: radial-gradient(顏色1,顏色2, ...)
合起來寫:
background: 背景色 背景圖 平鋪方式 背景圖的位置;