阿嬷都看得懂的基础 CSS 样式－文字篇与标签换行 bug

欢迎阿嬷们回到今天的戏说啊不是，是你阿嬷成为网页工程师的第一步。昨天我们学会了 HTML 标签怎麽写，也学会将个别的 HTML 标签穿上 CSS 样式。我们稍微复习一下昨天的内容：

• HTML 标签由角号与其包裹起来的标签名称形成，不同的标签名称决定了这些 HTML 标签对应到不同类型的网页元素。例如，<p> 这个标签对应的是文字段落元素，而 <div> 对应的是区块元素。
• 如果某个 HTML 标签对应的元素有可能包含其他元素，这个 HTML 标签会有另个成对的结束标签，反之则否。结束标签是在左角号与标签名称间，加入斜线 "/"，例如 </p>。
• 我们可以在个别的 HTML 标签中加上行内样式，作法是在 HTML 的标签名称与右角号间加上 "style"，後面加上等号与一对引号，并且在引号内放入各种属性与值的配对，这些配对用半形分号隔开。

因此，具备行内样式的 HTML 标签看起来长这样：

<div style="width: 80%; height: 20%; background-color: pink"></div>

到这边听起来都很美好，只要我们把每个标签可以有的属性与值都学会，我们就是网页工程师了对吧？那让我们赶快来学学这些属性和值吧！耶～本系列文章又要结束罗！作者表示爽！

这麽乐观有冲劲是很好啦，我们就先来看看些常用的样式吧！在网页中，我们会看见哪些类型的元素，它们又具备哪些样式呢？在网页中，我们经常看见文字、图片，还有就是昨天介绍的区块。

在文字方面，大概可以想到和个别文字相关的属性，例如字型、大小、粗细，这些属性的前缀都是 font-，也可以想到和整行文字相关的属性，例如对齐、装饰、缩排、行高、字距等等。整行文字比较麻烦，多数属性的前缀是 text-，其他就需要稍微记忆一下了！当然，文字相关的属性也不只这边介绍的这些，这边只是列举出比较常用的喔！

• 字型：font-family，值就是字型名称。
• 字型大小：font-size，值可以是文字，例如 small, medium, large；但是这就有点难控。也可以是数字加上长度单位，长度单位可以先使用 px，例如 12px 就相当於常见的 12 点字。这边要注意，数字和单位中间必须紧密贴合，不可以有空格喔！至於 px 是什麽，我们先就把它当作一个电脑中常见的绝对长度单位，在後面会详细说明！
• 字型粗细：font-weight，值可以是文字，例如 thin, normal, bold，不过通常会设定 100-900。
• 文字对齐：text-align，值是文字，例如 left, center, right。
• 文字装饰：text-decoration，这是增加底线 (underline)、删除线 (line-through)、上置线 (overline) 的属性；线条还可以选择样式和颜色，例如：波浪 (wavy)、虚线 (dashed)、红色 (red)、蓝色 (blue)。这些值之间记得要用空白隔开喔！
• 文字外框：outline，值和文字装饰相同。
• 首行缩排：text-indent，值是数字加上长度单位。
• 文字行高：line-height，值是数字加上长度单位。
• 字距：letter-spacing，值是数字加上长度单位。
• 文字颜色：其实就是 color，值目前先使用表示颜色的英文文字吧！之後我们会讨论怎麽使用数字表达颜色喔！至於有哪些颜色的英文文字可以使用，可以参考这里喔！

我们来写几个花俏缤纷的文字来玩玩吧！不过，在那之前，你阿嬷可能会很好奇，该怎麽在同一行的文字当中，对不同的文字增加不同的样式呢？因为如果样式只能够写在 p 标签，那不就改样式就会换行了？

有些阿嬷可能会说，我们学过预设不换行的标签啊，像是 strong 就是。不过，strong 标签会把文字变粗，那该怎麽办呢？还是我们就把 strong 标签中加上样式，把 font-weight 改成 normal 就好了？这也是个方法，可是其实还有个更简单的解法：我们可以使用 span 标签。span 标签预设不换行，也没有其他的样式，专门是为了给个别文字加上样式，所使用的喔！

那我们就来尝试看看 span 标签吧！不过，在那之前，我们来想想怎麽写比较好。我们可能会觉得，不就直观写成一行就好了？所以写起来会看起来像这样：

<p><span>哈</span><span>罗</span><span>阿</span><span>嬷</span><span>！</span></p>

也是可以，但是就连还没加上样式，看起来都还是太长了！

因此，在我们写 HTML 时，通常会把各个标签分行，并且把子元素的标签作缩排，看起来会像这样：

<p>
	<span>哈</span>
	<span>罗</span>
	<span>阿</span>
	<span>嬷</span>
	<span>！</span>
</p>

不过，当我们这样作以後，会发现文字之间出现了奇怪的空格：

这其实是 HTML 换行时，在浏览器上渲染的 bug。无论是 span 或 div 标签，都会发生这个问题。这个问题的解法，是把结束标签的右角号移到下一行，和下个标签连在一起：

<p>
   <span>哈</span
  ><span>罗</span
  ><span>阿</span
  ><span>嬷</span
  ><span>！</span>
</p>

这样就会恢复正常罗！

那就让我们给阿嬷个炫炮的哈罗吧！

<p>
  <span style="font-weight:800; color: purple; text-decoration: underline dashed">哈</span
  ><span style="font-size:20px; color: darkblue; outline: solid 1px">罗</span
  ><span style="font-family:标楷体; font-weight: bold; color: red; text-decoration: overline wavy">阿</span
  ><span style="color: brown; outline: dotted 2px">嬷</span
  ><span style="color: green; outline: double 1px">！</span>
</p>