iT邦幫忙

2025 iThome 鐵人賽

DAY 3
0

昨天有了 HTML 骨架,但如果只有純文字,網頁看起來就像是一份黑白文件。今天要來學的是 CSS(Cascading Style Sheets),它負責「美化網頁」,就像替網站穿上衣服。

舉個例子:假設我的標題
https://ithelp.ithome.com.tw/upload/images/20250917/201683648zuq2CPguy.png

我可以用 CSS 改變它的顏色、大小和位置:
https://ithelp.ithome.com.tw/upload/images/20250917/20168364DkBbtRgoCa.png

執行後的結果:
https://ithelp.ithome.com.tw/upload/images/20250917/20168364VfGhMUCga5.png


也可以改變背景顏色:
https://ithelp.ithome.com.tw/upload/images/20250917/20168364akXvhPPZZv.png

執行後的結果:
https://ithelp.ithome.com.tw/upload/images/20250917/20168364GWIntDqApT.png


為了讓我自己比較容易看清楚程式碼,我不是在HTML加上CSS,而是新增了一個style.css檔,將為了設計美化的程式碼統一放入,才不會太凌亂。所以在index.html裡記得加上這段程式碼
https://ithelp.ithome.com.tw/upload/images/20250917/20168364OR1NwFBbqY.png
這樣程式碼執行後,css的內容才可以被呈現出來。


CSS 的三大核心是:

  • 選擇器 (Selector):決定要套用樣式的元素,例如 h1、.class、#id。
  • 屬性 (Property):控制內容的樣子,例如 color、font-size。
  • 值 (Value):屬性的具體設定,例如 red、20px。

上一篇
HTML基礎 – 打造網頁骨架
系列文
打造專屬於歌手的音樂資訊網頁:從零開始的前端實作與技術分享3
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言