IT課程 CSS基礎 021_值類型、單位、大小、顏色

數值類型

CSS 中，在不同屬性中使用了不同的數值，常用的數值類型如下：

字符串：用單引號或雙引號括起來的文本，需確保字符串引號的一致性。
數字：整數或浮點數。如 1024、-100、0.255。避免使用無單位的數字，除非是表示純粹的數值。
單位：單位數值類型，例如 45deg、5s 或 10px。
百分比：百分比數值類型，例如 50%。百分比值通常用於寬度、高度等屬性。
顏色值：十六進制、RGB、RGBA、HSL、HSLA等，使用合適的顏色表示方式，考慮顏色對比度和可訪問性，避免使用太過亮或過於相似的顏色。
關鍵字：表示具體含義的詞，如auto、initial、inherit等，理解關鍵字的含義和作用，確保正確使用。

單位

CSS中的單位用於表示長度、角度、時間、頻率等屬性的值。

長度單位：

在CSS中，長度單位用於表示尺寸和距離，可以應用於各種屬性，如寬度、高度、邊距、填充等。

相對長度單位：

em： 相對於父元素的字體大小。1.5em表示元素的字體大小為其父元素字體大小的 1.5 倍。
rem： 相對於根元素（html元素）的字體大小。1rem等於根元素的字體大小。
ex： 通常用於垂直尺寸，相對於小寫字母”x”的高度。（在大多數字體中，小寫的 x 字符通常是最大字符高度的一半）

示例：

1
.example {
2
  font-size: 16px;
3
  padding: 1.5em; /* 1em相當於24px */
4
  margin: 2rem; /* 2rem相當於32px */
5
  height: 2ex; /* 高度為字體大小的一半，即 8px，相當於16px */
6
}

絕對長度單位：

px： 像素是屏幕上最基本的單位，也是 CSS 中使用最廣泛的單位。像素的大小取決於顯示器的分辨率。
in： 英寸是長度單位，通常用於表示顯示器或其他電子設備的尺寸，1英寸等於96像素。
cm： 厘米是長度單位，通常用於表示物理對象的尺寸。
mm： 毫米是長度單位，通常用於表示紙張或其他印刷材料的尺寸。
pt： 點/磅 (point) 的縮寫，是傳統印刷術中使用的單位。1pt 等於 1/72 英寸，約為 0.352778 毫米。
pc： 派卡 (pica) 的縮寫，也是傳統印刷術中使用的單位。1pc 等於 12pt，約為 4.21752 毫米，1pc等於16像素。在打印樣式表或需要確切打印尺寸的情況下推薦。

示例：

1
.example {
2
  width: 200px;
3
  height: 2in; /* 2英寸，等於192px */
4
  margin: 1cm; /* 1厘米 */
5
  font-size: 12pt; /* 12磅 */
6
}

相對百分比單位：

%： 百分比表示相對於父元素的百分比大小。例如，width: 50% 表示元素的寬度為其父元素寬度的 50%。

示例：

1
.example {
2
  width: 50%; /* 寬度為父元素寬度的50% */
3
  padding: 10%; /* 內邊距為元素寬度的10% */
4
}

視窗單位：

vw： 視口寬度的百分比，1vw等於視口寬度的1%。
vh： 視口高度的百分比，1vh等於視口高度的1%。
vmin： vw和vh中較小的那個。
vmax： vw和vh中較大的那個。

示例：

1
.example {
2
  width: 50vw; /* 寬度為視口寬度的50% */
3
  height: 30vh; /* 高度為視口高度的30% */
4
}

角度單位：

在CSS中，角度單位用於表示旋轉、變換等屬性中的角度值。

deg（度）：

deg 度是角度的最常用單位，一個圓的總角度為 360 度。
用於表示旋轉、漸變角度等。

示例：

1
.example {
2
  transform: rotate(45deg); /* 以45度旋轉元素 */
3
  background: linear-gradient(45deg, red, yellow); /* 45度漸變背景 */
4
}

rad（弧度）：

rad 弧度是圓周長與半徑的比值，一個圓的總弧度為 2π 弧度。
用於某些數學函數、變換等。

示例：

1
.example {
2
  transform: rotate(1rad); /* 以1弧度旋轉元素 */
3
}

grad（梯度）：

grad 表示梯度的單位，一個圓的總梯度為 400 梯度。
類似度數，用於表示旋轉、漸變角度等。

1
.example {
2
  transform: rotate(50grad); /* 以50梯度旋轉元素 */
3
}

turn（轉）：

turn 表示完整的圓周數，等於 360 度。
用於表示旋轉的圈數。

1
.example {
2
  transform: rotate(0.5turn); /* 旋轉半圈，180度 */
3
}

時間單位：

在CSS中，時間單位用於表示動畫、過渡、動畫延遲等屬性中的時間值。

s（秒）

s 表示秒的單位。
用於表示動畫持續時間、過渡時間等。

示例：

1
.base{
2
    width: 200px;
3
    height: 200px;
4
    background-color: #3498db;
5
}
6
.base:hover{
7
    background-color: #e74c3c;
8
}
9
.example{
10
    transition: background-color 1s ease; /* 定義過渡屬性和時間 */
11
}

ms（毫秒）

ms 表示毫秒的單位，1秒等於1000毫秒。
用於更精細的時間控制。

示例：

1
.base{
2
    width: 200px;
3
    height: 200px;
4
    background-color: #3498db;
5
}
6
.base:hover{
7
    background-color: #e74c3c;
8
}
9

10
.example{
11
    transition: background-color 2000ms ease; /* 定義過渡屬性和時間 */
12
}

頻率單位：

在CSS中，頻率單位用於表示周期性事件的頻率。常見的頻率單位是 Hz（赫茲），表示每秒發生的周期數。

Hz（赫茲）

赫茲是頻率的最常用單位，表示每秒發生的周期數。
用於表示動畫中的震動、旋轉等效果的頻率。

示例：

1
.example {
2
  animation: shake 1s infinite; /* 震動頻率為1赫茲，無限循環 */
3
}

kHz（千赫茲）

千赫是頻率的單位，表示每秒發生的千次周期，即1 kHz 等於 1000 Hz。
在一些高頻率的場景中使用，例如聲音的頻率。

示例：

1
.example {
2
  audio {
3
    frequency: 5kHz; /* 聲音頻率為5千赫茲 */
4
  }
5
}

分辨率單位：

在CSS中，分辨率單位用於表示圖像或打印時的像素密度。

dpi（每英寸點數）

dpi 表示每英寸的點數，即圖像或打印時每英寸的像素密度。
在打印樣式表中常用，用於確定打印時圖像的清晰度。

示例：

1
.example {
2
  background-image: url('image.png');
3
  background-size: 300px 200px;
4
  background-resolution: 300dpi; /* 圖像在打印時的像素密度為300dpi */
5
}

dppx（每像素點數）

dppx 表示每像素的點數，即屏幕上每物理像素的像素密度。
通常在響應式設計中用於適應不同屏幕的像素密度。

示例：

1
.example {
2
  background-image: url('image.png');
3
  background-size: 300px 200px;
4
  background-resolution: 2dppx; /* 圖像在2倍像素密度的屏幕上顯示 */
5
}

dpcm（每厘米點數）

dpcm 是表示每厘米的點數（dots per centimeter）的分辨率單位。
用於在打印樣式表或媒體查詢中調整樣式和圖像，以適應不同的分辨率或打印設備。

示例：

1
.example {
2
  background-image: url('image.png');
3
  background-size: 2dpcm 3dpcm; /* 圖像在每厘米2個點的水平分辨率和每厘米3個點的垂直分辨率下顯示 */
4
}

大小

CSS中的大小可以用來控制元素的尺寸。

width 和 height 屬性

分別用於設置元素的寬度和高度，一般使用像素（px）、百分比（%）、em、rem等長度單位。

示例：

1
.example {
2
  width: 300px;
3
  height: 200px;
4
}

max-width 和 max-height 屬性

分別用於設置元素的最大寬度和最大高度，一般使用像素（px）、百分比（%）、em、rem等長度單位。

示例：

1
.example {
2
  max-width: 100%;
3
  max-height: 500px;
4
}

min-width 和 min-height 屬性：

示例：

1
.example {
2
  min-width: 200px;
3
  min-height: 100px;
4
}

顏色

關鍵字顏色

使用一些預定義關鍵字表示的顏色，例如：red：紅色、blue：藍色、green：綠色等。

示例：

1
.example {
2
  color: red; /* 紅色 */
3
  background-color: blue; /* 藍色 */
4
}

十六進制顏色

使用六位或三位的十六進制數表示RGB顏色。六位表示形式為#RRGGBB，其中RR、GG、BB分別表示紅、綠、藍的色值。三位表示形式為#RGB，每個字符表示一個顏色通道。

示例：

1
.example {
2
  color: #ff0000; /* 紅色 */
3
  background-color: #00f; /* 藍色 */
4
}

RGB、RGBA顏色

使用rgb()函數表示顏色，接受三個參數，分別表示紅、綠、藍的色值，取值範圍為0-255。 rgba()與rgb()類似，但多了一個表示透明度的參數，取值範圍為0-1。

示例：

1
.example1 {
2
  color: rgb(255, 0, 0); /* 紅色 */
3
  background-color: rgb(0, 0, 255); /* 藍色 */
4
}
5

6
.example2 {
7
  color: rgba(255, 0, 0, 0.5); /* 半透明紅色 */
8
  background-color: rgba(0, 0, 255, 0.7); /* 半透明藍色 */
9
}

HSL、HSLA顏色

使用hsl()函數表示顏色，接受三個參數，分別表示色相、飽和度和亮度。色相取值範圍為0-360，飽和度和亮度取值範圍為0%-100%。 hsla()與hsl()類似，但多了一個表示透明度的參數，取值範圍為0-1。

示例：

1
.example1 {
2
  color: hsl(0, 100%, 50%); /* 紅色 */
3
  background-color: hsl(240, 100%, 50%); /* 藍色 */
4
}
5

6
.example2 {
7
  color: hsla(0, 100%, 50%, 0.5); /* 半透明紅色 */
8
  background-color: hsla(240, 100%, 50%, 0.7); /* 半透明藍色 */
9
}

RGB顏色對照表 (oschina.net)