iT邦幫忙

鐵人檔案

2023 iThome 鐵人賽
回列表
Modern Web

下一代 CSS 解決方案:Master CSS 具增強語法的虛擬 CSS 語言 系列

Master CSS 出自🇹🇼台灣團隊,我們只需要在 HTML 中的標籤元素為其增添類別(class),就能高效構建出使用者介面,接近原生的語法讓 HTML 和 CSS 更加無縫,以增強開發上的體驗降低學習成本。
本系列將介紹 Master CSS 原理與常用語法,你可以先使用原生 CSS 語法熟悉,再逐步開始學習縮寫與速記簡寫, Master CSS 雖有原子化 CSS 的味道,但與 UnoCSS、Tailwind CSS 或 Bootstrap 相比,Master CSS 不僅僅是框架或引擎,而是定位成「增強的 CSS 語言」,各種突破性與創新的概念相信能成為下一代 CSS 解決方案。

鐵人鍊成 | 共 30 篇文章 | 9 人訂閱 訂閱系列文 RSS系列文 團隊啾嚕咕嚕跳起來
DAY 11

Master CSS 的區塊(Block)、彈性盒子(Flexible Box)和網格格線(Grid)切版使用方式

使用 CSS 開始排版切版的時候,我個人習慣使用 div 來開始,不管是要切導覽列、控制面板的,透過排列 div,嵌套 div,最終使用 CSS 來進行排列調整...

2023-09-26 ‧ 由 miru129 分享
DAY 12

Master CSS 設定內距(Padding)與外距(Margin)

當要控制一個元素的內部距離(留白、填充),你可以使用 CSS 的屬性 padding;而要控制元素的外部距離(元素間的距離、邊距),可以使用 CSS 的屬性 m...

2023-09-27 ‧ 由 miru129 分享
DAY 13

Master CSS 的邊框(Border)與外框(Outline)

前言 當要為要元素添加邊框,你可以使用 border 來為元素周圍添加實線或斜線等的邊框,甚至可以指定某個特定方向來做底線等變化,CSS 中也有一個屬性 out...

2023-09-28 ‧ 由 miru129 分享
DAY 14

Master CSS 文字(Font)字體與字型

字型家族(Font Family) 語法:font-family:value / font:value / f:value 範例:font-family:Ari...

2023-09-29 ‧ 由 miru129 分享
DAY 15

Master CSS 背景(Background)與背景圖片(Background Image)

前言 原生 CSS 設定背景所使用的屬性 background,其實是由很多個與設定背景相關的屬性所組成,其屬性如下: background-color...

2023-09-30 ‧ 由 miru129 分享
DAY 16

Master CSS 轉場(Transition)與動畫(Animation)

前言 原生 CSS 在設定轉場或動畫是,常常需要寫又臭又長的 transition 與 animation,在 Master CSS 你除了可以使用原生的寫法外...

2023-10-01 ‧ 由 miru129 分享
DAY 17

Master CSS 響應式斷點(Breakpoints)

前言 隨著可以瀏覽網頁的裝置與各式尺寸越來越多,響應式網頁設計(Responsive Web Design, RWD)已經是現今網站必備的技術之一,如果網站有實...

2023-10-02 ‧ 由 miru129 分享
DAY 18

Master CSS 偽類(Pseudo-classes)與偽元素(Pseudo-elements)

偽類(Pseudo-classes) 在 HTML 中其實並不具有偽類(Pseudo-classes)的概念,偽類實際上是 CSS 中的一個特性,它不是一個實際...

2023-10-03 ‧ 由 miru129 分享
DAY 19

Master CSS 選擇器(Selectors)

前言 在網頁開發的過程中,可能會需要使用到選取器來選取元素中是否有包含某個類別來進行樣式的套用,例如,網頁導覽列中,當頁面切換至該導覽分頁時,路由或套件可能會在...

2023-10-04 ‧ 由 miru129 分享
DAY 20

Master CSS 美化滾動條(Scrollbar)

前言 如果你有在 Windows 或 macOS 的作業系統中瀏覽過你的網站,你可能會發現當網頁出現滾動條時,怎麼兩個作業系統的瀏覽器所呈現的效果會有所不同,你...

2023-10-05 ‧ 由 miru129 分享