鼠年全马铁人挑战 WEEK 04:人要衣着，佛要金装！用CSS为网页穿上衣服

如果说html是人，css就是衣服。
俗话说:人要衣着，佛要金装。
穿搭得宜，宅男都会变型男无误。

首先我们先在css资料夹下建立一个style.css，
然后在html档的内加入下列，
就可以让html导入在css资料夹下的css档，为网页提供样式。

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

白话文:连结"stylesheet"属性，在"css/style.css"路径的css文件。
而在css内，我们就可以开始指定想要更改样式的地方，
然后将样式改变。

body{  border:red 1px solid;  height: 300px;}

这样我们的body就会被红色的框框圈住。
其中body我们称之为selector（选择器）
接着我们要用{}将declartion包起来，方便浏览器判读，
declartion分为propeerty（属性）和value(数值)，
以上面为例，我们将控制border，让他为1px宽度的实线，颜色为红色。
在写完declartion后，加入 ";"做结尾，
才可再输入下一个declartion。
最后一个declartion不加入";"一样有效果，但是容易出问题，
写完后记得加入";"养成好习惯。很重要很重要很重要，所以说三次。
第二个declartion则是高度300px的意思。
除了上述的指定方法，

我们还可以利用class或id来指定（通常是用class）
方法如下:

.box{   border:red 1px solid;   height: 300px;}

这样则会让class name为box的标籤，
border为红色1px的实线、高度为300px。

#box{   border:red 1px solid;   height: 300px;}

这样则会让id name为box的标籤，
border为红色1px的实线、高度为300px。

我们还可以用一些特殊符号来指定想要的element。
例如：

.box p

class name为box的标籤下的p段落

.box,.list

class name为box和class name为list

.box~.box

**~**是指「下一个」，也就是说
当遇到第一个.sidebar不会有影响，只影响下一个.sidebar

善用css为网页穿上衣服吧！