在上篇已经完成了HTML也就是网页的骨骼，接下来就是要使用CSS，像捏捏麵人一样在骨骼上把肌肉黏上、衣服穿上、还要再化点妆、弄头髮上髮胶、带个耳环项鍊。

---

首先这是完全没有引用CSS档案的样式，比较一下目标设计的长相

与原先不同的点先列出来

长宽不同圆角字体、颜色两个外框内距、外距排列方式

将这些点列出来之后才会比较清楚知道到底应该调整些甚么，当然如果脑袋好一点或是已经很熟练的人就可以在脑中想想就好， 像我就是脑袋不是很好 。

连结

要在HTML档案中使用、套用、引用额外的CSS档案，需要在HTML档案中head标籤内加上以下内容

    <link rel = "stylesheet" href = "./style.css">

rel 指定 link 的档案种类，href 指定档案名称及位置，所以要取决于你的CSS档案叫甚么名字、放在甚么地方。

在HTML中使用CSS的动作叙述，我不知道哪个叙述比较好所以就都打上来了，如果我说错或是有不一样的见解可以在留言处讨论讨论。

对于档案绝对路径跟相对路径的定义不了解可以参考或是直接google绝对路径、相对路径

另外应该会有一些人像我一样对于link中为甚么是使用href而不是src而困惑，可以参考这篇文章

---

CSS Reset

HTML的各种标籤都会有其预设的CSS样式，字的颜色为甚么是黑色为甚么有框，或是目前已经完成的部分可以看到一个fieldset会补满整行是因为fieldset的预设样式display : block所导致的。

但是你不想特别去查也根本不知道他到底原本预设的是甚么样子，这个时候CSS Reset就很重要了，CSS Reset帮你预先重置了常用的标籤样式，之所以强调常用的，是因为相信有很多还没这么熟的人会想说，我在CSS最前面插一个 * 选择器设定就好啦，像是外距全部设定成 0 :

 *{     margin : 0;        .        .        .     //其他style }

可以，现阶段达成目的了，不过怎么知道有没有改到什么不该改的，怎么知道其他浏览器能不能适用，与其自己伤脑筋debug，还不如直接使用大神整理好最常用而且不会出错的reset，这边使用 CSS 大师 Eric A. Meyer整理的Reset CSS。

CSS

讲这么多终于要开始调整CSS了，内容一样基础的部分就直接略过，对我自己来说是新知识或特殊处理的部分才会做解释。

字体、google font

很多网页会使用不同的字体，实作方法是指定多个字体，从最左边的开始，使用者电脑里没有这个字体就看下一个有没有，通常会设定大部分电脑都有的字体，这样的方法适合对于网页的风格对于字体的要求不高的时候，不管字体怎样都不太影响网页的视觉美观。

font-family: Arial, Helvetica, sans-serif;

假设网页很要求字体需要与网页的风格相符合，推荐使用google font
使用方法很简单只要在HTML head中插入google font给的link并且在CSS写上你要使用的font-family即可。

关于字体也有在网站所在资料夹内存一个字体包的作法，需要在载入网页时先下载字体包，在网速较低的情况载入时间较长导致使用者体验较差，需要小心使用。

CSS选择器

选择器太多样，以下是我自己有纪录到的部分CSS选择器心智图，有些没有写到，使用的免费软体为Xmind

:nth-child( )
其实:nth-child早就知道也用过了，特别抓出来是为了记录even odd的用法，在我想破头要让资料格行换颜色以清楚表示的时候查到的功能。
除了直接填想要第几个之外，在( )中填入even可以选择偶数，填入odd可以选择单数，并且也支援计算算式，如:nth-child(3n)选择第0、3、6、9...个，3n可换成自订的计算算式，但应该是不会有小数点啦。

题外话，当时在even odd哪个是偶数哪个式奇数纠结很久，这边提供一个好记的方法，利用字母数量。
e v e n 四个字母偶数
o d d 三个字母奇数

fieldset legend

在尝试数次对于fieldset与legend的样式做改变之后发现CSS Reset要微调一下，在最上面找到fieldset、legend选择器并删除，让我可以轻鬆的不用算权重更改样式。

legend位置调整
legend位置之所以不好调整是因为第一次使用不知道调整fieldset或legend的padding或margin会不会导致fieldset的框消失，但是在各方尝试之后发现想要让legend左右横移可以调整这样调整

    fieldset legend{        margin-left:20px;    }