一文搞懂css常用字体属性与背景属性

本文详细介绍了CSS中的字体样式属性(如italic和oblique)、背景属性(如position、image、repeat、size和attachment)及其在HTML中的应用实例。通过实例演示,读者可以了解如何调整文本倾斜和背景图片展示方式。
摘要由CSDN通过智能技术生成

Hello world

效果展示:

在这里插入图片描述

④ font-style: italic;

这个属性管的是字体的样式,是否倾斜

p {

font-style: oblique;

}

div {

font-style: italic;

}

这两个值都可以使字体倾斜,但oblique用于文本倾斜,用的较少

代码示例:
Document

Hello World

Hello world
效果展示:

在这里插入图片描述

⑤font: italic 700 20px/1px ‘幼圆’

字体属性大杂烩,将一个标签所有字体属性写在一块

是否倾斜,粗细程度,字体大小行间距,字体样式

代码示例:
Document

Hello world

Hello world

Hello world

效果展示:

在这里插入图片描述

二、常用的背景属性都有什么?

================================================================================

一个好看的页面会让人看起来更舒服,所以熟悉常用的背景属性尤为重要。

1.常见的背景属性


①background-position: center center;

背景图片是如何进行展示的,如果不改这个属性默认从

左上角进行对齐,修改会会将中央位置放在中间

代码示例:
Document
效果展示:

添加属性前:

在这里插入图片描述

添加属性后:

在这里插入图片描述

② background-image: url(…/…/5.png);

图片的路径,比较简单,在此就不进行代码示例了。

③background-repeat: no-repeat;

不加这个属性的话默认图片是重复展示的

代码示例:
Document
效果展示:

添加属性前:

在这里插入图片描述

添加属性后:

在这里插入图片描述

④background-size: cover;

这个修改的是背景的大小,而cover是进行覆盖,也可以使用px设置大小

代码示例:
Document
效果展示:

添加属性前:

在这里插入图片描述

添加属性后:

在这里插入图片描述

⑤background-attachment: fixed;

这个属性设置的是背景图片是否根据字体进行滚动

fixed是不进行滚动

scroll是背景图随着字体的滚动而滚动

代码示例:
Document
Hello World

Hello World

Hello World

Hello World

Hello World

Hello World

Hello World

Hello World

Hello World

Hello World

Hello World

Hello World

Hello World

Hello World

Hello World

Hello World

Hello World

Hello World

Hello World

Hello World

Hello World

Hello World

Hello World

Hello World

Hello World

Hello World

Hello World

Hello World

Hello World

Hello World

Hello World

Hello World

Hello World

Hello World

Hello World

Hello World

Hello World

Hello World

Hello World

Hello World

Hello World

Hello World

Hello World

Hello World

Hello World

Hello World

Hello World

Hello World

Hello World

Hello World

Hello World

Hello World

Hello World

Hello World

Hello World

Hello World

Hello World

Hello World

Hello World

Hello World

Hello World

Hello World

Hello World

Hello World

Hello World

Hello World

Hello World

Hello World

Hello World

Hello World

Hello World

Hello World

Hello World

Hello World

Hello World

Hello World

Hello World

Hello World

Hello World

Hello World

Hello World

Hello World

Hello World

Hello World

Hello World

Hello World

Hello World

Hello World

Hello World

Hello World

Hello World

Hello World

Hello World

Hello World

Hello World

Hello World

Hello World

Hello World

Hello World

Hello World

Hello World

Hello World

Hello World

Hello World

Hello World

Hello World

Hello World

Hello World

Hello World

Hello World

Hello World

Hello World

Hello World

Hello World

Hello World

Hello World

Hello World

Hello World

Hello World

Hello World

Hello World

Hello World

Hello World

Hello World

Hello World

Hello World

Hello World

Hello World

Hello World

Hello World

Hello World

Hello World

Hello World

Hello World

Hello World

Hello World

Hello World

Hello World

Hello World

Hello World

Hello World

Hello World

Hello World

Hello World

Hello World

效果展示:(由于作者不会做动图,大家可以赋值代码自己体会一下)

在这里插入图片描述

⑥大杂烩 background

代码示例:
Document
  • 15
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值