文本属性,边界圆角,背景属性,精灵图案例
程序员文章站
2022-06-24 08:58:36
07.31自我总结 一.文本属性 大小:font size. 颜色:color 字重:font weight 可选属性 | | |`bolder 细`| |`粗 更粗` 100 900之间整百的数字 字族:font family 可以选择多个用 隔开,匹配原则从左往右哪个能用就用哪个 字体样式: ......
07.31自我总结
一.文本属性
大小:font-size.
注意点最小是12ox你选择1px也是12,我们要更加小就ui自己设计字体了
颜色:color
-
字重:font-weight
可选属性
-
lighter
|normal
|bold
|bolder
分别为细
|正常
|粗
|更粗
- 100-900之间整百的数字
-
-
字族:font-family
可以选择多个用
,
隔开,匹配原则从左往右哪个能用就用哪个 字体样式:font-style
-
文本划线:text-decoration
可选属性
-
underline
|line-through
|overline
|none
分别是下划线
|删除线
|上划线
|没有划线
,默认是没有划线
-
-
文本水平位置:text-align
可选属性
-
left
|center
|right
-
行高:line-height
- 首行缩进:text-indent
字间距:letter-spacing
整体设置font: bold 10px/300px '黑体', 'arial'; 分别是字重,字体大小,行高,字族,顺序可以交换不影响
二.边界圆角
border-radius
特点
- 最多可以填写8个参数
- 可填写的参数
固定值
|百分百
- 左上为第一个角,顺时针编号
- 不足找对角
- 填写一个值所有边都是这个值
- 填写八个参数的时候
横纵分离
,先横后纵
横纵直接用/
分开
三.背景属性
- 背景图片设置
/*显示比屏幕大的图片:缩放尺寸*/ background-image: url("img/kj.gif"); /*尽量只设置宽,高等比缩放,不失真*/ background-size: 300px 300px; /*平铺: repeat-x repeat-y repeat no-repeat*/ background-repeat: no-repeat; /*位置*/ /*1.只设置x轴,y轴默认center*/ /*2.x轴:left center right 具体像素 百分百*/ /*2.y轴:top center bottom 具体像素 百分百*/ background-position: center center;先x轴再y轴
四.精灵图案例
原理:先设置显示区域大小,再根据背景图片的移动结合伪类进行操作来完成一些动画效果