一.文本常用属性: 1.文本颜色:color属性 2.文本字体:font-family属性,可以对应多个属性值。
代码语言:javascript复制 默认以第一个属性值为准,当电脑不存在第一个属性值的字体,则以第二个为准,以此类推
3.文本大小:font-size属性 4.文本粗细:font-weight属性
代码语言:javascript复制 属性值bold和bolder:粗体显示
属性值inherit和lighter:细体显示
属性值normal:默认显示
5.文本样式:font-style属性
代码语言:javascript复制 属性值normal:默认显示
属性值italic:斜体显示
6.标签透明度:opacity属性,取值范围:0.0-1.0 7.文本对齐方式:text-align属性:
代码语言:javascript复制 属性值left:左对齐(默认)
right:右对齐
center:居中对齐
justify:两端对齐(至少有两行以上文本)
8.文本修饰:text-decoration属性
代码语言:javascript复制 overline:在文本顶部有一根横线(没有类似效果的标签)
underline:在文本底部有一根横线(类似的标签是u标签)
line-through:在文本中间有一根横线(类似的标签是del标签)
none:取消文本装饰(重要)(常用于取消a标签的下划线)
9.文本上下居中:
代码语言:javascript复制 设置line-height属性值和当前背景高度值一致
二.文本溢出处理 1.如果包裹文本的标签设置无法容纳所有文本的情况,会出现文本溢出现象。 2.文本溢出处理方式(overflow属性):
代码语言:javascript复制 属性值visible:文本默认显示,溢出显示
属性值hidden:溢出文本自动隐藏
属性值scroll:自动给横向和纵向添加滚动条(无论是否溢出,都会添加横线和纵向的滚动条)
属性值auto:哪个方向文本溢出,则就在哪个方向添加滚动条。
三.背景图片常用属性 设置背景属性:
代码语言:javascript复制background-color:设置背景颜色
background-image:设置背景图片
同时设置背景颜色和背景图片时,背景图片会覆盖背景颜色
background-repeat属性:
repeat-x:只允许横线平铺
repeat-y:只允许纵线平铺
no-repeat:不允许横线或纵向平铺(重点)
background-position属性:
a)通过长度单位来设置(横线 纵向)
第一个参数:控制横线移动,负数向左移动,正数向右移动。
第二个参数:控制纵向移动,负数向上移动,正数向下移动。
b)通过关键字来设置(横线 纵向)
横线:left、right、center
纵向:top、bottom、center
注意:如果只设置了一个关键字,那么另外一个省略的关键字就是center。
background-size属性:
a)通过长度单位来设置
第一个参数:设置图片的宽度
第二个参数:设置图片的高度
注意:使用长度单位来设置背景图片大小,容易造成图片失真!
b)通过关键字来设置
cover:不会造成图片失真,并且会铺满整个标签。
contain:不会造成图片失真,但是不会铺满整个标签。
background-attachment属性:
fixed: 设置fixed可以使图片只需铺满整个浏览器,拖动滚动条,图片不会随着改变