CSS(Cascading Style Sheets)是網頁開發中不可或缺的一部分,用于控制網頁的樣式。這里梳理一些 CSS 中常用的知識點。
1. CSS 選擇器
/* 標簽選擇器 */ p { color: red; } /* ID 選擇器 */ #my-element { background-color: blue; } /* 類選擇器 */ .my-class { font-size: 16px; } /* 后代選擇器 */ .parent .child { border: 1px solid black; } /* 偽類選擇器 */ a:hover { text-decoration: underline; }
2. 盒模型
.box { width: 200px; height: 100px; border: 1px solid black; padding: 10px; margin: 20px; }
3. 浮動
/* 左浮動 */ .float-left { float: left; } /* 右浮動 */ .float-right { float: right; }
4. 定位
/* 相對定位 */ .relative { position: relative; left: 50px; top: 20px; } /* 絕對定位 */ .absolute { position: absolute; right: 0; bottom: 0; } /* 固定定位 */ .fixed { position: fixed; top: 0; left: 0; }
5. 響應式設計
@media (max-width: 800px) { /* 在屏幕寬度小于 800px 時應用以下樣式 */ .responsive { font-size: 14px; width: 100%; } }
這些是 CSS 中常用的一些知識點,深入理解這些知識點能夠更好地開發網頁。