# 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 + 番外，很多請慢慢等待）