阿嬷都看得懂的开始写第一支 .css 档案罗！

昨天我们介绍了怎麽使用 style 标签，把所有 CSS 样式独立收整到档案最前面。这样做固然更加清楚明晰，但是要上上下下对照这些选择器和标签，也是很麻烦劳心的工作。这样不行啊！不是说工程师都很懒吗？我就是因为这样，才让我阿嬷来当工程师的耶！

没错，所以更多时候，我们连 style 标签都不用，而是会把整个 CSS 都拆出来，变成 .css 的档案。那就让我们先把上面这个档案的 CSS 拆成另个档案吧！我们先把整个 style 标签剪下来，然後贴在另个新的记事本上。同样地，选择储存成所有档案，然後档名就取 "gavagai_style.css" 吧！

等等，那拆出来以後，我原本的 .html 档怎麽知道，它要去哪个 .css 档案找这些 HTML 标签对应的样式呢？我要写些什麽文字，才能告诉浏览器怎麽这个档案呢？

没关系，先不管我们用什麽文字告诉浏览器这个资讯，这段文字应该被渲染出来吗？不应该对吧。这个情境是不是似曾相识呢？

是的，就像前面我们引入 style 这个特殊标签一样，我们又需要引入其他特殊标签罗！这个标签叫作

• link，意思就是连结到其他档案。不过，既然是要连结到其他档案，我们至少必须告诉浏览器
  1. 这个档案在哪里：我们会在 link 标签中，加上 href 字样，并且在後面加上等於以後，再加上想引入档案的位址。href 的 "h" 是 "hyper"，超连结的「超」，只是个炫炮的说法，"ref" 是 "reference"，意思是参考，所以就是请浏览器参考这个位置来找档案的意思。这个档案位址可能是网址，也可能是某个资料夹。
     那麽，如果是想引用某个资料夹中的档案，应该怎麽办呢？让我们对着想引用的档案按右键後，选内容
     
     就可以在「位置」这边看到档案夹的路径罗！
     
     因此，这个档案在 link 标签中的引入方式，就会是

href="D:\铁人赛\06\gavagai_style.css"

没错，不过，当我们把要引入的档案，例如这边的 gavagai_style.css，和引用档案的档案，例如这边的 gavagai.html，放在同个资料夹中时，我们可以偷懒，只写档名就好：

href="gavagai_style.css"

2. 另外，就算浏览器知道去哪边引入档案，浏览器还是不知道这个档案引进来之後要干嘛，所以我们也必须告诉浏览器，这个档案和现在渲染网页的关系是什麽。关系的英文是 relationship，我们偷懒只写前 3 个字母 rel 就可以了。现在引入这个档案，是想当作样式表 (stylesheet) 来使用。因此，我们会这样写

rel="stylesheet"

综合上面这些讨论，我们可以发现，我们的 link 标签长这样：

	<link href="gavagai_style.css" rel="stylesheet">

让我们把这个 link 标签放到 gavagai.html 这个档案的最上方：

<link href="gavagai_style.css" rel="stylesheet">
<div>
	<div class="gavagai">区块一</div>
	<div class="gavagai" style="background-color:violet">区块二</div>
	<div class="gavagai">区块三</div>
	<div class="gavagai">区块四</div>
</div>

储存档案，然後再开启看看，就会发现同样的结果罗！不过整个档案看起来，是不是清爽多了呢？

不知道大家是否有感觉，在今天的讨论过程中，我们逐渐将样式从元件中抽离出来，进行独立的书写与管理。当然，某部分原因是工程师都很懒，不想一直复制贴上。不过，我们也可以思考看看：假使在上面的例子中，我们都还是使用行内样式，不把样式独立成分类，而是每个 div 标签就写一次样式。结果客户突然说，所有区块都需要改成宽高都 80px，而非原本的 100px，这时候，我们就需要改 4 次。那还是因为我们只有 4 个区块喔，如果我们有 100 个区块，我们就需要改 100 次了！不过，因为我们把样式抽离出来，变成分类了，我们就只要改 1 次就搞定了！这样有体会到 DRY 的妙处吗？

工程师都很懒，也因此我们必须很聪明。把不同功能的程序码独立拆开，各司其职，通常是个方便管理、修改、与扩充的聪明方法。

想一想：当我们把被引用的档案 A，以及引用 A 档案的档案 B，都放在同个资料夹时，我们可以直接在 B 里面，写上 A 的档名，电脑就会知道要找同资料夹中，档名为 A 的档案。这种方法不写出完整路径，而是相对着档案 B 所处的资料夹。那麽，我们是否可以有其他相对的方式，来更方便地引用档案呢？例如，如果档案 A 是放在档案 B 的上一层资料夹，或者下一层资料夹，我们是否也有这种相对路径的档案引用方式？