嘿嘍
在前幾章中,我們有預告今天要來和大家玩 CSS(本人也是初學,有錯請各位大師改正一下謝謝)
本次主題,會分成三個階段,分別是,「概念」、「實作」、「進階」請大家拭目以待。
CSS( 階層樣式表 , Cascading Stylesheets 簡稱 CSS。)是一個負責幫忙管理頁面的美感
設計,簡單來講,就是幫忙美化網頁的,不讓網頁看起來平平無奇、沒有靈魂。
也可以把它想像成人類的化妝品,用來點綴人類的臉蛋,當然每個人對美的說法都不一致,所以
你學 CSS 也可以鍛鍊你的美感(本人是蠻喜歡美術的啦XDD)你看,一舉兩得,多好。在這邊跟大家講,我不用講大家應該也知道,就是 CSS 不是程式語言!!我有很長一段時間一直以為
CSS 是個程式語言XDD,但 CSS 是標誌語言喔!(這可能就是沒學好 CSS 的後果吧)而目前 CSS 已經發布到第三版同時也是目前最廣為使用的版本,因此大家常聽到的 CSS3 其實就是指第三版的 CSS 喔!
在上程式碼之前,先跟大家講一下,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>
輸出如下:
(粉色有點看不見請見諒)
所以我們可以從上面知道,CSS 的層級分別是 inline style > id > class
那如果想要讓所有的文字同個顏色怎麼辦?只須加一個!important
即可:
輸出就會像這樣:
很酷對吧?~
今天我們講了一點點的概念,還示範了 CSS 最基礎的程式碼,下一章我們將會揭開它的
過去,請敬請期待(順便說一下這整個主題的章節有 4 + 番外,很多請慢慢等待)