CSS - 資料類型
引言
你好，未來的 CSS 巔峰大師！我很興奮能成為你探索 CSS 資料類型的精彩旅程中的導師。作為一位教導計算機科學超過十年的老師，我可以告訴你，理解資料類型就像是寫小說之前學習字母一樣。它是基礎的，而且敢問，還挺有趣的！那麼，讓我們一起潛入水中，解開 CSS 資料類型的神秘面紗。
語法
在我們深入資料類型的細節之前，讓我們先來了解一下 CSS 喜歡如何呈現其數據。CSS 有表達值的特定方式，而且熟悉這種語法是很重要的。
選擇器 {
屬性: 值;
}例如：
p {
color: red;
font-size: 16px;
}在這裡，'red' 和 '16px' 是不同資料類型的值。'Red' 是一個顏色關鍵字，而 '16px' 是一個長度值。看起來很容易吧？你已經開始掌握它了！
文本資料類型
現在，讓我們來谈谈文本。CSS 喜愛文本，並有許多方式來處理它。
字串
CSS 中的字串就像詞語的禮盒包裝。它們可以被單引號或雙引號包裹。
.greeting::before {
content: "Hello, World!";
}在這個例子中，"Hello, World!" 是一個字串。這就像告訴 CSS，“嘿，就按照我寫的這樣對待它！”
識別器
識別器就像是 CSS 中事物的名字。它們不需要引號，並用於屬性、類別、ID 等。
#main-header {
font-family: Arial, sans-serif;
}在這裡，'Arial' 和 'sans-serif' 是識別器。它們告訴 CSS 要使用哪些字體。
URLs
CSS 中的 URLs 就像资源的地址。它們通常與 url() 函數一起使用。
body {
background-image: url('background.jpg');
}這告訴 CSS 在哪裡找到背景圖像。
數值資料類型
數字是許多 CSS 屬性的支柱。讓我們數數看！
整數
整數是沒有分数的整個數字！
.container {
z-index: 5;
}在這裡，5 是一個整數，決定了元素的堆疊順序。
數字
CSS 中的數字可以包含小數。
.opacity-example {
opacity: 0.5;
}這將透明度設為 50%，使元素半透明。
維度
維度是附加單位的數字。
.box {
width: 100px;
height: 50%;
margin: 10em;
}在這裡，我們看到了像素（px）、百分比（%）和 ems（em）的使用。
數量
CSS 中的數量就像是烹飪中的度量。它們幫助我們定義我們想要多少東西。
長度
長度可以是絕對的（如像素）或相對的（如 em 或 %）。
.container {
width: 80vw;
padding: 2rem;
}'vw' 代表視口寬度，而 'rem' 是根元素字體大小的相對值。
角度
角度用於旋轉和漸變。
.rotated {
transform: rotate(45deg);
}這將元素旋轉 45 度。
時間
時間值用於動畫和過渡。
.animated {
transition: all 0.5s ease;
}這為所有屬性設置了半秒的過渡。
類型的組合
有時候，CSS 喜歡混合和匹配資料類型。
函數值
CSS 函數接受參數並返回一個值。
.gradient {
background: linear-gradient(to right, red, blue);
}這創造了一個從紅色到藍色的漸變。
顏色
CSS 中的顏色就像畫家的調色板。有許多方式來定義它們。
.colorful {
color: #ff0000; /* 十六進制 */
background-color: rgb(0, 255, 0); /* RGB */
border-color: hsl(240, 100%, 50%); /* HSL */
}這些都定義了不同的顏色，使用了不同的表示法。
圖像
CSS 中的圖像可以不僅僅是來自文件的圖片。
.image-types {
background-image: url('cat.jpg');
list-style-image: linear-gradient(to right, red, blue);
}在這裡，我們使用了外部圖像和漸變作為圖像。
2D 定位
CSS 中的定位就像在網頁上玩國際象棋。
.positioned {
position: absolute;
top: 50px;
left: 100px;
}這將元素定位在容器的顶部向下 50 像素，從左邊向右 100 像素。
計算資料類型
有時候，我們需要 CSS 為我們做數學計算。
.calculated {
width: calc(100% - 20px);
}這計算寬度為父元素的 100% 減去 20 像素。
顯示
顯示決定了元素如何渲染。
.flex-container {
display: flex;
}這將元素轉換為 flex 容器，启用柔性盒佈局。
其他資料類型
CSS 還有一些小花招。
全局值
全局值可以用在任何屬性上。
.inherited {
color: inherit;
}這告訴元素使用其父元素的顏色。
這裡是一個總結我們所介紹的主要 CSS 資料類型的表格：
| 資料類型 | 示例 | 描述 |
|---|---|---|
| 字串 | "Hello, World!" | 用引號包裹的文本 |
| 識別器 | Arial | 無引號的名稱，用於字體、屬性等 |
| URLs | url('image.jpg') | 資源的地址 |
| 整數 | 5 | 沒有分数的整個數字 |
| 數字 | 0.5 | 可以包含小數的數字 |
| 長度 | 10px, 2em, 50% | 带有单位的测量值 |
| 角度 | 45deg | 旋轉值 |
| 時間 | 0.5s | 動畫或過渡的持续时间 |
| 顏色 | #ff0000, rgb(255,0,0) | 顏色值 |
| 函數 | calc(), linear-gradient() | 执行计算或创建效果 |
記住，CSS 就像一個工具箱，而資料類型是你的工具。你對它們越熟悉，你的設計就可以越創意和精確。持續練習，很快你就能像專業人士一樣設計網頁了！
Credits: Image by storyset