iT邦幫忙

2021 iThome 鐵人賽

DAY 8
0
自我挑戰組

邊工作邊進行前端學習之旅系列 第 8

[Day 8] 學學CSS,讓網頁增加色彩

前言

基礎架構學習完後,就是將架構妝點得更美觀、豐富,這部分就要依靠CSS來完成啦~
剛開始,替字的顏色變更、背景色彩的改變、加上不同的圖片...等,都覺得豐富有趣,特別是將網頁一步步完成後,並推送到 Github 所直接看到的成果,相信大家都會感到很有成就感吧!
但,隨著練習的版型越來越複雜,容器的間隔、排版,有時又會跑掉,時不時還會直接打掉重練啊!

今天就先來點基礎介紹吧!

我的基礎學習路徑

1.從 MDN 可以學習到 CSS 是什麼、基本結構如何組成,以及選擇器介紹。
2. 在freeCodeCamp,可以依照任務一關一關的練習,同時也能夠再根據題目來觀察它的 HTML 是如何撰寫。

就說說2個重點

  1. 單位:字體大小的設定,相當影響版面看起來的感覺,以及使用者閱讀的感受。剛開始也花了好多時間,在弄清楚單位之間的關係。
    (1) px 絕對長度單位,直接設定調整大小(such as font-size: 12px))
    (2) em 相對長度單位,相對於該元素本身字體大小(font-size 屬性)的值。

麥克的半路出家筆記

/*舉以下 CSS 做計算範例:*/

.container {
 font-size: 20px;
 padding: 1em;
 margin-top: .5em; 
 border-radius: .2em;
}
  • 針對 .container 元素「本身」及其「子元素」(假設子元素皆無設定 font-size 屬性值),1em 單位就是 20px,因此:
    • padding 屬性值為 20px = 1 * 20
    • margin-top 屬性值為 10px = 0.5 * 20
    • border-radius 屬性值為 4px = 0.2 * 20
  1. 權重:剛開使不知道有權重的差別,在 Bootstrap 除了想使用內部原本就有的樣式之外,但還想去客製化想要的邊寬、顏色等等,總是不知道怎麼修改,但知道權重差別後,就可以針對他原本的class名稱,再去增加權重覆蓋掉它原本的樣式。
  • 當有css設定衝突時,你的宣告越特別的設定會越優先。
    閱讀下方圖片:
    • 順序:從上至下,由左至右
    • 每個小圖:說明有含element,class,attribute,ID,這些就是計算權重的依據
    • 小圖的右下角數字:數字愈大權重愈高,層級愈高權重愈高。例如:0 – 0 – 12 的權重會大於 0 – 0 – 2。 0 – 0 – 12 的權重會小於 0 – 1 – 0。
    • 六角學院 - 伸縮自如的 RWD 排版術(上),在 36:45 ,老師有提到一些權重的觀念,也滿清楚的。


上一篇
[Day 7] 初學HTML
下一篇
[Day 9] 練練CSS,「Amos - 金魚都能懂的網頁切版 」實作練習
系列文
邊工作邊進行前端學習之旅30

尚未有邦友留言

立即登入留言