iT邦幫忙

鐵人檔案

2024 iThome 鐵人賽
回列表
Modern Web

一個人的朝聖:重啟對 CSS 的認識 系列

每年的鐵人賽,廣義的對我來說也算是一種朝聖之路
一場身心靈的考驗,必須面對興奮、無聊、挫折、疲乏等情緒的到來

回顧在學習成為前端路上,CSS 好像是那個"覺得有趣"的契機點
也許就是這個分歧點,造就現在這個宇宙的產生,也因此有一個此刻 2024/09/15 8:15 正趕著報名鐵人賽的我

沒辦法回到當初的分歧點,但想試著讓自己重頭學習 CSS
在這條曾經匆匆走過的路上,重新尋找新的事物

不為什麽 CSS 考題大全或是什麽面試必考
單純為有趣、為自己而寫

接下來的 30 天預計照著 web.dev 的 Learn CSS 課程,重啟對 CSS 的認識!

鐵人鍊成 | 共 30 篇文章 | 0 人訂閱 訂閱系列文 RSS系列文
DAY 1

[前言] 重啟 CSS 朝聖之路

為什麽而寫 『 為自己、為有趣、為求知而寫 』 回顧在還沒成為工程師時,五個半月充實學習的路線圖:HTML -> CSS -> JS -> j...

2024-09-15 ‧ 由 shan33 分享
DAY 2

Box Model

概念 在 CSS 的世界中,所有東西都是以 box 的形式 顯示在畫面上,一段普通的文字甚至是一個套用 border-radius 而長得像圓的元素,它們的本質...

2024-09-16 ‧ 由 shan33 分享
DAY 3

Selectors

概念 想用 CSS 替元素更改樣式,得先要"選"到目標,才能套用我們所撰寫的規則,而其中"怎麼選",就是使用到 CSS...

2024-09-17 ‧ 由 shan33 分享
DAY 4

The cascade

概念 CSS 代表的是 Cascading Stylesheets而 cascade 是指 當同一個元素被套用的 CSS 規則有衝突或相抵觸時,要如何處理 ca...

2024-09-18 ‧ 由 shan33 分享
DAY 5

Specificity

概念 每一個 selector 都會得到一個分數,而 specificity 就是加總每一個 selector 的分數,套用最高分的那組 CSS 樣式。實務上在...

2024-09-19 ‧ 由 shan33 分享
DAY 6

Inheritance

概念 <html> <body> <article> This article has<p&g...

2024-09-20 ‧ 由 shan33 分享
DAY 7

Color

概念 可以用很多種形式來設定顏色 1. Numeric (數值) Hex 以 16 進位表示 RGB 三原色,共六位數 h1 { color: #b7154...

2024-09-21 ‧ 由 shan33 分享
DAY 8

Sizing Units

概念 網頁可能會在任何尺寸的裝置上被瀏覽,要如何設定適合的行數或是字體大小才好閱讀? 例如: ch 這個單位,代表 0 這個字元的寬度,設定內容時會用 0 字元...

2024-09-22 ‧ 由 shan33 分享
DAY 9

Layout

概念 display display 屬性做兩件事: 決定這個 box 要像 inline 還是 block 一樣排列 決定子元素的排列方式,例如:displ...

2024-09-23 ‧ 由 shan33 分享
DAY 10

Flexbox

概念 Flex 排版的特色: 能用以欄或是列的方式呈現 可換行 item 不用照著 DOM 中的順序,可以重新排列 item 大小可隨著父層改變 建立一個...

2024-09-24 ‧ 由 shan33 分享