常見樣式屬性及值

字體:

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(水平對(duì)齊方式): left|center|right|justify(兩端對(duì)齊)

vertical-align(錘直對(duì)齊方式): top|middle|bottom

text-indent: 首行縮進(jìn)

line-height: 行高

text-decoration(文本裝飾): none(無)|underline(下劃線)|overline(上劃線)|line-through(刪除線)

text-shadow(文本陰影): 陰影顏色 x軸偏移量 y軸偏移量 模糊半徑

注意:

vertical-align只對(duì)img,input,select,textarea,td有效!

如果是在一個(gè)div|p中,單行文本錘直居中顯示,使用line-height!

顏色的表示方式:

#十六進(jìn)制代碼

rgb(r,g,b) 其中,r,g,b分量不超過255

rgba(r,g,b,a) 其中a是透明度(alpha)

超鏈接偽類:

:link 未訪問過的鏈接

:visited 訪問過的鏈接

:hover 鼠標(biāo)懸浮在鏈接上

:active 正在點(diǎn)擊超鏈接(鼠標(biāo)左鍵還沒放開)

注意: 如果這4種狀態(tài)都要處理, 嚴(yán)格按照該順序編寫選擇器!

一般情況下, 只需這樣即可:

a { }

a:hover { }

列表樣式

list-style

list-style-type(列表標(biāo)記類型): none|disc|circle|square|decimal

list-style-image(自定義圖片作為列表標(biāo)記): url(圖片地址)

list-style-position(列表標(biāo)記的位置): outside(標(biāo)記在li外)|inside(標(biāo)記在li之內(nèi))

背景樣式

background-color: 背景顏色

background-image: url(圖片地址)

background-repeat: repeat(橫豎都重復(fù))|no-repeat|repeat-x|}repeat-y

background-position(背景圖位置): x坐標(biāo) y坐標(biāo)

background-size(背景圖的尺寸): w(寬度) h(高度);

注意: x和y坐標(biāo)可以用數(shù)值(像素)|百分比|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: 背景色 背景圖 平鋪方式 背景圖的位置;

總結(jié)

以上是生活随笔為你收集整理的js修改css样式属性_这个笔记《CSS样式的常见属性及值》，让菜鸟轻松学会包粽子...的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。