如果你是採取 CDN 載入 Master CSS 並開始使用，應該會發現在官方安裝的指引中，index.html 程式碼如下：
<head>
...
<link rel="stylesheet" href="https://cdn.master.co/normal.css@beta">
<script src="https://cdn.master.co/css@beta"></script>
</head>
其中 head 中的 link，包含了下載 normal.css 這個 CSS 檔案，正如檔案名稱 normal（標準的、正規的），官方提供了一套預設的樣式，用以設定網頁中的全域樣式，主要目的在於消除與標準化各大瀏覽器 Chrome、Safari 及 Firefox 等及其使用的排版引擎（Blink、WebKit 及 Gecko 等）預設的樣式，讓大家的起跑點都是統一乾淨的，如同 Tailwind CSS 也有 Preflight 的基礎樣式，目的都是讓後續樣式的編排能更加的整潔一致。
下面將介紹幾個預設樣式，當然你也可以直接使用 normal.css，甚至不需要知道它背後的程式碼與行為，完整的 CSS 內容可以參考這裡。
* {
text-rendering: geometricPrecision;
}
body {
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
}
body {
-webkit-tap-highlight-color: transparent;
}
* {
border: 0 solid;
}
body, blockquote, dl, dd, h1, h2, h3, h4, h5, h6, hr, figure, p, button, optgroup, select, textarea, pre {
margin: 0;
}
td, legend, textarea, input, fieldset {
padding: 0;
}
ul, ol {
margin: 0;
padding: 0;
}
body, blockquote, dl, dd, h1, h2, h3, h4, h5, h6, hr, figure, p, button, optgroup, select, textarea, pre {
margin: 0;
}
td, legend, textarea, input, fieldset {
padding: 0;
}
ul, ol {
margin: 0;
padding: 0;
}
*, ::before, ::after {
box-sizing: border-box;
}
body {
line-height: 1.2;
text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
-moz-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
-moz-tab-size: 4;
tab-size: 4;
}
b, strong {
font-weight: bolder;
}
small {
font-size: 80%;
}
sub, sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
}
ul {
list-style: none;
}
hr {
height: 0;
color: inherit;
}
img, svg, video, canvas, audio, iframe, embed, object {
display: block;
}
你可能會想，那我想設置品牌的主體顏色、前景色，甚至是字體還需要再去編寫 CSS 檔案嗎？答案是不用，你可以在 <body class=""> 添加語法，透過繼承的行為或 CSS 選擇器，來設定全局樣式或旗下所有子元素的基礎樣式。
你可以透過 CSS 的繼承行為來統一整個網頁的字體樣式 sans，包括標題、文字。
<body class="font:sans">
甚至結合選擇器，可以將網頁內的所有的 code 與 pre 元素，套用 mono 字體。
<body class="font:sans font:mono_:where(code,pre)">
我們簡述一下前端工程師可能都具備概念，CSS 的特異性（Specificity），講得直接一點就是樣式權重，CSS 樣式有不同的選擇套用方法，也具有前後關係，樣式的權重間接影響了最終呈現的效果，它的規則與排序權重由高至低共有六種等級。
!important，至高無上不容侵犯* 全域通用選擇器因為樣式權重的關係，Master CSS 建議使用選擇元素和預設樣式，主要是其特異性為零。
舉例來說，你可以為 下所有 元素添加紅色下劃線：
<article class="text-decoration:underline|red|1.5_:where(a)">
<a>我將擁有下劃線</a>
</article>
從今以後，你也不再需要聲明 !important，就可以輕易地刪除特定元素的下劃線
<article class="text-decoration:underline|red|1.5_:where(a)">
<a class="text-decoration:none">我失去了下劃線</a>
<a>我將擁有下劃線</a>
</article>
iThome鐵人賽
看影片追技術