CSS 基础 - 初学者完整指南
学习 CSS 基础知识,包括选择器、属性、值和盒模型。非常适合开始 Web 开发之旅的初学者。
什么是 CSS?
CSS(层叠样式表)是一种用于描述 HTML 文档外观和格式的样式表语言。它控制网页的布局、颜色、字体和整体视觉效果。CSS 使开发者能够将内容(HTML)与表现(样式)分离,使网站更易于维护和更新。
CSS 选择器
选择器用于选中要应用样式的 HTML 元素:
/* 元素选择器 - 选中所有段落 */
p { color: red; }
/* 类选择器 - 选中所有带该类的元素 */
.className { color: blue; }
/* ID 选择器 - 选中唯一元素 */
#idName { color: green; }
/* 属性选择器 */
[type="text"] { border: 1px solid gray; }
/* 后代选择器 */
div p { margin: 10px; }
/* 子选择器 */
div > p { padding: 5px; }盒模型
每个 HTML 元素都可以看作一个矩形盒子,由以下部分组成:
Content
元素的实际内容区域
Padding
内容周围的透明区域
Border
包围 padding 的边框
Margin
元素外部的透明区域
/* 设置盒模型 */
.box {
width: 200px;
padding: 20px;
border: 2px solid #333;
margin: 10px;
box-sizing: border-box; /* 包含 padding 和 border */
}常用属性
color文字颜色background背景样式font-size字体大小margin外边距padding内边距border边框display显示类型position定位方式