CSS - 文字

字型

CSS 常用的字型設定：

p {
  /* 設定字型家族 */
  font-family: 'Microsoft JhengHei', Verdana, Geneva, Tahoma, sans-serif;
  /* 設定字體大小 px、em、rem */
  font-size: 20px;
  /* 設定斜體 */
  font-style: italic;
  /* 設定粗體 */
  font-weight: bold;
  /* 設定字體都變成大寫，但第一個字較大 */
  font-variant: small-caps;
}

單位

• px：字型大小以像素為絕對單位。
• em：字型大小參考外層元素為倍數相對縮放尺寸，例如：外層是 10px，子元素 2em 則是 20px，若都沒有會參考 html 為準。
• rem：相對於根元素 (:root or html) 的文字尺寸，預設是 16px，元素設定 2rem 則是 32px。

em 與 rem 都是相對單位

html 或 :root 預設字型大小為 16px。

文字

p {
  /* 設定 inline (包含inline-block)的文字位置，left、right */
  text-align: center;
  /*  none、overline、line-througn */
  text-decoration: underline;
  /* 文字縮排 */
  text-indent: 1.5rem;
  /*  capitalize（每個單字第一個英文字大寫）、lowercase（全小寫）、uppercase（全大寫） */
  text-transform: uppercase;
  /* 水平、垂直、陰影模糊半徑、顏色，可以設定多重陰影 */
  text-shadow: 3px 3px 3px #999;
  /* 英文字母或中文字的間隔 */
  letter-spacing: 1rem;
  /* 單字間隔，要有空格，中文很難有空格，較適合英文。 */
  word-spacing: 1rem;
  /* 文字換行，數字或英文字無空格時會產生不換行超出盒框區域，可用此屬性。 */
  /* break-word 在長單詞或URL地址內部進行換行。 */
}

p {
  /* break-word（過長的單字會自動折到下一行，可避免一江春水向東流。）*/
  word-wrap: break-word;
  /*
   normal(預設，以每個瀏覽器喜好不一定相同，通常保留單字全部)
   break-all(允許在單字的字母換行，也就是不一定要完整的單字)
   keep-all(只能在半角空格或連字符處換行)
  */
  word-break: break-all;
  /*
   normal(忽略空白)
   pre(像pre標籤，保留空白)
   nowrap(不換行，除非有 br，否則不會斷行，會一直顯示超出區塊。)
   pre-wrap(保留空白，但是正常換行)
  */
  white-space: normal;
}

連結

連結狀態的變化使用了 CSS 的偽類，偽類家族有非常多種，連結這四個須注意其出現的順序。

a:link {
  color: red;
  text-decoration: none;
}

a:visited {
  color: gray;
}

a:hover {
  color: green;
}

a:active {
  color: blue;
}