css美化网页元素

一.字体样式
1.字体类型：--font-family属性
p{font-family:verdana "楷体"}
2.字体风格：--font-style属性
nomal--正常
italic和oblique--斜体
3.字体粗细：--font-weight属性
normal 默认值 标准字体
bold 粗体
bolder 更粗
lighter 更细
400=normal 700=bold
二.文本样式
1.color 颜色
2.text-align 对齐方式
3.text-indent 首行文本的缩进（px/em）
4.line-height 文本行高
5.text-decoration 文本装饰
三.水平对齐方式--text-align属性
left 左 默认值
right 右
center 中
justify 两端对齐
四.垂直对齐--vertical-align属性
middle
top
bottom
五.文本装饰--text-decoration属性
1.none 标准文本
2.underline 文本下划线
3.overline 文本下划线
4.line-though 文本删除线
5.blink 文本闪烁
六.超链接伪类
1.伪类样式-语法：
a:hover{
color:#155;
}
2.伪类名称 含义
a:link 为单击访问时超链接样式
a:visted 单击访问后超链接样式
a:hover 鼠标悬浮其上的超链接样式
a:active 鼠标单击未释放的超链接样式
顺序：a:link>a:visted>a:hover>a:active
七.<div>标签
#header{
color：#325
}
<div id="header">....</div>
八.网页背景
1.背景颜色：backgound-color
2.背景图像:backgound-image
3.背景重复方式:backgound-repeat
4.背景定位:backgound-position

值 含义
xpos ypos 单位：px. xpos表示水平位置 ypos表示垂直位置
x% y% 使用百分比表示位置
x.y方向关键词 水平方向关键词：left,center,right
垂直方向关键词：top,center,bottom
简写：backgound:颜色 图像 背景定位 重复显示
九.列表样式
1.list-style-type
值 说明
none 无标记符号
dise 实心圆 默认值
cirde 空心圆
square 实心正方形
decimal 数字
2.list-style-image
li{list-style-image:图片路径；
list-style-type：none；
}
3.list-style-position
inside
outside
li{list-style-position:inside;}
简写：type position image

转载于:https://www.cnblogs.com/pohuaiwang/p/6927481.html