[CSS] 你必須知道的10個CSS基本語法！

當代網頁開發的結構和視覺美學，受到CSS（層疊樣式表）的深刻影響。對開發人員和設計師而言，精通CSS語法至關重要，因其在網頁設計中起到了核心作用。本文件闡明了必須掌握的10個基本CSS語法，作為專業人士追求創建一致且高效網頁設計的全面指南。

1. 選擇器與屬性

選擇器讓您針對HTML文檔中的特定元素進行樣式應用。屬性則定義樣式的外觀。

使用通用選擇器

通用選擇器針對HTML文檔中的所有元素。它特別適用於應用全局樣式，例如重設邊距和填充。

* {
  margin: 0;
  padding: 0;
}

此代碼將網頁上每個HTML元素的所有邊距和填充重設為零。

類選擇器

類選擇器針對共享相同類屬性的元素。它使您能夠在各種元素中應用一致的樣式，無需重複代碼。

.my-class {
  color: red;
}

此代碼將顏色紅色應用於具有類名 my-class 的任何元素。

2. 盒子模型

CSS盒子模型代表布局結構，包括邊距、邊框、填充和內容區域。它對控制間距和對齊至關重要。

邊距

邊距控制元素邊框外的空間，讓您能夠在布局內定位元素。

div {
  margin: 10px;
}

此代碼在<div>元素周圍設置了10像素的邊距。

填充

填充控制元素邊框和其內容之間的空間，影響元素的外觀和可讀性。

div {
  padding: 15px;
}

此代碼在<div>元素內設置了15像素的填充。

3. 背景

背景屬性設置內容背後的外觀，例如顏色或圖像。它們在視覺設計和品牌塑造中起到了關鍵作用。

設置背景顏色

您可以將特定的背景顏色應用於元素，增強視覺層次和用戶體驗。

body {
  background-color: #f3f3f3;
}

此代碼將body的背景顏色設置為淺灰色。

4. 字體和文本

字體和文本屬性控制文檔內文本的外觀和定位，影響可讀性和設計。

字體大小

調整字體大小讓您能夠強調文本並在整個網站上保持一致的排版層次。

p {
  font-size: 16px;
}

此代碼將段落文本的字體大小設置為16像素。

文本對齊

文本對齊屬性控制文本的水平定位，增強布局和視覺流暢性。

h2 {
  text-align: center;
}

此代碼將<h2>元素中的文本居中。

5. 彈性布局

借助Flexbox，您可以輕鬆控制容器內元素的對齊、方向和順序，用更少的代碼實現複雜布局。

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

此代碼創建了一個彈性容器，並使其子項水平和垂直居中。

6. 元素定位

定位屬性控制元素之間的空間關係，對於創建固定元素或重疊內容至關重要。

絕對定位

絕對定位使元素相對於其最近的定位祖先進行定位，允許精確控制元素的位置。

.element {
  position: absolute;
  top: 50px;
  left: 50px;
}

此代碼將.element元素定位在距其最近定位祖先的頂部和左側50像素處。

固定定位

固定定位將元素錨定在視口中，即使用戶滾動，它也會保持在同一位置。

.header {
  position: fixed;
  top: 0;
  width: 100%;
}

此代碼將.header定位在視口頂部，並將其寬度擴展到100%。

7. CSS 網格布局

網格布局透過對項目在行和列中的精確定位來簡化複雜布局的創建。

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

此程式碼定義了一個具有三個等寬列的網格容器。

8. 自適應設計

自適應設計確保網站的佈局根據設備的屏幕尺寸進行調整，提升在各種設備上的可用性。

媒體查詢

媒體查詢依設備特性應用特定風格，提供不同屏幕間的最佳觀看體驗。

@media only screen and (max-width: 600px) {
  body {
    font-size: 18px;
  }
}

此程式碼將屏幕寬度600像素或更小的設備的字體大小更改為18像素。

9. 偽類

偽類根據特定狀態或用戶互動定位元素，允許動態風格變化。

懸停效果

懸停偽類在用戶懸停時改變元素的風格，提高互動性和反饋。

a:hover {
  color: blue;
}

此程式碼在用戶懸停時將鏈接顏色更改為藍色。

10. 過渡和動畫

過渡和動畫在狀態變化期間為元素增添視覺效果，提高用戶參與和體驗。

CSS 過渡

CSS過渡平滑地改變屬性值的持續時間，提供視覺提示，使互動更直觀。

.button {
  transition: background-color 0.5s ease;
}
.button:hover {
  background-color: green;
}

此程式碼在懸停時對 .button 類應用背景顏色過渡效果，耗時0.5秒。

動畫

CSS動畫提供對關鍵幀和時間更多控制，實現更複雜的視覺效果和通過設計進行敘述。

@keyframes slide {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(100px);
  }
}

.element {
  animation: slide 2s ease infinite;
}

此程式碼定義了一個名為 slide 的動畫，將 .element 水平移動100像素，每2秒重複無限次。@keyframes 規則用於定義動畫序列，允許精確控制動畫的行為。

本文中詳述的10個基本CSS語法是現代網絡開發的基礎。理解這些原則使專業人士能夠創建效率更高、一致性更強和視覺吸引力更大的網站和應用程序。

常見問答

1. 絕對定位和固定定位有何不同？ 絕對定位是相對於其最近定位的祖先元素，而固定定位則是相對於視口。
2. CSS網格和Flexbox能否一同使用？ 是的，CSS網格和Flexbox可以結合創建複雜佈局和對齊元素。
3. 媒體查詢是什麼，為何它們重要？ 媒體查詢允許您根據設備的特性應用不同風格，使您的網站具有響應性。
4. 像:hover這樣的偽類是如何工作的？ 偽類根據用戶互動，例如懸停，定位元素，使您能夠應用不同的風格。
5. 我能控制CSS過渡的持續時間和時機嗎？ 是的，您可以使用transition-duration和transition-timing-function等各種屬性來控制CSS過渡的持續時間、時間功能和其他屬性。