在上一章中，我們研究了網頁應用程式裡 HTML 的各種標籤。接著我們先來看一下我們打開瀏覽器後，為什麼頁面會長成那個樣子。
在 <style> 這個標籤裡，有好幾段類似的區塊，我們挑了這個精簡過的片段做為範例：
body {
font-family: "Helvetica Neue", Arial, sans-serif;
background-color: var(--primary-color);
color: var(--text-color);
margin: 0;
padding: 20px;
display: flex;
justify-content: center;
}
每一個片段，可以分成這兩個部份：選擇器與樣式
選擇器 {
樣式
下一個樣式
更多的樣式
}
選擇器表示我們選中哪些 HTML 標籤代表的東西，我們把它們叫元素，被選中的元素(們)，就會套用下方列出來的樣式。
要特別提一下，CSS 選擇器不只在外觀樣式的部份有用，之後在 JavaScript 程式運作的部份，也總是會用到 CSS 選擇器來找到畫面上的元素，進而操作這個元素。
在上方的例子裡，我們選中了 <body> 元素，包括他裡面包住的所有內容，都會套用花括號裡面的樣式。這裡列出了字型 (font-family)，背景顏色(background-color), 字體顏色(color), 邊界距離 (margin), 內邊距 (padding), 流動佈局排版(display: flex), 及水平置中 (justify-content: center)。
英文字母開頭的是標籤選擇器, 也就是列出來的標籤元素會被套用。除了 body 之外，h1, h2 表示<h1>以及<h2>都會套用這些樣式。
句點(.)開頭的，是class選擇器,表示在 HTML 標籤上，有對應的 class=屬性的標籤元素，就會被選擇到。舉例來說 .container 選擇器，會選到所有標籤上有 class="container" 的元素。
由於一個標籤可以有多個 class 屬性，所以像是 class="aaa container bbb"屬性的元素也會被選到。
井字號(#)開頭的，是id選擇器,表示在 HTML 標籤上，有對應的 id=屬性的標籤元素，就會被選擇到。舉例來說 #balance 選擇器，會選到標籤上有 id="balance" 的這一個元素。
在HTML的規範中，同一張網頁裡，不能有重覆的 id 屬性，所以只會有一個。
.summary > div 這種在中間有 > 的選擇器，會選到有class="summary"屬性的標籤底下所有第一層的 div 元素。
但如果是 .history-table td，那麼會選到被有 class="history"屬性的標籤包住的 td 元素，不管第幾層
還有更進階選擇器的 :hover、:nth-child()，就跟 AI 討論一下是什麼功能吧。
CSS 樣式非常多且繁雜，只要知道跟字型、顏色、位置、動畫有關的幾乎都可以靠 CSS 樣式處理就行了。比較重要的有底下幾個關鍵字：
display: flex是流動佈局排版，可以依規則自動調整元素的大小、排列的方向。更複雜一點的有display: grid這種表格佈局排版。
而現今最常見的需求，就是會自動依不同的螢幕大小，改變元素的佈局方式的響應式佈局(Responsive Layout)，用這個關鍵字請 AI 生給你就好了。
注意上面手機跟平台在總額那個區塊的顯示不一樣，這就是 Responsive。
iThome鐵人賽
看影片追技術