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

零点

发布于 2023-03-03 20:47:57

8550

发布于 2023-03-03 20:47:57

文章被收录于专栏：微科技微科技

一.文本常用属性： 1.文本颜色：color属性 2.文本字体：font-family属性，可以对应多个属性值。

 默认以第一个属性值为准，当电脑不存在第一个属性值的字体，则以第二个为准，以此类推

3.文本大小：font-size属性 4.文本粗细：font-weight属性

 属性值bold和bolder：粗体显示
 属性值inherit和lighter：细体显示
 属性值normal：默认显示

5.文本样式：font-style属性

 属性值normal：默认显示
 属性值italic：斜体显示

6.标签透明度：opacity属性，取值范围：0.0-1.0 7.文本对齐方式:text-align属性：

 属性值left：左对齐（默认）
 right：右对齐
 center：居中对齐
 justify：两端对齐（至少有两行以上文本）

8.文本修饰：text-decoration属性

 overline：在文本顶部有一根横线（没有类似效果的标签）
 underline：在文本底部有一根横线（类似的标签是u标签）
 line-through：在文本中间有一根横线（类似的标签是del标签）
 none：取消文本装饰（重要）(常用于取消a标签的下划线)

9.文本上下居中：

 设置line-height属性值和当前背景高度值一致

二.文本溢出处理 1.如果包裹文本的标签设置无法容纳所有文本的情况，会出现文本溢出现象。 2.文本溢出处理方式(overflow属性)：

 属性值visible：文本默认显示，溢出显示
 属性值hidden：溢出文本自动隐藏
 属性值scroll：自动给横向和纵向添加滚动条（无论是否溢出，都会添加横线和纵向的滚动条）
 属性值auto：哪个方向文本溢出，则就在哪个方向添加滚动条。

三.背景图片常用属性设置背景属性：

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可以使图片只需铺满整个浏览器，拖动滚动条，图片不会随着改变

本文参与?腾讯云自媒体分享计划，分享自作者个人站点/博客。

如有侵权请联系 cloudcommunity@tencent.com 删除

opacity