CSS介绍—2 CSS样式
2.1 CSS背景
CSS 允许应用纯色作为背景，也允许使用背景图像创建相当复杂的效果。CSS 在这方面的能力远远在 HTML 之上。
属性 |
描述 |
background |
简写属性，作用是将背景属性设置在一个声明中。 |
background-attachment |
背景图像是否固定或者随着页面的其余部分滚动。 |
background-color |
设置元素的背景颜色。 |
background-image |
把图像设置为背景。 |
background-position |
设置背景图像的起始位置。 |
background-repeat |
设置背景图像是否及如何重复。 |
2.1.1 背景色background-color
p {background-color: gray;}
p {background-color: gray; padding: 20px;}
2.1.2 背景图background-image
body {background-image: url(/i/eg_bg_04.gif);}
p.flower {background-image: url(/i/eg_bg_03.gif);}
a.radio {background-image: url(/i/eg_bg_07.gif);}
2.1.3 背景重复：background-repeat
body
{
background-image: url(/i/eg_bg_03.gif);
background-repeat: repeat-y;
}
注意：repeat-x 和 repeat-y 分别导致图像只在水平或垂直方向上重复，no-repeat 则不允许图像在任何方向上平铺。
2.1.4 背景定位：background-position
body
{
background-image:url('/i/eg_bg_03.gif');
background-repeat:no-repeat;
background-position:center;
}
注意：为 background-position 属性提供值有很多方法。首先，可以使用一些关键字：top、bottom、left、right 和 center。通常，这些关键字会成对出现，不过也不总是这样。还可以使用长度值，如 100px 或 5cm，最后也可以使用百分数值。不同类型的值对于背景图像的放置稍有差异。
单一关键字 |
等价的关键字 |
center |
center center |
top |
top center 或 center top |
bottom |
bottom center 或 center bottom |
right |
right center 或 center right |
left |
left center 或 center left |
百分数值
百分数值的表现方式更为复杂。假设你希望用百分数值将图像在其元素中居中，这很容易：
body
{
background-image:url('/i/eg_bg_03.gif');
background-repeat:no-repeat;
background-position:50% 50%;
}
这会导致图像适当放置，其中心与其元素的中心对齐。换句话说，百分数值同时应用于元素和图像。也就是说，图像中描述为 50% 50% 的点（中心点）与元素中描述为 50% 50% 的点（中心点）对齐。
如果图像位于 0% 0%，其左上角将放在元素内边距区的左上角。如果图像位置是 100% 100%，会使图像的右下角放在右边距的右下角。
因此，如果你想把一个图像放在水平方向 2/3、垂直方向 1/3 处，可以这样声明：
body
{
background-image:url('/i/eg_bg_03.gif');
background-repeat:no-repeat;
background-position:66% 33%;
}
如果只提供一个百分数值，所提供的这个值将用作水平值，垂直值将假设为 50%。这一点与关键字类似。
background-position 的默认值是 0% 0%，在功能上相当于 top left。这就解释了背景图像为什么总是从元素内边距区的左上角开始平铺，除非您设置了不同的位置值。
长度值
长度值解释的是元素内边距区左上角的偏移。偏移点是图像的左上角。
比如，如果设置值为 50px 100px，图像的左上角将在元素内边距区左上角向右 50 像素、向下 100 像素的位置上：
body
{
background-image:url('/i/eg_bg_03.gif');
background-repeat:no-repeat;
background-position:50px 100px;
}
注意，这一点与百分数值不同，因为偏移只是从一个左上角到另一个左上角。也就是说，图像的左上角与 background-position 声明中的指定的点对齐。
2.1.5 背景关联background-attachment
如果文档比较长，那么当文档向下滚动时，背景图像也会随之滚动。当文档滚动到超过图像的位置时，图像就会消失。
您可以通过 background-attachment 属性防止这种滚动。通过这个属性，可以声明图像相对于可视区是固定的（fixed），因此不会受到滚动的影响：
body
{
background-image:url(/i/eg_bg_02.gif);
background-repeat:no-repeat;
background-attachment:fixed
}
background-attachment 属性的默认值是 scroll，也就是说，在默认的情况下，背景会随文档滚动。
2.2 CSS文本
CSS 文本属性可定义文本的外观。
通过文本属性，您可以改变文本的颜色、字符间距，对齐文本，装饰文本，对文本进行缩进，等等。
属性 |
描述 |
color |
设置文本颜色 |
direction |
设置文本方向。 |
line-height |
设置行高。 |
letter-spacing |
设置字符间距。 |
text-align |
对齐元素中的文本。 |
text-decoration |
向文本添加修饰。 |
text-indent |
缩进元素中文本的首行。 |
text-shadow |
设置文本阴影。CSS2 包含该属性，但是 CSS2.1 没有保留该属性。 |
text-transform |
控制元素中的字母。 |
unicode-bidi |
设置文本方向。 |
white-space |
设置元素中空白的处理方式。 |
word-spacing |
设置字间距。 |
2.2.1 缩进文本text-indent
p {text-indent: 5em;}
注意：一般来说，可以为所有块级元素应用 text-indent，但无法将该属性应用于行内元素，图像之类的替换元素上也无法应用 text-indent 属性。不过，如果一个块级元素（比如段落）的首行中有一个图像，它会随该行的其余文本移动。
提示：如果想把一个行内元素的第一行“缩进”，可以用左内边距或外边距创造这种效果。
①使用负值
text-indent 还可以设置为负值。利用这种技术，可以实现很多有趣的效果，比如“悬挂缩进”，即第一行悬挂在元素中余下部分的左边：
p {text-indent: -5em;}
不过在为 text-indent 设置负值时要当心，如果对一个段落设置了负值，那么首行的某些文本可能会超出浏览器窗口的左边界。为了避免出现这种显示问题，建议针对负缩进再设置一个外边距或一些内边距：
p {text-indent: -5em; padding-left: 5em;}
2.3 CSS字体
CSS 字体属性定义文本的字体系列、大小、加粗、风格（如斜体）和变形（如小型大写字母）。
2.3.1 CSS 字体属性
属性 |
描述 |
font |
简写属性。作用是把所有针对字体的属性设置在一个声明中。 |
font-family |
设置字体系列。 |
font-size |
设置字体的尺寸。 |
font-size-adjust |
当首选字体不可用时，对替换字体进行智能缩放。（CSS2.1 已删除该属性。） |
font-stretch |
对字体进行水平拉伸。（CSS2.1 已删除该属性。） |
font-style |
设置字体风格。 |
font-variant |
以小型大写字体或者正常字体显示文本。 |
font-weight |
设置字体的粗细。 |
2.3.2 CSS 字体系列
在 CSS 中，有两种不同类型的字体系列名称：
①通用字体系列 - 拥有相似外观的字体系统组合（比如 "Serif" 或 "Monospace"）
②特定字体系列 - 具体的字体系列（比如 "Times" 或 "Courier"）
除了各种特定的字体系列外，CSS 定义了 5 种通用字体系列：
①Serif 字体
②Sans-serif 字体
③Monospace 字体
④Cursive 字体
⑤Fantasy 字体
