第四篇讀書計畫的主題還是CSS。

正式進入 CSS 後，會花費大約一個半月的時間去刷這個網站的內容，所以接下來的文章都會是以這篇網站的內容學習為主。

若對CSS沒有太大興趣的話，可以直上替代方案: CSS Cheatsheet + 標準語法糖 - w3schools。

此系列的文章都是屬於本人先將網站內容消化過再總結紀錄，但如果內容太長的話…就會只挑自己覺得重要的跟要提醒的紀錄。

感覺…，憑著這股奮力往前衝的氣勢，刷CSS這些知識也許有望刷完唷(X)，雖然在後面的篇章看一看覺得很乏味，不小心買了 Unity課程，載了 Unity (X)，但我還是會努力刷完這些知識的Q.Q。

CSS 讀書項目

• HTML/CSS
  • [HTML] Cheatsheet
  • [CSS] Learn CSS - web.dev 搭配 TailwindCSS 搭配 MDN (每天慢慢看可能也要個一個月吧，算很扎實)
  • [CSS(替代方案)] Cheatsheet + 標準語法糖 - w3schools (如果對CSS沒興趣，可以直接這項簡單帶過)
  • [CSS] 搭配 Hackerrank 證照題目交互學習
  • [CSS] 41 CSS 面試題目 (選擇擺在這看或者移到最後皆可)
  • [CSS] 看 創意構想 有2個影片 (滿滿的知識)
  • (Pending) [CSS] 了解 Canvas, WebGL, SVG, CSS 3階層樣式表 or three.js，了解一下就好，不用太深入
  • [Front-end] 簡單了解一些CSS框架 TailwindCSS, Sharon UI

詳請可參考完整讀書計畫目錄

Table of Content 內容

• CSS
  • Color
    • Where to use color in CSS rules
    • Numeric colors
    • Color Keywords
  • Sizing Units
    • ch
    • Number
    • Percentage
    • Dimensions and lengths
    • Miscellaneous units

CSS

Color

探討過css樣式的優先度計算後，此篇當進到色彩與尺寸大小，和css樣式屬性較爲相關連的內容。

Where to use color in CSS rules

在網站內容的最下方，但我決定將它移動到上方先解釋。

只要是 屬性的值 data-type 為 color 的值欄位都可以放 color值，所以相關的屬性:

• color: 文字
• text-shadow
• text-decoration-color
• border
• border-color
• background-color 或 background: 背景顏色

都可以，然後 color 也可以使用各種漸層效果，像是 linear-gradient，這個會在之後的篇幅特別有一篇介紹。

那麼定義或形成顏色的值主要兩大項幾個小項目

• Numeric colors (由數字、英文字組成)
  • Hex colors
  • RGB (Red, Green, Blue)
  • HSL (Hue, Saturation, Lightness)
  • …
• Color Keywords (該英文單字對應一個固定的顏色)

Numeric colors

在此項目內容中，有介紹三種模式組成顏色，分別是以下

• Hex colors
• RGB (Red, Green, Blue)
• HSL (Hue, Saturation, Lightness)

但我後來去翻文獻時，我發現還蠻多調整顏色的模式。

詳細可以看這篇文章

像本人有接觸到彩妝，就有接觸過HSL，以及與設計師好朋友的聊天內容，也接觸過 CMYK，不過還有很多種不同調顏色的模式，所以詳細狀況，還是要看需求而定。

今天先針對三種介紹。

Hex colors

通常由 6位數 或者 8位數 的 0-9跟A-F數值組成，他們會被翻譯成RGB原始三元素。

• 6位字組成一個顏色，例如: #b71540、#60a3bc、#f6b93b
• 8位字也就是原本6位字的顏色加上額外2位可以顯示他的透明度，例如: #00000080 (黑色, 透明50%)、#000000BF(黑色, 透明75%)

網路上都蠻多Hex colors網站可以慢慢選，我倒是覺得不用特別去記怎麼計算。

RGB (Red, Green, Blue)

怎麼可以缺少色彩學大神RGB三元素呢。

通常會用函式 rgb()包裹，內含三個值(紅綠藍) 0~255 或 百分比%顯示，例如

• rgb(255, 255, 255) or rgb(100%, 100%, 100%).
• rgb(113, 221, 101) or (%數我不知道XD).

那如果要調透明度的話，有兩種方式

• 保持使用 rgb(): 需要新增 / 在函式內，比方說: rgb(0 0 0 / 50%) or rgb(0 0 0 / 0.5)
• 改用 rgba(): rgba(0, 0, 0, 50%) or rgba(0, 0, 0, 0.5)

兩者都能增加透明度。

HSL (Hue, Saturation, Lightness)

h1 {
  color: hsl(344, 79%, 40%);
}

HSL 代表色調、飽和度跟明亮度，通常我比較常在彩妝或者服飾穿搭上看到相關的名詞，css上很少遇到這個案例。

使用 hsl() 函式包裹

• Hue (色調) - 值為 0-360度
• Saturation (飽和度) - 0% ~ 100%
• Lightnextt (明亮度) - 0% ~ 100%

那一樣如果要定義透明度 alpha，跟rgb很相似，兩種方式:

• 同樣使用 hsl() - hsl(0 0% 0% / 50%) or hsl(0 0% 0% / 0.5)
• 改用 hsla() - hsla(0, 0%, 0%, 50%) or hsla(0, 0%, 0%, 0.5)

Color Keywords

再來是有命名的顏色，目前看文章是寫有148種顏色在css是有直接用英文命名的。

有興趣在自己看網站列出的顏色命名表。

最後特別介紹兩個單詞

• transparent: 這個是代表一個完全透明的顏色
• currentColor: 這個詞指的是現在的顏色，比方說如果 color設 red，那你 border-color 填 currentColor，則 border-color 也會是 red。

Sizing Units

Sizing Units 這個章節介紹的內容跟上一篇文章的小課程內容相關，主要是介紹各個css屬性值的不同尺寸單位。

那麼因應CSS跟響應式網站的發展，前端網頁設計的技術會越來越精緻，從原本常見的 px 去調整各個空間、文字的絕對大小，到後來延伸出 rem, % 之類的單位依據 子元素 或 default數值 為基準放大縮小因應響應式設計，究竟有多少不同的單位呢？會在此篇介紹。

• ch
• Number
• Percentage
• Dimensions and lengths
  • Absolute lengths
  • Relative lengths
  • Viewport-relative units (?)
• Miscellaneous units
  • Angle units
  • Resolution units (?)

ch

雖不明白為什麼開場用 ch 這個單位，但確實好像也不知道這單位該屬於哪個分類，那就從 ch 開始講起吧。

• ch 這個單位是指等同一個字元 0 的 寬度大小，你可以使用 ch 來度量 width，假設 70ch 則為等同 70個 0 字元的寬度。

範例:

h1 {
  font-size: 3.5rem;
  line-height: 1.2;
  max-width: 15ch;
}

p {
  font-size: 1.25rem;
  max-width: 70ch;
}

這特別運用在某些文章需要固定寬高的情況下，如果想用的是文字的寬度為尺寸，比方說寬度限定40個英文字，而不是固定的 px 或 cm 這種尺寸時的場景。

Number

基本上，大部分的css屬性的值都是使用數字作為單位，像是 opacity(透明度)、line-height(行高)、rgb(color色彩)，有的是用整數(1,2,3…,100)有的是小數(0.1, 0.2,…)

範例

p {
  font-size: 24px;
  line-height: 1.5;
}

其中 1.5 這個小數指的是放大 150% 倍的 <p>尺寸，所以假設原本字的大小是 24px放大後變成36px。

其他案例

• filter: sepia(0.5) -> 50% sepia filter to the element.
• opacity: 0.5 -> 50% 透明度
• rgb(50, 50, 50) -> 各 50 的 R, G, B 色彩 (0-255)
• transform: scale(1.2) 放大元素 120% 大小

Percentage

除了用數字去精準訂定尺寸之外，還可以使用百分比作為尺寸單位。

div {
  width: 300px;
  height: 100px;
}

div p {
  width: 50%; 
}

假設 div 長跟寬 分別是 100px 跟 300px，那 div 下的文字段 p 就會是寬度*50% -> 150px 寬。

除了長寬以外，transform: translateX、剛剛列舉的透明度、跟其他元素也能使用百分比作為單位。

但需要注意的是 (我還沒查證過XD)，使用百分比作為單位時%，要注意子元素或者初始值(default)有沒有先設原先的數值，如果沒有那就算寫多少百分比，也會沒有效用。

Dimensions and lengths

再來就是更多單位的介紹，分為

• Absolute lengths (絕對)
• Relative lengths (相對)

更詳細的介紹可以直接點網站查看。

Absolute lengths (絕對長度) 包括像是常用得 px，還有 cm、mm…等許多不同的尺寸標示具體的固定的大小，比方說cm就是標記具體的幾公分，px也是早期蠻常被使用做固定長寬大小的單位。

但隨著響應式網站的需求增多，很多新設計的網站比較少使用這類型的絕對長度來訂定尺寸，因為當網頁縮放不同的裝置 (大螢幕的網站、中螢幕的網站、不同尺寸的平板及不同尺寸的手機)時，這類型寫固定(寫死)的單位就變得很不靈活。

因此，現在大部分都使用相對長度的單位來訂定尺寸。

Relative lengths (相對長度)

• Font-size-relative units (字體大小相對單元)
• Viewport-relative units (視圖大小相對單元)

(中文真不知道怎麼翻比較好)

相對長度跟絕對長度不同，絕對長度通常是寫固定的大小，比方說3cm 或者 20px(Pixels)，而相對長度大多是以比方說一個單字的大小或者父元素的基準為縮放。

假設以rem舉例，如果根元素(root element)的字大小(font size) 為 16px，那麼 1rem = 16px，2rem = 32px 以此類推。

相對長度(Relative lengths)又分為Font-size跟Viewport兩種相對單元。

1. Font-size-relative units

開頭的 ch 就是一種相對長度，因為他並沒有寫死固定為幾公分，而是透過一個文字的寬度做定義，所以1ch等同一個字的寬度，而2ch等同兩個字的寬度。

我本人比較常看到的是 rem 跟 em，尤其現在熱門的css框架 TailwindCSS 就是使用 rem 作為單位，而這類型的相對尺寸是基於根元素(root element)的初始值去縮放其絕對長度。rem的計算上面有提及了就不再寫一次啦。

更多的Font-size-relative單位可以查看web.dev網站內容

2. Viewport-relative units

這個單元我比較不熟，比較少看到。

解釋的話是運用瀏覽器視窗的尺寸作為相對基礎來縮放大小，我想可以理解為直接用瀏覽器的長寬拆解成單位，依照比例去縮放吧。

印象比較深刻是我先前在用react.js跟next.js 開發網站時，當時我希望我的網頁背景是固定滿版，但我不管是設定了

#root {
  height: 100%;
}

或其他css都沒有用處，後來我去查文件發現若需要固定滿版不能滾動的話，高度需要這樣設定：

#root {
  height: 100%;
  height: 100vh;
  height: 100dvh;
}

vh: 瀏覽器尺寸1%的高度，所以100vh就是瀏覽器100%高度，也就是讓背景跟網站固定滿版呈現。

這大概是我第一次遇到這種 Viewport-relative 的單位，由於遇到的次數不多，所以不知道未來會不會常使用，或者說未來若遇到同樣的問題，就能用這類型的單位解決。

更多的Viewport-relative單位可以查看web.dev網站內容

Miscellaneous units

最後一章節是關於其他單位的介紹。

首先是角度 (Angle units)，當你需要旋轉某個物件或者旋轉效果，其單位是使用 deg，旋轉360度就是360deg。

div {
	width: 150px;
	height: 150px;
	transform: rotate(60deg);
}

有其他的角度單位分別是rad (radians), grad (gradians) 和 turn， 1turn = 360deg, 0.5turn = 180deg.

再來是解析度 (Resolution units) 的單位 (dpi)，比方說 192 解析度就是 192dpi。

那麼這次的章節就到這啦。