你是如何使用背景和文本属性的呢 ,如果还不太熟悉的话可以来看看我的喔。

背景属性-background

背景就不多解释了吧,就跟桌面壁纸一样,设置一个合适的背景可以的整个布局显得更加和谐,舒适。
至于属性呢,就是给这个背景设置其他的样式,总不能总是给这个背景添加图像吧,我们可以对它进行简单的操作,使它达到我们想要的效果。

当我们在制作网页时在网页中添加一些背景颜色、背景图像可以让网页更加美观。

  • background-color:设置元素的背景颜色;

    • 取值:英文颜色表示法、rgb表示法、十六进制表示法
  • background-image:设置元素的背景图像;

      • 元素的尺寸小于图片的尺寸,图片是从元素的左上角角开始显示,超出的部分不可见
    • 元素的尺寸大于图片的尺寸,图片在水平方向和垂直方向平铺的

    • div{
          background-image: url("路径");
      }
      

      添加背景颜色在这里插入图片描述
      显示效果如下
      在这里插入图片描述

  • background-repeat: 背景图片平铺方式;

    /* 背景图片平铺 默认*/
    div{
        background-repeat: repeat;
    }
    
    /* 背景图片不平铺 */
    div{ 
        background-repeat: no-repeat; 
    }
    
    /* 背景图片水平平铺 */
    div{ 
        background-repeat: repeat-x; 
    }
    
    /* 背景图片垂直平铺 */
    div{ 
        background-repeat: repeat-y; 
    }
    
  • background-position: 设置背景图片位置;

    X允许的取值方式Y允许的取值方式
    left左对齐 center水平居中 right右对齐top顶部对齐 center垂直居中 bottom底部对齐
    pxpx

    如果只给一个值,那么第二个值默认center

精灵图技术 :为了减少网络请求,可以将所有的小图标拼接在一张图片上,一次网络请求全部得到;借助于background-position进行背景图片位置的调整,实现显示不同的图标

  • background-size:设置背景图片的尺寸;
    • background-size:X Y; X和Y和原图宽高对应,同时X Y可以是自己设定的百分比或像素
    • background-size:cover;等比例缩放直到铺满X轴和Y轴;
    • background-size:contain; 等比例缩放直到铺满X或Y轴其中一个;

在这里插入图片描述

字体属性-font

字体设置是网页设计中的重要组成部分,合适的字体不仅会使页面更加美观,也可以提升用户体验。CSS中提供了一系列用于设置字体样式的属性,比如更改字体,控制字体大小和粗细等等。

字体大小
其中,相对长度单位比较常用,推荐使用像素单位px,绝对长度单位使用较少。

font-size: px / % / em / rem;
  • 百分比:根据父元素的字体大小来设置
  • em:根据父元素的字体大小来设置
  • rem:根据根元素的字体大小来设置
    在这里插入图片描述

字体颜色

color:英文单词 / 十六进制 / rgb ;
  • 英文单词表示法 做测试使用
  • rgb 三原色
  • #RRGGBB # RBG 0~9 A~F
    在这里插入图片描述

字体类型

font-family: 字体名称 ;

在这里插入图片描述

字体粗细

font-weight:;

在这里插入图片描述

说明
bold定义粗的字体
bolder定义更粗的字体
lighter定义更细的字体
normal定义正常的字体大小

100-900的整百数数值

字体斜体

font-style:; \

在这里插入图片描述

说明
normal正常
italic斜体,换成一种斜体字体

行高

line-height: px\%\倍数;

在这里插入图片描述

  • 会按照字体大小的1.32倍去设置行高

在这里插入图片描述

文本相关属性-text

文本缩进

text-indent

在这里插入图片描述

文本水平对齐方式

text-align
说明
left居左对齐
center居中对齐
right局右对齐
justify两端对齐
  • 垂直对齐:vertical-align

  • 文本修饰:text-decoration

    说明
    none没有文本线
    underline下划线
    line-through中划线
    overline上划线

在这里插入图片描述

单词间距

word-spacing单词间距

在这里插入图片描述

字间距

letter-spacing每一个字符之间的间隙

在这里插入图片描述

溢出显示方式

 text-overflow
  • ellipsis 显示省略符号来代表被修剪的文本

在这里插入图片描述

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

_bbbfamous

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值