主页

CSS 的使用(背景、文本)

2023-03-03 06:00PM

背景:

CSS 背景属性用于定义html元素的背景。

CSS 属性定义背景效果:

  • background-color

  • background-image

  • background-repeat

  • background-attachment

  • background-position

背景颜色:

background-color 属性定义了元素的背景颜色.

页面的背景颜色使用在body的选择器中:

背景图像:

background-image 属性描述了元素的背景图像.

默认情况下,背景图像进行平铺重复显示,以覆盖整个元素实体.

页面背景图片设置实例:

背景图像 - 水平或垂直平铺:

默认情况下 background-image 属性会在页面的水平或者垂直方向平铺。

一些图像如果在水平方向与垂直方向平铺,这样看起来很不协调,如下所示:

如果图像只在水平方向平铺 (repeat-x), 页面背景会更好些:

背景图像- 设置定位与不平铺:

让背景图像不影响文本的排版

如果你不想让图像平铺,你可以使用 background-repeat 属性:

以上实例中,背景图像与文本显示在同一个位置,为了让页面排版更加合理,不影响文本的阅读,我们可以改变图像的位置。

可以利用 background-position 属性改变图像在背景中的位置:

背景简写:

在以上实例中我们可以看到页面的背景颜色通过了很多的属性来控制。

为了简化这些属性的代码,我们可以将这些属性合并在同一个属性中.

背景颜色的简写属性为 "background":

当使用简写属性时,属性值的顺序为::

  • background-color

  • background-image

  • background-repeat

  • background-attachment

  • background-position

以上属性可以按照页面的实际情况使用

文本:

文本的对齐方式:

文本排列属性是用来设置文本的水平对齐方式。

文本可居中或对齐到左或右,两端对齐.

当text-align设置为"justify",每一行被展开为宽度相等,左,右外边距是对齐(如杂志和报纸)

文本修饰:

text-decoration 属性用来设置或删除文本的装饰。

从设计的角度看 text-decoration属性主要是用来删除链接的下划线:

也可以这样装饰文字:

我们不建议强调指出不是链接的文本,因为这常常混淆用户 文本转换:

文本转换属性是用来指定在一个文本中的大写和小写字母。

可用于所有字句变成大写或小写字母,或每个单词的首字母大写。

文本缩进:

文本缩进属性是用来指定文本的第一行的缩进

CSS的文本属性:

参考:https://www.runoob.com/css/css-text.html

返回>>

登录

请登录后再发表评论。

评论列表:

目前还没有人发表评论