HTML5与CSS3学习笔记【第十章 为文本添加样式(二)】

10.7.同时设置所有字体值

可以使用 font 简写属性同时设置字体样式、粗细、变体、大小、行高和字体系列。这种方法要比单独声明各个属性高效，因此采用这种方法可以保持样式表简洁。使用 font 简写属性不要求指定所有字体属性，但至少应该包含字体大小和字体系列属性。

body {
 font: 100% Geneva, Tahoma, Verdana, 
➝ sans-serif;
}h1,
h2 {
/* 这些声明无法使用font简记法，除非同时
声明字体大小 */
 font-family: "Gill Sans", "Gill Sans MT", 
➝ Calibri, sans-serif;
 font-weight: normal;
}h1 { font-size: 2.1875em; }
h2 { font-size: 1.75em; }
em,
a:link,
.intro .subhead {
 font-weight: bold; }
.intro {
 line-height: 1.45; }
.intro .subhead {
 font-size: 1.125em;
}
.intro p {
 font-size: 1.0625em;
}.project p {
/* 这些声明无法使用font简记法，除非同时
声明字体系列 */
 font-size: .9375em;
 line-height: 1.65;
 }

这里只是将 body 的字体属性放在了一条 font 声明中。代码中无法将h1、h2或.project类p元素的字体属性放入font中，因为 font 简写属性至少应该包括字体系列和字体大小属性。

.example-2 {
 font: .875em/1.3 "Palatino Linotype", 
➝ Palatino, serif;
}

这 是 一 个 结 合 了 font-size、lineheight 和 font-family 声明的 font 简记法的例子。行高跟在字体大小和一个斜杠后面。font 简写属性中还可以包含 font-style、font-variant 和 font-weight。

.example-3 {
 font: italic small-caps bold .875em/1.3 
➝ "Palatino Linotype", Palatino, serif;
}

这个例子中包含了所有可能的属性。只要 font 中声明了字体大小和字体系列属性，其他属性可以任意组合。前三个属性的次序无关紧要。
同时设置所有字体值的步骤
(1) 输入 font:。
(2) 可 选 步 骤， 输 入 normal、italic 或oblique 以设置字型。
(3) 可 选 步 骤， 输 入 normal、bold、bolder、lighter 或 100 的 倍 数（ 最大 到900）以设置粗细。
(4) 可选步骤，输入 normal 或 small-caps来取消或设置小型大写字母。
(5) 可选步骤，输入需要的字体大小。
(6) 如果需要，输入 /line-height，这里的 line-height 是行与行之间的距离。
(7) 输入一个空格，再按优先次序输入需要的字体系列，以逗号分隔。

10.8.设置颜色

可以修改网页中文本的颜色。我们的样式表可以包含颜色名称、十六进制值、RGB、HSL、RGBA 和 HSLA 值的任意组合来定义颜色。

body {
color: blue;
 font: 100% Geneva, Tahoma, Verdana, 
➝ sans-serif;
}
...
h2 {
color: #7d717c;
 font-size: 1.75em;
}
...
/* :::: 链接 :::: */
a:link {
color: #e10000; /* a red */
}
a:visited {
color: #b44f4f;
}
a:hover {
color: #f00;
}
.intro a {
color: #fdb09d; /* 略带粉色 */
}
.intro a:hover {
color: #fec4b6;
}

在 body 元素中设置页面的默认文本颜色，这样所有的元素都会继承设置（link 除外）。再在相应元素中设置特殊需求的颜色（如我在h2中的设置）。注意，a:hover 颜色（#f00）使用了第一条提示中说到的缩写（为展示效果，这个例子中的 body元素使用了蓝色，后面不会保留这一设置）

设置颜色的步骤
(1) 输入 color:。
(2) 输入colorname，这里的colorname 是预定义颜色中的一种。或者输入 #rrggbb，这里的 #rrggbb 是颜色的十六进制呈现。这是最常用的指定颜色的方法。

或者输入 rgb(r, g, b)，其中 r、g、b 是 0 ～ 255 之间的整数，分别表示所需颜色里红、绿、蓝的量。

或者输入 rgb(r%, g%, b%)，其中r、g、 b 分别是所需颜色里红、绿、蓝的百分数。

或者输入 hsl(h, s, l)，其中 h 是 0~360之间的数值，表示所需颜色的色相；s 和 l均是百分数，分别表示所需颜色的饱和度和亮度。（一般来说，对于不透明颜色，使用十六进制数或 RGB 值更好。）

或者输入 rgba(r, g, b, a)，其中r、g、 b 是 0 ～ 255 之间的整数，分别表示所需颜色里红、绿、蓝的量；a 是 0~1 之间的小数，表示所需颜色的 alpha 透明度。

或者输入 hsla(h, s, l, a)，其中 h 是 0 ～ 360 之间的数值，表示所需颜色的色相；s 和l 均是百分数，分别表示所需颜色的饱和度和亮度；a 是 0 ～ 1 之间的小数，表示所需颜色的 alpha 透明度。

如果输入的 r、g 或 b 的值大于 255，就会使用 255。类似地，高于 100% 的百分数将被替换为 100%。

10.9.设置背景

我们在设置背景样式时有很多选择。可以为单个元素设置背景，可以为整个页面设置背景，还可以为上述二者的任意组合设置背景。如此，便可以对几个段落、几个单词、不同状态的链接、内容区域等修改背景。总之，几乎可以对所有元素应用背景样式，甚至是表单和图像。（是的，你没看错，图像也可以有背景图像！）
设 置 背 景 有 很 多 属 性 可 以 利 用， 包括 background-color、background-image、background-repeat、background-attachment 及background-position 等。还可以使用 background简记法，该属性将上述属性合并了，可以节省大量的输入。
1. 修改文本的背景颜色
(1) 输入 background:。
(2) 输入 transparent（表示允许透过父元素的背景颜色）或 color，这里的 color 是颜色名称、十六进制数值，或 RGB、HSL、RGBA、HSLA 颜色值。十六进制值颜色是最为常用的。

body {
background-color: #88b2d2;
 font: 100% Geneva, Tahoma, Verdana, 
➝ sans-serif;
}
...
h2 {
background-color: #eaebef;
 color: #7d717c;
 font-size: 1.75em;
}
.intro {
background-color: #686a63;
color: #fff;
 line-height: 1.45; }
...
除了那些单独设置背景颜色的元素之外，对 body 元素设置背景颜色就是为整个页面设置背景颜色。
.architect {
 background-color: #fff;
}

2. 使用背景图像作为背景
(1) 输入 background-image:。
(2) 输入 url(image.png)，这里的 image.png 是图像相对于样式表所在位置的路径和文件名。或者输入 none，表示不使用图像，如 background-image: none;（只有在覆盖应用背景图像的元素的样式时才会使用这个声明）。

body {
 background-color: #ccc;
background-image: url(bg-pattern.png);
...
}

3. 重复背景图像
输入 background-repeat: direction，这里 的 direction 可 以 取 四 个 值：repeat、
repeat-x、repeat-y 和 no-repeat，它们分别代表同时横向和纵向重复图像、只横向重复图像、只纵向重复图像、不重复图像。忽略backgroundrepeat 相当于将其设为默认值 repeat。

body {
background-image: url(sky.png);
background-repeat: repeat-x;
background-position: left bottom;
…
}
这次我们希望图像仅在水平方向（X轴）重复。重复的开始位置是页面的左上角。注意这里没有提供背景色

4. 控制背景图像是否随页面滚动
(1) 输入 background-attachment:。
(2) 输入 fixed（代码如图 10.10.13 所示），
背景图像会附着在浏览器窗口上（也就是说即使访问者滚动页面，图像仍会继续显示，）；或 scroll，访问者滚动页面时背景图像会移动，只有访问者滚动背景图像所在的元素（而不是整个页面）时，背景图像才移动。
body {
background-color: #000;
background-image: url(sky.png);
background-repeat: repeat-x;
background-attachment: fixed;
background-position: left bottom;
…
}
配合我们设置的 background-position，背景图像将从浏览器窗口的左下角开始水平重复

5. 指定元素背景图像的位置
输入 background-position_x y_，其中 x 和 y 可以表示为距离左上角的绝对距离或百分数，如图 10.10.16 所示，如 20px 147px（允许负值）。也可以用left（左对齐）、center（居中）或 right（右对齐）表示 x，用 top（顶端对齐）、center（居中）或 bottom（底端对齐）表示 y，如图 10.10.13 所示。如果两个值都使
用关键字表示，那么两者的顺序无关紧要，如 top right 跟 right top 一样。
body {
background: #004 url(…/img/ufo.png)
➝ no-repeat 170px 20px;
color: greenyellow;
…
}
现在，我们使用 background 简记法将所有这些单独的声明压缩成一条规则。不使用background-position，而是将水平和竖直属性值直接写在最后。
6. 在一条声明中设置所有背景属性
(1) 输入 background:。
(2) 指定任何可接受的 background 属性值（从“修改文本的背景颜色”到“指定元素背景图像的位置”介绍的内容都适用）。

10.10.控制间距

可以增加或减少单词之间或字母之间的距离，前者称为字间距（tracking），后者称为字偶距（kerning）。

body {
 background-color: #88b2d2;
 font: 100% Geneva, Tahoma, Verdana, 
➝ sans-serif;
}h1,
h2 {
 font-family: "Gill Sans", "Gill Sans MT", 
➝ Calibri, sans-serif;
 font-weight: normal;
/* 出于演示目的进行临时设置 */
letter-spacing: 7px;
}h1 {
 font-size: 2.1875em;
}
... 其他CSS ...

这里为标题的字母之间添加了 7 像素的额外间距，letter-spacing 的效果非常明显了。在后面的例子中我会将这个值缩小为 1 像素

1. 指定字间距
输入word-spacing: length，这里的length是一个带单位的数字，如 0.4em 或 5px。
2. 指定字偶距
输 入 letter-spacing: length， 这 里 的length 是一个带单位的数字，如 0.4em 或 5px。

10.11.添加缩进

通过设置 text-indent 属性，可以指定段落第一行前面应该空出多大的空间。

...
h1,
h2 {
 font-family: "Gill Sans", "Gill Sans MT", 
➝ Calibri, sans-serif;
 font-weight: normal;
 letter-spacing: 1px;
}
...
.project p {
 font-size: .9375em; /* 15px/16px */
 line-height: 1.65;
text-indent: 2em; /* 30px */
}
... 其他CSS ...

这 段 代 码 为 p 元 素 添 加 了 2em 的缩 进。 由 于 0.9375 的 字 体 大 小 等 于 15 像 素（15/16=0.9375），因此这个缩进约为 30 像素。

增加缩进的方法
输入 text-indent: length，这里的length是一个带单位的数字，如 1.5em 或 18px。

10.12.对齐文本

根据需要，可以让文本左对齐、右对齐、居中对齐或两端对齐。
对齐文本的步骤
(1) 输入 text-align:；
(2) 输入 left 让文本左对齐；或者输入 right 让文本右对齐；或者输入 center 让文本居于屏幕的中间；或者输入 justify 让文本两端对齐。

...
h1, h2 {
 font-family: "Gill Sans", "Gill Sans MT", 
➝ Calibri, sans-serif;
 font-weight: normal;
 letter-spacing: 1px;
text-align: center;
}
...
p {
text-align: justify;
}
.intro .subhead {
 font-size: 1.125em;
text-align: center;
}
... 其他CSS ...

10.13.修改文本的大小写

使用 text-transform 属性，可以为样式 定义文本的大小写。通过 这种方法，可以将文本显示为首字母大写、 全部大写、全部小写或按原样显示。
修改文本大小写的步骤
(1)输入 text-transform:。
(2) 在冒号（:）后输入 capitalize 让每个单词的首字母大写；
或者输入 uppercase 让所有字母大写；或者输入 lowercase 让所有字母小写；或者输入none让文本保持本来的样子（可以用来取消继承的值）