iT邦幫忙

2022 iThome 鐵人賽

DAY 24
0
自我挑戰組

50後阿嬤教你寫程式!系列 第 24

Day 24 阿嬤帶你探索 CSS!(1)

  • 分享至 

  • xImage
  •  

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>

輸出如下:

(粉色有點看不見請見諒)

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

輸出就會像這樣:

很酷對吧?~

小總結

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


上一篇
Day 23 阿嬤帶你探索 HTML!(下)
下一篇
Day 25 阿嬤帶你探索 CSS!(2)
系列文
50後阿嬤教你寫程式!30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言