【原创】CSS处理文本以及背景图片

2023-03-03 20:47:57 浏览数 (2)

一.文本常用属性: 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可以使图片只需铺满整个浏览器,拖动滚动条,图片不会随着改变

0 人点赞