---
# System prepended metadata

title: Day 24 阿嬤帶你探索 CSS！（1）

---

# Day 24 阿嬤帶你探索 CSS！（1）

嘿嘍

在前幾章中，我們有預告今天要來和大家玩 CSS（本人也是初學，有錯請各位大師改正一下謝謝）
本次主題，會分成三個階段，分別是，「概念」、「實作」、「進階」請大家拭目以待。

## CSS 的世界

CSS（ 階層樣式表 , Cascading Stylesheets 簡稱 CSS。）是一個負責幫忙管理頁面的美感
設計，簡單來講，就是幫忙美化網頁的，不讓網頁看起來平平無奇、沒有靈魂。
也可以把它想像成人類的化妝品，用來點綴人類的臉蛋，當然每個人對美的說法都不一致，所以
你學 CSS 也可以鍛鍊你的美感（本人是蠻喜歡美術的啦XDD）你看，一舉兩得，多好。在這邊跟大家講，我不用講大家應該也知道，就是 CSS 不是程式語言！！我有很長一段時間一直以為
CSS 是個程式語言XDD，但 CSS 是標誌語言喔！（這可能就是沒學好 CSS 的後果吧）而目前 CSS 已經發布到第三版同時也是目前最廣為使用的版本，因此大家常聽到的 CSS3 其實就是指第三版的 CSS 喔！

#### style attribute(inline style)

在上程式碼之前，先跟大家講一下，CSS 也是有很多不同的寫法，這邊就不一一列出來了，
而我們這個主題的程式碼，大部分都會使用這個方法來寫，為什麼呢？原因就是因為簡單又最直觀的
寫法，誰會不喜歡簡單的寫法呢？所以本人才會選它，回到剛剛，我們剛剛不是有說 CSS 有層級之
分嗎，我就直接亮出程式碼了：

```
<!DOCTYPE html>
<html>
<head></head>
  
<style>
  .york{
    color: pink;
  }
  #s {
    color: purple;
  }
  </style>
  
<body>

  <p class="york">Joanne是美女</p>
  <p class="york" id="s">恩欣是阿婆</p>
  <p class="york" id="了解" style="color: blue;">Joanne 是世紀無敵大美女</p>
</body>
  
</html>
```

輸出如下：

![](https://i.imgur.com/cSZAC4Y.png)

`（粉色有點看不見請見諒）`

所以我們可以從上面知道，CSS 的層級分別是 inline style > id > class
那如果想要讓所有的文字同個顏色怎麼辦？只須加一個`!important`即可：

![](https://i.imgur.com/5V92OlJ.png)

輸出就會像這樣：

![](https://i.imgur.com/MXJuAo5.png)

很酷對吧？～

## 小總結

今天我們講了一點點的概念，還示範了 CSS 最基礎的程式碼，下一章我們將會揭開它的
過去，請敬請期待（順便說一下這整個主題的章節有 4 + 番外，很多請慢慢等待）




































