iT邦幫忙

2023 iThome 鐵人賽

DAY 5
0
自我挑戰組

從零開始學習前端系列 第 5

#從零開始4️⃣:使用CSS Reset & CSS Normalize

  • 分享至 

  • xImage
  •  

CSS Reset:清掉所有預設樣式

CSS Reset 是一種可以清除所有預設樣式的方法,讓我們可以從頭開始自訂樣式。也就是會將所有 HTML 元素的邊距、填充、字體大小等屬性都設置為零,以消除瀏覽器預設樣式對網頁外觀的影響。這使我們能夠完全掌控網頁的外觀和排版,但我們需要自己定義每個元素的樣式,以確保它們呈現我們所需的外觀。

CSS Normalize:保留部分樣式

相對於 Reset,CSS Normalize 的方法不是完全清除所有樣式,而是在不同瀏覽器之間進行一些樣式的標準化。包括調整不同瀏覽器的字體大小、列表樣式、表格樣式等,來確保它們在各種瀏覽器上保持一致。同時,Normalize 也允許在不同裝置大小下保持樣式的一致性,並減少需要自行定義的樣式數量。這使開發變得更加方便,並提供了一個較為一致的基礎。

使用 Reset 還是 Normalize

在選擇使用 Reset 還是 Normalize 時,開發人員需要考慮項目需求和個人偏好。如果需要更多的自定義和個人化調整,那麼使用 Reset 可能更合適。然而,如果希望在不同瀏覽器中實現更一致的預設樣式,並減少需要自行定義的樣式量,那麼使用 Normalize 可能更為適合,因為它提供了一個更統一的基礎,減少了跨瀏覽器的兼容性問題。選擇 Reset 還是 Normalize 取決於具體需求和開發流程。

💡分享:不管是使用 Reset 還是 Normalize,希望之後能寫出一套自己的版本XD 感覺需要一定時間沉澱和累積!


上一篇
#從零開始3️⃣:引用外部資源-link
下一篇
#從零開始5️⃣:使用padding和margin
系列文
從零開始學習前端31
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言