HTML
Copy
<h1 id="first-title"> 第一個標題 </h1>
<h1 id="second-title"> 第二個標題 </h1>

CSS
Copy
#first-title {
    font-size: 24px;
}

#second-title {
    font-size: 20px;
}

• <h1 class=intro>, <p class=intro> 兩者class相同，但標題與段落要套用不同樣式，要區分就得同時指定標籤和class: h1[class="intro"]、p[class="intro"]，這種selector代表class只能等於"intro"，不能同時有其他class，如果想要表達包含 intro class，則可以使用h1.intro。
• 由於HTML是有階層的，所以CSS選擇器也支援多階層的指定: #main > .subsection1 > p - 選取id為main內部class為subsection1的全部<p>元素，結構上可以想像成:

  HTML
  Copy
  <div id="main">
      <div class="subsection1">
          <p>這是第一段落</p> <!-- 這個會被選取 -->
          <p>這是第二段落</p> <!-- 這個會被選取 -->
  ...

• 當有一個以上的selector想套用同樣的樣式，我們可以透過逗號去分隔他們: selector-1, selector-2 { ...。

CSS
Copy
.container {
    display: flex;          /* 啟用Flexbox */
    flex-direction: XXX;    /* 填入想要的模式 */
}

CSS
Copy
.container {
    display: flex;          /* 啟用Flexbox */
    flex-direction: row;    /* 假定使用row */
    justify-content: XXX;   /* 填入想要的對齊方式 */
}

• flex-start - 將元素靠左對齊。
• flex-end - 將元素靠右對齊。
• center - 將元素置中對齊。
• space-between - 在元素之間平均分配空間，首尾元素靠邊。
• space-around - 在元素之間平均分配空間，首尾元素也會有一半的空間。

CSS
Copy
.container {
    display: flex;          /* 啟用Flexbox */
    flex-direction: row;    /* 假定使用row */
    justify-content: center;/* 假定使用center */
    align-items: XXX;       /* 填入想要的對齊方式 */
}

• flex-start - 元素靠上對齊。
• flex-end - 元素靠下對齊。
• center - 元素垂直置中對齊。
• stretch - 預設值，元素會拉伸以填滿容器的高度，但前提是元素沒有設定高度，如果設定了高度不會改變，整體效果會跟 flex-start 一樣。
• baseline - 元素的基線對齊，這邊讓文字大小不一樣讓效果可以更明顯，可以看到不同區塊的文字是切齊的。

CSS
Copy
$your-selector {                    /* 改成自己的selector */
    font-family: Arial, sans-serif; /* 設定字體 */
    font-size: 16px;                /* 設定字體大小 */
    line-height: 1.5;               /* 設定行高 */
    font-weight: normal;            /* 設定字體粗細，normal為正常粗細 */
}

CSS
Copy
$your-selector {                            /* 改成自己的selector */
    color: rgb(0, 0, 0);                    /* 設定文字顏色 */
    background-color: rgb(255, 255, 255);   /* 設定背景顏色 */
}

• content - 盒子的內容區域，元素實際顯示的文字或圖片，以上圖為例是"Box Model"的區塊。
• padding - 內容與邊框之間的空白區域，又稱內邊距，也就是扣除文字的藍色區塊。
• border - 包圍內容和內邊距的邊框，上圖中的黑色邊界。
• margin - 盒子外部的空白區域，又稱外邊距，用來控制元素之間的距離，上圖中的綠色區域 (那其實是parents的背景)。

• $Y $X - 兩個數值，描述上下與左右的距離。
• $top $right $bottom $left - 四個數值，用順時鐘描述: 上、右、下、左。

• border - 設定元素的邊框，通常包含寬度、樣式 (ex: solid, dashed, dotted) 以及顏色。
• border-radius - 設定元素的邊框的角度，也就是讓background/border看起來是圓角，雖然只是一個小設定，但我覺得可以瞬間讓一個元件好看許多XD，舉例來說: w/o radius、w/ radius。