CSS 樣式表是一種將樣式應用于 HTML 文檔的技術。使用 CSS,您可以通過修改樣式表來同時更改所有網頁的外觀。CSS 使網頁制作人員可以一次定義多個 Web 頁面中的元素的外觀屬性。在開發網頁時,使用 CSS 樣式表非常方便,因為它可以節省時間并實現一致的外觀效果。
CSS 有著非常強大的功能,其中一個最基本的用法是樣式選擇器。通過使用相應的選擇器,您可以選擇文檔中的特定元素并為它們定義樣式。以下是一些示例:
/* 選擇 ID 為 "example" 的元素 */ #example { color: blue; } /* 選擇所有 div 元素 */ div { background-color: gray; } /* 選擇所有類名為 "box" 的元素 */ .box { border: 1px solid black; }
使用 CSS,您還可以控制文本、頁面布局、響應式設計(responsiveness)、字體、邊框、背景、圖片和動畫等內容。
/* 修改文本樣式 */ p { font-family: Arial; font-size: 16px; color: #333; } /* 頁面布局 */ .container { display: flex; justify-content: center; align-items: center; } /* 響應式設計 */ @media only screen and (max-width: 768px) { .container { flex-direction: column; } } /* 字體樣式 */ h1 { font-size: 24px; font-weight: bold; text-transform: uppercase; } /* 邊框效果 */ img { border-radius: 50%; border: 2px solid #333; } /* 背景圖片 */ body { background-image: url("background.jpg"); } /* 動畫效果 */ button { transition: background-color 0.5s ease; } button:hover { background-color: blue; }
總之,CSS 樣式表提供了一種強大而靈活的方式來控制網頁的外觀和布局,無論是簡單的文本樣式還是復雜的動畫效果,都可以通過 CSS 輕松實現。