阿嬷都看得懂的替 HTML 标签穿上 CSS 样式

今天我们要来介绍排版的核心标签－－div。

div 标签应该是最常用、也最重要的标签了，毕竟区块这个元素很抽象，所以可以放入任何我们想要打包起来的元素。这张图片想和这段说明文字固定放在一起？div 打包。刚刚这个图片搭配图说的文字想和标题固定放在一起？div 打包。

既然 div 这麽重要，就让我们开始写第一个 div 标签吧！

<div></div>

很棒！这样应该就会生出一个区块了对吧？应该会是个胖娃娃长方形吧！
让我们同样存成 .html 档点开来看看：

完全没有画面！完全没有画面！完全没有画面！

为什麽呢？道理很简单，因为我们还没跟浏览器说这个区块的高度 (height)。就算指定了高度，也还没指定背景颜色 (background-color)，所以也还是看不到喔！那麽，我们要怎麽指定高度和颜色这些呢？

还记得昨天我们删除了苹果网页的 CSS，等同於剥光了美人的羽衣霓裳吗？没错，这些样式都是 CSS 决定的。所以我们要开始写第一段 CSS，替我们的网页编织第一件衣服罗！

可能会有点意外，不过我们现在还不需要开新的档案。就好比我们无法想像卤肉饭的温热独立於卤肉饭而存在，我们也无法想像 HTML 标签的样式独立於 HTML 标签而存在。因此，CSS 是可以直接写在 HTML 标签中的喔！那麽，会写在哪呢？当然不会写在左右角号之外，否则就会被当作一般文字罗。另外，并非每个 HTML 标签都成对，因此，CSS 自然就是写在开始标签里面罗。

也就是说，

• CSS 样式是写在 HTML 开始标签的角号之内。
  由於是样式，所以我们会
• 使用 style 这个英文词汇来告诉浏览器，接下来要告诉浏览器这个元素的样式罗！
  不过，在那之前，我们必须先想想，一个 HTML 标签会有很多不同面向的样式－－例如上面提到的，一个区块可能有高度啊、背景颜色等等样式。
• 这些面向我们称作「属性」(property)，而这些属性会有我们给定的「值」(value)－－例如我们会将某个区块元素给定高度 20%，或者给定背景颜色是粉红色，这个 20% 和粉红色，就是高度与背景颜色这两个属性的值。如果某个属性有多个值，这些值之间用空白隔开。我们用冒号 ":" 来连结属性与值，看起来会像这样：

height: 20%

• 这些不同属性与值间，会使用半型分号 ";" 隔开。
• 所有的属性会用一对双引号包裹起来，然後用等号 "=" 与前面的 style 连接。
  整个写法看起来像是这样：

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

终於，我们看见可爱的粉红色长方形区块罗！

这个直接写在 HTML 标签中的 CSS 样式写法，我们称作「行内样式」(inline styles)。

CSS 提供的样式属性千变万化、千奇百怪，而且针对不同类型的标签，能够使用的样式属性也不同。我们在明天 CSS 的介绍中，会介绍最常用、最核心的几种共通样式。期待吗？那就明天见罗！

想一想：

1. 我们在给定宽度与高度时，使用的是百分比符号 %，可是，要有比例，就要有个对照的对象。我们不可能只是说「我要 2% 当奖金」，而必须说「我要我个人当月实收业绩的 2% 当奖金」，或是「我要整间公司当月实收业绩的 2% 当奖金」。那这里的 %，是对照於什麽东西的比例呢？使用比例来给定宽度与高度，又有什麽好处或坏处呢？
2. 如果我们想决定绝对的宽度或高度，而不是相对比例的宽度或高度，又应该怎麽办呢？
3. 指定背景颜色为粉红色时，写 background-color: pink 是很合理，毕竟粉红色的英文词汇就是 "pink"，但是全世界颜色这麽多，我们可能用文字把这些颜色给对应完吗？假使不能，那我们该怎麽办呢？