• 最后主页中还剩下一个小问题。之前我们将所有的锚点元素鼠标悬浮时的字体颜色设置为了淡灰。但是元素中包裹的

  和

  元素由于自身定义了color，元素:hover效果下的color不起效。

• 现在我们就要用相对复杂的选择器去修复这个问题，我们先为每个section元素添加一个class teaser， 如下所示：

有了这个选择器，我们就可以创建出复杂的选择器来实现需求。我们首先需要.teaser选择器来确定需要修改样式的是含有这个class的元素的内部元素。我们之前提过要修改鼠标悬浮在元素上时的样式，所以需要用到:hover伪类。最后我们要添加h3选择器去选中实际要修改样式的元素。

结合起来修改的

元素的样式如下所示：


.teaser a:hover h3 {
color: #a9b2b9;
}


完成以后，可以看到页面变得更漂亮了，并且有了一点自己的风格。

设置文本属性

现在我们了解了字体属性例如字体大小，字型，粗细，行高等，接下来我们要了解文本属性例如如何对齐、修饰、缩进、变换文本以及设置文字间距。

文本对齐方式

对齐文本是页面排版中很重要的一部分，我们需要用到text-align属性。text-align属性有五个值：left，center，right，justify和inherit。这些值的意思都非常直白，就是向左对齐，向右对齐，居中以及两端对齐。

以下是将所有段落文本居中对齐：

p {
text-align: center;
}


但不要混淆text-align属性和float属性。text-align的值left和right是让元素内部的文本向左或向右对齐。 而float是让元素本身整个往左或者往右。有些时候我们期望text-align实现的效果，但也有些时候则需要用到float属性。

文本修饰

text-decoration提供了一些方法来修饰文本。它接受的值有：none，underline，overline，line-through和inherit。使用text-decoration的场景很多，最常见的就是浏览器默认的下划线链接

以下示例是为class为note的元素添加下划线：

.note {
text-decoration: underline;
}


text-decoration属性可以一次性添加多个值，每个值之间使用空格隔开。

文本缩进

text-indent属性用于元素中第一行文本的缩进，和常见的出版物中一样。属性接受所有的常见长度单位，包括像素px，点pt，百分比%等等。正值表示想内缩进， 负值表示向外缩进。

以下例子是将

元素的文本向内缩进20px：

p {
text-indent: 20px;
}


文本阴影

text-shadow属性可以为文本设置一个或多个阴影。属性一般需要四个值，从左到右数前三个值是长度值，最后一个是色值。

前三个值中，第一个值确定横向偏移，第二个值确定纵向偏移，第三个值确定模糊半径。第四个值也就是最后一个值，确定阴影的颜色，色值可以是color属性值的任何颜色值。

以下例子中，将

元素的文本阴影颜色设置为30%不透明度的黑色，向右偏移3px，向下偏移6px，模糊半径为2px。

p {
text-shadow: 3px 6px 2px rgba(0, 0, 0, .3);
}


若横向和纵向偏移值为负值，阴影会向左上方偏移。

盒子阴影

text-shadow属性设置的是元素内部文字的阴影，如果我们要为整个元素设置阴影的话就要使用box-shadow属性。

box-shadow和text-shadow非常相似，也依次接受横向偏移量，纵向偏移量，模糊半径和色值。

但是它还可以接受第四个可选的长度值，这个值在色值之前，用以拓展阴影。若值为正值，阴影比元素大小更大，若为负值阴影则比元素小。

box-shadow还可以在最开始接受一个可选值inset，使阴影在盒子内部显示。

文本转换
与font-variant类似的还有一个text-transform属性。不过font-variant是将字体变为替代变体，而text-transform直接改变文本而不是使用变体。text-transform属性接受五个值：none，capitalize，uppercase，lowercase和inherit。

属性值capitalize会把每个单词的首字母转换成大写，uppercase会将每个字母转换成大写，lowercase会将每个字母转换成小写。而none则会显示原始文本。

以下示例中将

元素中的每个字母都转换成大写：

p {
text-transform: uppercase;
}


字母（文字）间距

letter-spacing属性用以调整字母（文字）的间距，正值使间距变大，而负值则使间距缩小。属性值none则返回默认的文字间距。

使用相对的长度单位，会有利于随着字体大小的改变而正确的维护字母（文字）间距。不过即使如此，我们也需要保持检查代码的好习惯。

以下示例中，我们将

元素字母间距缩小0.5em：

p {
letter-spacing: -.5em;
}


单词间距

与letter-spacing类似，我们可以使用word-spacing调整单词的间距。word-spacing属性值也与letter-spacing一致，不过它调整的单词间距而不是字母间距而已。

以下示例中，将

元素中的每个单词的间距调整为.25em：

p {
word-spacing: .25em;
}


使用所有的文本属性

我们重温下之前使用了所有字体属性的例子，现在再给其增加一些文本属性。

HTML

I Am a Builder

Posted by Shay Howe

Every day I see designers and developers working alongside one another. They work intelligently in pursuit of business objectives. They work diligently making exceptional products. They solve real problems and take pride in their work. They are builders. Continue&＃8230;

CSS

h2,
p {
color: #555;
font: 13px/20px "Helvetica Neue", Helvetica, Arial, sans-serif;
}
a {
color: #0087cc;
}
a:hover {
color: #ff7b29;
}
h2 {
font-size: 22px;
font-weight: bold;
letter-spacing: -.02em;
margin-bottom: 6px;
}
h2 a {
text-decoration: none;
text-shadow: 2px 2px 1px rgba(0, 0, 0, .2);
}
.byline {
color: #9799a7;
font-family: Georgia, Times, "Times New Roman", serif;
font-style: italic;
margin-bottom: 18px;
}
.intro {
text-indent: 15px;
}
.intro a {
font-size: 11px;
font-weight: bold;
text-decoration: underline;
text-transform: uppercase;
}


练习

对文本属性有了解之后，我们将它们应用到“样式讨论会”网站中去。

• 目前页面中每个链接都有默认的下划线，但有时我们并不需要它，所以对此要做一些修改。
• 我们将样式添加到main.css文件中，首先使用text-decoration属性移除链接的下划线，然后为

  元素中的所有链接都增加一个border-bottom属性，这样下划线的颜色就可以设置成跟文本颜色不一致的颜色。

• 鼠标悬浮时的样式与之前的一致，所以最终样式如下所示：

a {
color: #648880;
text-decoration: none;
}
a:hover {
color: #a9b2b9;
}
p a {
border-bottom: 1px solid #dfe2e5;
}


• 我们之前到过

  元素和其他各级标题元素的样式有所不同，现在我们要为其再添加一个text-transform属性使所有字母转为大写。修改后的代码如下所示：

h5 {
color: #a9b2b9;
font-size: 14px;
font-weight: 400;
text-transform: uppercase;
}


• 之前我们为元素中的导航添加了一个class primary-nav，现在我们要在现有的font-size和font-weight属性之后添加letter-sapcing和text-transform属性增加字母间距并将字母转化为大写。
• 含有class primary-nav的

.primary-nav {
font-size: 14px;
font-weight: 400;
letter-spacing: .5px;
text-transform: uppercase;
}


• 之前我们将元素中的logo设置了左浮动，现在我们想将标语布局在logo右侧。我们希望它一直在元素的右侧。
• 我们需要将带有class tagline的

  元素 的text-align属性值设置为right。

• 我们在现有的margin属性下面添加样式，修改后的样式代码如下所示：

.tagline {
margin: 66px 0 22px 0;
text-align: right;
}

• 我们想在和
• 由于和
• 由于我们想要共享导航栏的样式，所以我们要为两个导航栏添加相同的classnav。修改后元素的结构如下所示：




...

...




• 别忘了修改每个页面中的和
• 由于classnav用在两个导航栏中，我们在main.css文件中新划分出一个区域添加导航样式。并为其设置text-align为right。稍后我们再在此基础上拓展其他样式。

/*
========================================
Navigation
========================================
*/
.nav {
text-align: right;
}


• 我们已为很多元素添加了text-align属性，现在还需要为hero选择器设置text-align为center。刚添加的样式，以及之前现有的line-height和padding属性， 都位于 main.css文件的“home page”区域。

.hero {
line-height: 44px;
padding: 22px 80px 66px 80px;
text-align: center;
}


• 现在我们的“样式讨论会”网站有了较好的样式排版，不过我们的网站还需要进一步完善。

使用网络安全字体

每个电脑、平板、智能手机以及其他有网络浏览功能的设备都预装了一部分默认字体。我们可以在网站中自由的使用这部分字体，因为我们知道无论是什么设备，字体都会被正确渲染。这些字体就被称为“网络安全字体”。这里列出了一部分最安全的网络安全字体：

• Arial
• Courier New,Courier
• Garamond
• Georgia
• Lucida Sans, Lucida Grande, Lucida
• Palatino Linotype
• Tahoma
• Times New Roman, Times
• Trebuchet
• Verdana

嵌入网络字体

我们也可以通过CSS的@font-face属性，将字体上传到服务器并在网站上使用它。这个属性为线上排版创造了奇迹。从此线上排版将比以往任何事都要更加丰富多彩。

嵌入字体的步骤如下。首先我们要在@font-face中，通过font-family属性定义字体名，并通过src属性加载字体路径(我们选中的字体文件的路径)。这样我们就能够在选择器中通过font-family来获取我们定义的字体。

@font-face {
font-family: "Lobster";
src: local("Lobster"), url("lobster.woff") format("woff");
}
body {
font-family: "Lobster", "Comic Sans", cursive;
}


有嵌入字体的能力不意味着有法律权限这样做。字体是艺术作品，将它发布到网站上很容易被窃取，所以字体的使用权仅限于我们批准的许可范围。

幸运的是，线上新字体的价值已经被认可，一些公司在网站的新字体上开发了授权。
这些公司中，例如 Typekit 和 Fontdeck 需要付费才能获取字体授权，而其他的公司，例如 Google Font, 则可以免费获得字体授权。所以在使用新字体之前，需要知道我们是否有权使用它。

练习

为了使“样式讨论会”网站更具个性，我们试着将谷歌字体应用到我们的网站中。

• 首先我们登录到 Google Fonts 网，搜索我们需要的字体：Lato。找到以后添加到需求栏，并按照步骤往下走。
• 到选择字体粗细的时候，我们要选择页面中使用到的300和400，再选择一个100的变体加入我们的需求栏。
• 谷歌给我们提供了一个放在元素中的元素。我们将它添加到现有的元素之下。这个元素中包含了我们需要的Lato字体的@font-face的CSS文件。
• 添加了这个新的元素之后，我们的元素结构如下所示：





href="http://fonts.googleapis.com/css?family=Lato:100,300,400">



• 现在我们页面中已经可以使用Lato字体了。现在我们将其添加到元素的font属性中作为我们的主字体。
• 我们将Lato字体添加到字体堆栈的最前面："Lato", "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif。
• 虽然 Lato是个单词，但由于它是嵌入字体，所以我们需要用引号将它包起来。 修改后的元素样式如下所示：

body {
color: #888;
font: 300 16px/22px "Lato", "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

• Lato 字体运行后“样式讨论会”网站的文本样式都会被更新。接下来我们来看一看logo模块。
• 在logo选择器中，首先添加text-weight:100将文字调整到极细，再添加text-transform:uppercase将所有字母转为大写。最后设置letter-spacing:.5px使字母间距扩大。
• 修改后样式如下所示：

.logo {
border-top: 4px solid #648880;
float: left;
font-size: 48px;
font-weight: 100;
letter-spacing: .5px;
line-height: 44px;
padding: 40px 0 22px 0;
text-transform: uppercase;
}


• 因为font-weight:100是有效的，所以我们可以将导航模块中所有的段落文本都设置成这个粗细。还是在现有的选择器中添加，代码如下所示：

.hero p {
font-size: 24px;
font-weight: 100;
}


• 在这节课中我们为“样式讨论会”网站做了很大的改进，它的界面开始真正大放异彩。

演示源代码

这是练习的源代码。在线预览 或 点击下载

引用

线上写作有时会涉及引用不同的来源或引用。所有不同的引用都可以用HTML中的，，

涵盖。由于它们通常都与正常文本的样式有所区别，所以我们就在这节课中讨论它们。

虽然需要很多练习才能够掌握如何使用正确的元素和属性来标记引用，但大多数时候，我们都可以遵循以下规则：

• :用于引用原创作品，作者或者资源。
• ：用于简短的内联引语。

• ：用于较长的外部引用。

引用原创作品

行内元素在HTML中专门用于引用原创作品。这个元素必须包含作品标题，作者名或者作品链接。元素中的文本浏览器默认显示为斜体。

若有需要，可以在元素中添加一个超链接元素用以链接引用的原始来源。

以下例子中，是一本由 Walter Isaacson 所著的名为 Steve Jobs 的书。我们将书名包含在元素中，引用中设置了这本书的超链接：

The book Steve Jobs is truly inspirational.




直接引用

很多时候我们都会在文本中引用对话或文章。这时候我们就要应用行内元素。元素语义上就是引用对话或文章，所以它不应该用于其他目的。

默认情况下，浏览器在渲染这个元素时会根据全局属性lang识别对应的语言，添加适当的引号。

示例如下：

Steve Jobs once said, One home run is much better than two doubles.




间接引用

元素有一个cite属性。cite属性的作用是引用已引用的内容的URL。这个属性不会改变元素的外观，但这对于屏幕阅读器和其他设备来说很有用。因为这个属性并不可见，所以最好在引用内容前前设置超链接标明来源。

示例如下：

Steve Jobs once said, One home run is much better than two doubles.

直接外部引用

如果我们要引用来自外部的多行的大块文本，就要用到

元素。

是一个块状元素，可以内嵌块状元素，包括各级标题和段落标签。

示例如下：

&＃8220;In most people&＃8217;s vocabularies, design is a veneer. It&＃8217;s interior decorating. It&＃8217;s the fabric of the curtains, of the sofa. But to me, nothing could be further from the meaning of design. Design is the fundamental soul of a human-made creation that ends up expressing itself in successive outer layers of the product.&＃8221;

间接外部引用

较长的引用通常都会通过

元素进行间接引用。这种引用可能会包含cite属性和元素。

cite属性用在

元素中和用在元素中的方法相同&＃8212;-以URL的形式提供引用内容的引用。元素跟在实际引用内容之后，用以标明引用内容的原始来源。

示例中HTML概述了 Fortune 杂志中对 Steve Jobs 的一段话的引用。这段引用使用了

元素并通过cite属性指定了原始来源。

元素中还嵌套了包含元素的元素为用户提供额外的引用和参考。

&＃8220;In most people&＃8217;s vocabularies, design is a veneer. It&＃8217;s interior decorating. It&＃8217;s the fabric of the curtains, of the sofa. But to me, nothing could be further from the meaning of design. Design is the fundamental soul of a human-made creation that ends up expressing itself in successive outer layers of the product.&＃8221;

&＃8212; Steve Jobs in Fortune Magazine

总结

学习怎样版文本的样式令人兴奋，因为我们的内容可以开始传达一些情感。我们也可以开始使我们的内容具有层次结构，让我们的网站更清晰易读。

快速的回顾一下我们这节课所学的内容：

• 给文本添加颜色以突出文本
• 基于文字的属性：font-family，font-size，font-style，font-weight 等。
• 基于文本的属性：text-align，text-decoration，text-indent，text-shadow 等。
• 什么是网络安全字体以及如何嵌入我们自己的网络字体。
• 如何标记间接引用和直接引用

调整我们的文字和排版使我们的设计更具魔力。接下来我们将通过背景和渐变为我们的网站带来更多色彩。

文章来源

https://learn.shayhowe.com/html-css/working-with-typography