CSS 基础概念
在深入学习 CSS 语法之前，理解其背后的一些核心概念至关重要。这些概念构成了 CSS 工作方式的基础。
1. 层叠 (Cascade)
“层叠”是 CSS 名字的来源，也是其最重要的特性之一。它定义了当多个样式规则应用到同一个元素上时，如何解决冲突，决定最终哪个样式生效。层叠的规则遵循一个优先级顺序：
- 来源 (Origin): 浏览器默认样式 < 用户自定义样式 < 开发者定义的样式。
- 重要性 (Importance): 在样式规则后添加
!important会使其优先级变为最高。例如color: red !important;。 - 特殊性 (Specificity): 指的是选择器的“精确度”。选择器越具体，其优先级越高。例如，一个 ID 选择器 (
#my-id) 的优先级高于一个类选择器 (.my-class)，而类选择器又高于一个元素选择器 (div)。 - 源代码顺序 (Source Order): 如果以上三条规则都相同，那么在样式表中最后定义的规则将生效。
2. 继承 (Inheritance)
继承是指子元素会自动获得其父元素的一些 CSS 属性值。这使得我们不必为页面上的每个元素都单独设置样式。
- 可继承的属性: 通常与文本相关的属性是可继承的，如
color,font-family,font-size,line-height,text-align等。 - 不可继承的属性: 通常与盒子模型相关的属性是不可继承的，如
width,height,padding,margin,border等。
例如，如果你给 <body> 元素设置了字体颜色，那么页面上所有的子元素（如段落、标题）都会默认继承这个颜色，除非你为它们单独指定了其他颜色。
3. 盒子模型 (Box Model)
在 CSS 中，每一个 HTML 元素都可以被看作是一个矩形的盒子。这个“盒子”由四个部分组成，从内到外分别是：
- 内容 (Content): 盒子的核心，显示文本、图片等实际内容。其大小由
width和height属性控制。 - 内边距 (Padding): 包围在内容区域外部的透明区域。它位于内容和边框之间。由
padding相关属性控制。 - 边框 (Border): 包围在内边距外部的线条。由
border相关属性控制。 - 外边距 (Margin): 包围在边框外部的透明区域。它用来控制元素与其他元素之间的距离。由
margin相关属性控制。
理解盒子模型对于进行页面布局至关重要。
4. 块级元素 vs. 内联元素
HTML 元素通常可以分为两种基本类型：
块级元素 (Block-level Elements):
- 总是在新的一行上开始。
- 宽度默认继承其父容器的 100%。
- 可以设置
width,height,margin和padding。 - 常见的块级元素有
<div>,<p>,<h1>-<h6>,<ul>,<li>,<form>等。
内联元素 (Inline-level Elements):
- 不会开始新的一行，与其他内联元素并排显示。
- 宽度由其内容决定。
- 通常不能设置
width和height。垂直方向的margin和padding也不会按预期工作。 - 常见的内联元素有
<span>,<a>,<img>,<strong>,<em>等。
理解这些基础概念将为你后续学习和使用 CSS 铺平道路。