CSS

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定位方式

相关工具