CSS背景属性详解与应用示例

需积分: 9 80 浏览量更新于2024-07-26 收藏 238KB DOC 举报

身份认证购VIP最低享 7 折!

领优惠券(最高得80元）

"这是一份关于CSS的学习笔记，涵盖了CSS背景属性的使用，包括background-color、background-image、background-repeat、background-attachment和background-position等。笔记通过实例展示了如何为不同元素设置背景颜色，以及如何使用不同类名来实现样式差异化。" 在CSS（层叠样式表）中，背景属性是用于定义元素背景效果的关键部分。以下是对这些属性的详细解释： 1. **background-color**：这个属性用于设置元素的背景颜色。它可以接受颜色名称（如`red`）、十六进制颜色值（如`#ffffff`）或RGB函数（如`rgb(255, 255, 255)`）。例如，`background-color: yellow;`将元素的背景颜色设置为黄色。 2. **background-image**：此属性允许你指定一个图像作为元素的背景。它可以是一个URL，指向图像文件。例如，`background-image: url("image.jpg");`将背景设置为指定的图像。 3. **background-repeat**：决定背景图像是否及如何重复。可能的值有`repeat`（水平和垂直重复）、`repeat-x`（只水平重复）、`repeat-y`（只垂直重复）和`no-repeat`（不重复）。默认值是`repeat`。 4. **background-attachment**：定义背景图像是否随滚动条移动。可能的值有`scroll`（默认，图像随页面滚动）、`fixed`（图像固定在视口）和`local`（图像随元素内容滚动）。 5. **background-position**：用于设定背景图像的位置。可以使用像素、百分比或关键词（如`center`）来定位。例如，`background-position: 0% 50%;`将图像左上角定位在元素的左上角，并且图像居中。在HTML文档中，你可以通过内联样式、内部样式表（在`<head>`标签内的`<style>`标签中）或外部样式表来应用这些CSS属性。例如，文档中的`<style>`标签示例演示了如何为`body`、`h1`、`h2`、`p`和带有特定类的`p`元素设置背景颜色。在实例中，可以看到不同标签和类的应用，如`<h1>`和`<h2>`分别设置了绿色和透明背景，`<p>`元素的子类`.no1`和`.no2`使用了不同的背景颜色，而`.highlight`类为文本添加了一个红色背景。这展示了如何通过CSS实现元素的样式差异化，增强网页设计的灵活性和多样性。

资源详情

资源推荐

!%4

向文本添加修饰。

!%,

缩进元素中文本的首行。

!%('

设置文本阴影。GG包含该属性，但是GG没有保留该属性。

!%/+

控制元素中的字母。

$,%,,

设置文本方向。

'(,%

设置元素中空白的处理方式。

'%,

设置字间距。

color 设置文本颜色

还是三种表示方式：（略）

direcon 设置文本的方向。

ltr 默认，文本方向从左到右

rtl 文本方向从右到左

line-height 设置行间距

nomal 默认。设置合理的行间距

number 设置数字，此数字会和当前的字体尺寸相乘来设置行间距

length 设置固定的行间距

% 基于当前字体尺寸的百分比行间距

leer-spacing 增加或减少字符间的空白

normal默认，标准空间

length定义固定空间

text-align 对其文本

le 文本排列到左边（一般为默认，和浏览器有关）

right 文本排列到右边

center 文本排列居中

text-decoraon 对文本进行修饰

none 默认，无修饰

underline 定义文本下的一条线

overline 定义文本上的一条线

line-through 定义文本下的一条线

blink 定义闪烁文本无法在 HF 和 0 上运行

text-indent 缩进元素中的首行文本

length 固定的缩进

% 基于父元素宽度的百分比的缩进

text-transform 对元素中字母进行控制

none 默认，不做任何修改

capitaon 文本中每个单词以大写字母开头

uppercase 仅以大写字母显示

lowercase仅以小写字母显示

white-space 设置处理元素内的空白

normal默认，空格被忽略

pre 空格保留，类似于

nowrap文本不换行，正行显示

word-space 增加或减少单词间的空白

剩余33页未读，继续阅读

大饼卷馒头蘸米饭

粉丝: 369
资源: 105

CSS背景属性详解与应用示例

CSS学习笔记CSS学习笔记

HTML+CSS学习笔记.zip

html和css学习笔记

黑马程序员css笔记

pink老师css笔记

css浮动和动画笔记

css var html?

CSS linear-gradient()大小

前端html5css3笔记整理下载

bax-shadow

html5&css3学习笔记下载

渡一前端html、css、js笔记及学习规划.zip

前端学习笔记 javascript

python学习笔记完整

web应用程序学习笔记

bootstrap学习笔记

韩顺平轻松搞定网页设计(html+css+javascript)笔记下载

jerry的学习笔记 sapui5 应用开发

css229中第12讲笔记

响应式布局学习笔记和经验

最新资源