經過前幾天HTML的轟炸之後，今天要開始說CSS了!
他是Cascading Style Sheets(層疊樣式表)的縮寫。
他是用來把HTML變漂亮的東西，也有他自己的語法。
像是在tag裡面偶爾會看到的style，或是<head>會出現的<style>，裡面放的都是CSS。
今天會簡介一下CSS的架構跟大概要怎麼設，之後則會說一些常見的CSS屬性。
基本上一個網頁要是沒有CSS會看起來單調而且沒設計感(就只是一行一行下來沒有側欄什麼的感覺)；而有了CSS會讓你的網頁很豐富，尤其是學會排版之後。又如果會JS(JavaScript)，那網頁可以做出一點動態的效果，會更有趣，但是我們不會提及XD
首先我們先假設我們有一個HTML長這樣:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
<div class="c">class test</div>
<div id="i">id test</div>
<span>tag1</span>
<span>tag2</span>
</body>
</html>
呈現出來會長這樣:
你會看到上面的tag有一些屬性是你不知道的:class、id。
他們就是一個可以在CSS會用到(JS也有可能用到)的屬性，我們要來講一下他們的不同:class:一個類別，在CSS中以.表示，可以把這個類別套用在任何標籤上(當然那個標籤能不能用那就是另一回事了)。id:一個獨一無二的名字，在整個HTML一個id只能出現一次，在CSS中以#表示。
好那現在我們來看看怎麼用CSS裝飾上面那個HTML吧!
.c {
color: blue;
}
#i {
color: red;
}
span {
color:green;
}
把它加上去之後再看一次網頁，他會變成:
再回來看上面的CSS。
剛剛說.代表的是class，所以第一行就是說修飾c這個class，修飾的內容就是大括號的內容:顏色設為藍色；而#代表的是id，所以下一個區塊#i就是說把id為i的元素的顏色設為紅色；再來最後一個區塊既沒有#也沒有.，他是直接修飾那個tag，會套用到全部的tag，以這邊為例就是把顏色變成綠色並套用到所有的span(那是兩個span喔還記得之前說span是不佔一整行的，而div會)。
(至於那個color的詳細部分，就等明天再說了~)
接下來我們來仔細看一下上面的CSS語法，可以總結出結論:
;(但是大括號結束不用)，也很像程式。今天講得差不多就是CSS的基本語法了。
而那個分號嘛...件要加，雖然HTML是很寬鬆的，但是他也不會告訴你錯哪，所以可能不知道為什麼CSS跑不出來結果是因為大括號弄錯或分號沒加，那就會很想捶電腦XD(by Python使用者)
話說我每天花這多時間在鐵人賽，段考似乎要爆了XD
沒關係鐵人賽的優先程度顯然遠大於段考~
iThome鐵人賽
看影片追技術