CSS（層疊樣式表）是用于描述HTML或XML（包括如SVG、XHTML等XML子集）文檔外觀的樣式表語言。CSS用于控制網頁的布局、顏色、字體等視覺表現。在HTML中，CSS可以通過多種方式進行分類和應用。本文將詳細介紹CSS的分類及其在HTML中的應用。
內聯樣式是直接寫在HTML元素的style屬性中的CSS樣式。這種方式的優先級最高，會覆蓋外部樣式表和內部樣式表中的相同樣式。
<p style="color: red; font-size: 14px;">這是一個內聯樣式的段落。</p>
<style>標簽。內部樣式表是將CSS樣式寫在HTML文檔的<head>部分的<style>標簽中。這種方式適用于單個HTML文檔的樣式定義。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>內部樣式表示例</title>
<style>
p {
color: blue;
font-size: 16px;
}
</style>
</head>
<body>
<p>這是一個內部樣式表的段落。</p>
</body>
</html>
外部樣式表是將CSS樣式寫在一個獨立的.css文件中，并通過<link>標簽在HTML文檔中引入。這種方式適用于多個頁面共享相同樣式的情況。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>外部樣式表示例</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<p>這是一個外部樣式表的段落。</p>
</body>
</html>
在styles.css文件中：
p {
color: green;
font-size: 18px;
}
導入樣式表是通過@import規則在CSS文件中引入其他CSS文件。這種方式通常用于模塊化CSS代碼。
/* main.css */
@import url('reset.css');
@import url('layout.css');
body {
background-color: #f0f0f0;
}
@import的支持不如<link>標簽廣泛。媒體查詢是CSS3引入的一種技術，允許根據設備的特性（如屏幕寬度、高度、分辨率等）應用不同的樣式。媒體查詢通常用于響應式設計，使網頁在不同設備上都能良好顯示。
/* 默認樣式 */
body {
background-color: white;
color: black;
}
/* 當屏幕寬度小于600px時應用的樣式 */
@media screen and (max-width: 600px) {
body {
background-color: black;
color: white;
}
}
偽類和偽元素是CSS中的特殊選擇器，用于選擇元素的特定狀態或部分。偽類用于選擇元素的特定狀態（如:hover、:focus等），而偽元素用于選擇元素的特定部分（如::before、::after等）。
/* 偽類示例 */
a:hover {
color: red;
}
/* 偽元素示例 */
p::first-letter {
font-size: 24px;
font-weight: bold;
}
CSS預處理器是一種將CSS代碼擴展為更強大、更易維護的工具。常見的CSS預處理器有Sass、Less和Stylus。它們支持變量、嵌套、混合、函數等高級功能，使CSS代碼更加模塊化和可復用。
// Sass示例
$primary-color: #333;
body {
background-color: $primary-color;
}
.button {
background-color: $primary-color;
&:hover {
background-color: lighten($primary-color, 10%);
}
}
CSS框架是一組預定義的CSS樣式和組件，用于快速構建網頁布局和界面。常見的CSS框架有Bootstrap、Foundation、Bulma等。這些框架提供了響應式網格系統、預定義的樣式和組件，使開發者能夠快速構建現代化的網頁。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Bootstrap示例</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-6">
<p>這是一個Bootstrap布局的段落。</p>
</div>
<div class="col-md-6">
<p>這是另一個Bootstrap布局的段落。</p>
</div>
</div>
</div>
</body>
</html>
CSS模塊化是一種將CSS樣式局部化的技術，避免全局樣式污染。通過將CSS文件與組件綁定，確保樣式只應用于特定的組件。CSS模塊化通常與React、Vue等前端框架結合使用。
/* Button.module.css */
.button {
background-color: blue;
color: white;
}
// Button.js
import styles from './Button.module.css';
function Button() {
return <button className={styles.button}>Click Me</button>;
}
CSS-in-JS是一種將CSS樣式直接寫在JavaScript代碼中的技術。通過這種方式，樣式可以與組件邏輯緊密結合，實現動態樣式和主題切換。常見的CSS-in-JS庫有Styled-components、Emotion等。
// Styled-components示例
import styled from 'styled-components';
const Button = styled.button`
background-color: ${props => props.primary ? 'blue' : 'gray'};
color: white;
padding: 10px 20px;
border: none;
border-radius: 5px;
`;
function App() {
return (
<div>
<Button primary>Primary Button</Button>
<Button>Secondary Button</Button>
</div>
);
}
CSS在HTML中的應用方式多種多樣，從內聯樣式到CSS-in-JS，每種方式都有其優缺點和適用場景。選擇合適的CSS分類和應用方式，可以提高代碼的可維護性、復用性和性能，從而構建出高質量的網頁和應用。在實際開發中，開發者應根據項目需求和團隊技術棧，靈活選擇和組合不同的CSS技術，以達到最佳的開發效果。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
