1.字体相关样式
-
字体颜色
- color
-
字体大小
- font-size
- 相关单位
- em
- 1em = 1个font-size(当前元素的font-size)
- rem
- 1rem = 1个根元素的font-size
- em
-
行高
- 文本在网页中都需要创建一个文本框,行高就是文本框的高度
- 使用line-height来设置行高,文字默认是在行高中居中
- 行高可以指定一个像素值,也可以指定一个整数,指定一个数字的话行高就会是字体的指定的倍数
- 通过行高可以用来设置行间距:
- 行间距 = 行高 - 字体大小
- 文字在行内垂直居中,可以将行高设置为何父元素高度一样
-
字体族
- font-family
- 使用font-family来设置字体族
-
@font-face
- 通过font-face可以让用户使用服务器中的字体
- 使用过程中一定要注意版权的问题
@font-face {
font-family:"Open Sans";
src:url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2"),
url("/fonts/OpenSans-Regular-webfont.woff") format("woff");
}
- font-weight 字重
- font-style 斜体
- font-variant 字体变形
- 简写属性 font,通过font可以同时设置所有的字体相关样式
- font : [加粗 斜体 字体变形] 字体大小/行高 字体族
2.文本的格式
(1)水平对齐
- text-align:
- 可选值:
- left 左对齐
- right 右对齐
- center 居中对齐
- justify 两端对齐
(2)垂直对齐
- vertical-align
- 可选值:
- baseline 基线对齐
- top
- bottom
- middle
(3)首行缩进
- text-indent
(4)文本修饰
- text-decoration
(5)white-space
(6)溢出的文本显示省略号
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
3.背景相关样式
- background-image
- 背景图片
- background-color
- 背景颜色
- background-repeat
- 背景的重复方式
- 可选值:
- repeat 水平垂直双方向重复
- repeat-x 水平方向重复
- repeat-y 垂直方向重复
- no-repeat 不重复
- background-size
- 设置背景图片的尺寸
- 可选值:
- 可以设置数值或百分比(auto)
- cover 背景图片铺满元素
- contain 让背景图片在元素中完整显示
- background-position
- 设置背景图片的位置
- 可选值:
- top left right bottom center
- 可以设置两个偏移量
- 第一个偏移量是水平方向的偏移量
- 如果值为正,则背景图片向右移动
- 如果值为负,则背景图片向左移动
- 第二个偏移量是垂直方向的偏移量
- 如果值为正,则背景图片向下移动
- 如果值为负,则背景图片向上移动
- 第一个偏移量是水平方向的偏移量
- background-clip
- 背景的裁切
- 可选值:
- border-box
- padding-box
- content-box
- background-origin
- 背景的定位的原点
- 可选值:
- border-box
- padding-box
- content-box
- background-attachment
- 背景是否固定
- 可选值:
- scroll 滚动
- fixed 背景在视口中固定
- background
- 背景的简写属性,通过该属性可以同时设置所有的背景相关的样式,没有顺序要求。