Master CSS 出自🇹🇼台灣團隊,我們只需要在 HTML 中的標籤元素為其增添類別(class),就能高效構建出使用者介面,接近原生的語法讓 HTML 和 CSS 更加無縫,以增強開發上的體驗降低學習成本。
本系列將介紹 Master CSS 原理與常用語法,你可以先使用原生 CSS 語法熟悉,再逐步開始學習縮寫與速記簡寫, Master CSS 雖有原子化 CSS 的味道,但與 UnoCSS、Tailwind CSS 或 Bootstrap 相比,Master CSS 不僅僅是框架或引擎,而是定位成「增強的 CSS 語言」,各種突破性與創新的概念相信能成為下一代 CSS 解決方案。
使用 CSS 開始排版切版的時候,我個人習慣使用 div 來開始,不管是要切導覽列、控制面板的,透過排列 div,嵌套 div,最終使用 CSS 來進行排列調整...
當要控制一個元素的內部距離(留白、填充),你可以使用 CSS 的屬性 padding;而要控制元素的外部距離(元素間的距離、邊距),可以使用 CSS 的屬性 m...
前言 當要為要元素添加邊框,你可以使用 border 來為元素周圍添加實線或斜線等的邊框,甚至可以指定某個特定方向來做底線等變化,CSS 中也有一個屬性 out...
字型家族(Font Family) 語法:font-family:value / font:value / f:value 範例:font-family:Ari...
前言 原生 CSS 設定背景所使用的屬性 background,其實是由很多個與設定背景相關的屬性所組成,其屬性如下: background-color...
前言 原生 CSS 在設定轉場或動畫是,常常需要寫又臭又長的 transition 與 animation,在 Master CSS 你除了可以使用原生的寫法外...
前言 隨著可以瀏覽網頁的裝置與各式尺寸越來越多,響應式網頁設計(Responsive Web Design, RWD)已經是現今網站必備的技術之一,如果網站有實...
偽類(Pseudo-classes) 在 HTML 中其實並不具有偽類(Pseudo-classes)的概念,偽類實際上是 CSS 中的一個特性,它不是一個實際...
前言 在網頁開發的過程中,可能會需要使用到選取器來選取元素中是否有包含某個類別來進行樣式的套用,例如,網頁導覽列中,當頁面切換至該導覽分頁時,路由或套件可能會在...
前言 如果你有在 Windows 或 macOS 的作業系統中瀏覽過你的網站,你可能會發現當網頁出現滾動條時,怎麼兩個作業系統的瀏覽器所呈現的效果會有所不同,你...