常见样式属性及值

字体:

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: 背景色 背景图 平铺方式 背景图的位置;