CSS背景_文本和字体.ppt

CSS背景、文本与字体 青软实训 目录 背景 文本 字体 背景 CSS 背景 (background) 属性定义元素的背景效果。 元素的背景区包括前景之下直到边框边界的所有空间。因此，内容框与内边距都是元素背景的一部分，且边框画在背景上。 CSS 允许应用纯色作为背景，也允许使用背景图像创建相当复杂的效果；CSS 在这方面的能力远远在 HTML 之上。 背景 CSS 背景属性 背景 背景实例 设置背景颜色 本例演示如何为元素设置背景颜色。 设置文本的背景颜色 本例颜色如何设置部分文本的背景颜色。 将图像设置为背景 本例演示如何将图像设置为背景。 如何重复背景图像 本例演示如何重复背景图像。 如何在垂直方向重复背景图像 本例演示如何垂直地重复背景图像。 如何在水平方向重复背景图像 本例演示如何水平地重复背景图像。 背景 背景实例 如何仅显示一次背景图像 本例演示如何仅显示一次背景图像。 如何放置背景图像 本例演示如何在页面上放置背景图像。 如何使用%来定位背景图像 本例演示如何使用百分比来在页面上定位背景图像。 如何使用像素来定位背景图像 本例演示如何使用像素来在页面上定位背景图像。 如何设置固定的背景图像 本例演示如何设置固定的背景图像。图像不会随着页面的其他部分滚动。 所有背景属性在一个声明之中 本例演示如何使用简写属性来将所有背景属性设置在一个声明之中。 文本 CSS 文本属性可定义文本的外观。 使用文本属性，你可以改变文本的颜色，增加或减少文本中的字符间距，对齐文本，装饰文本，对文本中的首行进行缩进，以及其他等等。 文本 CSS 文本属性 文本 文本实例 设置文本颜色 本例演示如何设置文本的颜色。 设置文本的背景颜色 本例颜色如何设置部分文本的背景颜色。 规定字符间距 本例演示如何增加或减少字符间距。 使用百分比设置行间距 本例演示如何使用百分比值来设置段落中的行间距。 使用像素值设置行间距 本例演示如何使用像素值来设置段落中的行间距。 使用数值来设置行间距 本例演示如何使用一个数值来设置段落中的行间距。 文本 文本实例 对齐文本 本例演示如何对齐文本。 修饰文本 本例演示如何向文本添加修饰。 缩进文本 本例演示如何缩进文本首行。 控制文本中的字母 本例演示如何控制文本中的字母。 在元素中禁止文本折行 本例演示如何禁止在元素中的文本折行。 增加单词间距 本例演示如何增加段落中单词间的距离。 字体 CSS 字体 (font) 属性定义文本中的字体。 设置字体属性是样式表的最常见用途之一。CSS 字体属性允许您设置字体系列 (font-family) 和字体加粗 (font-weight)，您还可以设置字体的大小、字体风格（如斜体）和字体变形（如小型大写字母）。 字体 CSS 字体属性 字体 字体实例 设置文本的字体 本例演示如何设置文本字体。 设置字体尺寸 本例演示如何设置字体尺寸。 设置字体风格 本例演示如何设置字体风格。 设置字体的异体 本例演示如何设置字体的异体。 设置字体的粗细 本例演示如何设置字体的粗细。 所有字体属性在一个声明之内 本例演示如何使用简写属性将字体属性设置在一个声明之内。 设置背景图像是否及如何重复。 background-repeat 设置元素的背景颜色。 background-color 设置背景图像的起始位置。 background-position 把图像设置为背景。 background-image 背景图像是否固定或者随着页面的其余部分滚动。 background-attachment 简写属性，作用是将背景属性设置在一个声明中。 background 描述 属性 设置字间距。 word-spacing 设置元素中空白的处理方式。 white-space 设置文本方向。 unicode-bidi 控制元素中的字母。 text-transform 设置文本阴影。CSS2 包含该属性，CSS2.1 无。 text-shadow 缩进元素中文本的首行。 text-indent 向文本添加修饰。 text-decoration 设置行高。 line-height 对齐元素中的文本。 text-align 设置字符间距。 letter-spacing 设置文本方向。 direction 设置文本颜色 color 描述 属性 设置字体的粗细。 font-weight 以小型小写字体或者正常字体显示文本。 font-variant 设置字体风格。 font-style 对字体进行水平拉伸。（CSS2.1 已删除该属性。） font-stretch 设置字体系