【CSS 05】文本颜色 文本对齐 文字装饰 文本转换 文字间距 文本阴影 字体 字体样式 字体大小 谷歌字体

说在前面

事实证明，Zoro只要出现在标题就会被识别为关键字，所以现在我直接不将Zoro写入标题而是更换成封面，嘻嘻

文本 text

color 属性用于设置文本的颜色

1. name - red
2. HEX - #ff0000
3. RGB - rgb(255,0,0)

页面的默认文本颜色是在 body 选择器中定义的

body {
	color: blue;
}
对于 W3C compliant CSS：如果您定义了 color 属性，则还必须定义 background-color 属性

body {
	background-color: light-grey;
	color: blue;
}

h1 {
	background-color: black;
	color: white;
}

---

文本对齐 text-align

text-align 属性用于设置文本的水平对齐方式
文本可以左对齐或右对齐，或居中对齐
h1 {
	text-align: center;
}

当 text-align 属性设置为 "justify" 后，将拉伸每一行（拉开词距），以使每一行具有相等的宽度，并且左右边距是直的
div {
	text-align: justify;
}

direction 和 unicode-bidi 属性可用于更改元素的文本方向
p {
	direction: rtl;
	unicode-bidi: bidi-override;
}

vertical-align 属性设置元素的垂直对齐方式
img.top {
  vertical-align: top;
}

img.middle {
  vertical-align: middle;
}

img.bottom {
  vertical-align: bottom;
}

---

文字装饰 text-decoration

text-decoration 属性用于设置或删除文本装饰
text-decoration: none; 通常用于从链接上删除下划线

a {
	text-decoration: none;
}

其他 text-decoration 值用于装饰文本
h1 {
  text-decoration: overline;
}

h2 {
  text-decoration: line-through;
}

h3 {
  text-decoration: underline;
}
建议不要在非链接文本加下划线，因为这经常会使读者感到困惑

---

文本转换 text-transform

text-transform 属性用于指定文本中的大写和小写字母

p.uppercase {
  text-transform: uppercase;
}

p.lowercase {
  text-transform: lowercase;
}

p.capitalize {
  text-transform: capitalize;
}

---

文字间距 text_spacing

text-indent 属性用于指定文本第一行的缩进
p {
	text-indent: 50px;
}

letter-spacing 属性用于指定文本字符间距
h1 {
  letter-spacing: 3px;
}

h2 {
  letter-spacing: -3px;
}

line-height 属性用于指定行间距
p.small {
	line-height: 0.8;
}
p.big {
	line-height: 1.8;
}

word-spacing 属性用于指定单词之间的间距（字间距）
h1 {
	word-spacing: 10px;
}

h2 {
	word-spacing: -5px;
}

white-space 属性指定元素内部空白的处理方式
演示如何禁用元素内的文本换行
p {
  white-space: nowrap;
}

---

文本阴影 text-shadow

text-shadow 属性为文本添加阴影
最简单的用法是只指定水平阴影（2px）和垂直阴影（2px）
接下来，向阴影添加颜色（红色
然后，向阴影添加模糊效果（5px）

h1 {
	text-shadow: 2px 2px 5px red;
}

---

字体 font

选择正确的字体会对网站的用户体验产生巨大影响
正确的字体可以为您的品牌创造强有力的形象
使用易于阅读的字体很重要
字体为您的文本增加了价值
为字体选择正确的颜色和文本大小也很重要

通用字体族
CSS中有五个通用字体族：

1. 衬线 - Serif - 在每个字母的边缘都有一个小的笔触,营造出一种形式感和优雅感
2. 无衬线 - Sans-serif - 字体线条简洁,营造出现代而简约的外观
3. 等宽 - Monospace - 所有字母都有相同的固定宽度,创造出机械式的外观
4. 草书 - Cursive - 模仿人的笔记
5. 幻想 - Fantasy - 装饰性
   使用 font-family 属性规定文本的字体

font-family 属性应包含多个字体名称作为“后备”系统，以确保浏览器/操作系统之间的最大兼容性
请以您需要的字体开始，并以通用系列结束（如果没有其他可用字体，则让浏览器选择通用系列中的相似字体）
字体名称应以逗号分隔

如果字体名称不止一个单词，则必须用引号引起来，例如：“Times New Roman”

.p1 {
  font-family: "Times New Roman", Times, serif;
}

.p2 {
  font-family: Arial, Helvetica, sans-serif;
}

.p3 {
  font-family: "Lucida Console", "Courier New", monospace;
}

---

字体样式 font-style

font-style 属性主要用于指定斜体文本
可以设置三个值：

1. normal - 文字正常显示
2. italic - 文字斜体显示
3. oblique - 文本倾斜，类似斜体且支持较少

font-weight 属性指定字体粗细

font-variant 属性指定是否以 small-caps 字体（小型大写字母）显示文本
在 small-caps 字体中，所有小写字母都将转换为大写字母。但是，转换后的大写字母的字体大小小于文本中原始大写字母的字体大小

p.normal {
	font-style: normal;
}

p.italic {
	font-size: italic;
}

p.oblique {
	font-style: oblique;
}

p.light {
	font-weight: lighter;
}

p.thick {
	font-weight: bold;
}

p.thicker {
	font-weight: 900;
}

p.small {
	font-variant: small-caps;
}

---

字体大小 font-size

font-size 属性设置文本的大小
在网页设计中，能够管理文本大小很重要
但是不应调整字体大小来使段落看起来像标题，或是使标题看起来像段落

font-size 值可以是绝对或相对大小：

绝对尺寸：

• 指定大小
• 不允许用户在所有浏览器中更改文本大小（可访问性不佳）
• 输出物理尺寸已知时绝对尺寸有用

相对尺寸：

• 设置相对于周围元素的大小
• 允许用户在浏览器中更改文本大小

如果没有指定字体大小，则普通文本（如段落）的默认大小为 16px（16px = 1em）

以像素设置字体大小
使用像素设置文本大小可以完全控制文本大小
如果您使用像素，则仍然可以使用缩放工具来调整整个页面的大小

以 em 设置字体大小
为了允许用户调整文本大小（在浏览器菜单中），许多开发人员使用 em 而不是像素
W3C 建议使用 em 尺寸单位
1em 等于当前字体大小
浏览器中的默认文本大小为 16px
因此默认大小 1em 为 16px

h1 {
	font-size: 40px;
}

h1 {
	font-size: 2.5em;
}

在所有浏览器中显示相同的文本大小，并允许所有浏览器缩放或调整文本大小
需要使用百分比和em的组合
body {
	font-size: 100%;
}

h1 {
	font-size: 2.5em;
}

响应式字体大小
可以使用 vw 单位设置文本大小，意思是“视口宽度”（"viewport width"）
这样，文本大小将遵循浏览器窗口的大小，请调整浏览器窗口的大小，以查看字体大小如何缩放
<h1 style="font-size:10vw">响应式文本</h1>

<p style="font-size:5vw;">请调整浏览器窗口的大小，以查看文本大小如何缩放。</p>

<p style="font-size:5vw;">调整文本大小时，请使用 "vw" 单位。 10vw 将尺寸设置为视口宽度的 10％。</p>

<p>视口是浏览器窗口的大小。 1vw = 视口宽度的 1％。如果视口为 50 厘米宽，则 1vw 为 0.5 厘米。</p>

---

谷歌字体

如果您不想使用 HTML 中的任何标准字体，则可以使用 Google Fonts API 向页面添加数百种其他字体

只需添加一个样式表链接并引用您选择的字体系列

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Sofia">
<style>
body {
	font-family: "Sofia";
	font-size: 22px;
}
</style>
</head>
<body>
<h1>Sofia Font</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>

</body>
</html>

---

简写属性 shorthand

为了缩短代码，也可以在一个属性中指定所有单个字体属性
font属性是下面属性的简写属性：

1. font-style
2. font-variant
3. font-weight
4. font-size/line-height
5. font-family

<!DOCTYPE html>
<html>
<head>
<style>
p.a {
  font: 20px Arial, sans-serif;
}

p.b {
  font: italic bold 12px/30px Georgia, serif;
}
</style>
</head>
<body>

<h1>The font Property</h1>

<p class="a">This is a paragraph. The font size is set to 20 pixels, and the font family is Arial.</p>

<p class="b">This is a paragraph. The font is set to italic and bold, the font size is set to 12 pixels, the line height is set to 30 pixels, and the font family is Georgia.</p>

</body>
</html>

注意：font-size 和 font-family 的值是必需的。如果缺少其他值之一，则会使用其默认值