CSS 基础教程 – wiki基地

作者： /

CSS 基础教程：掌握网页样式设计的基石

欢迎来到 CSS 的世界！如果你已经对 HTML 有所了解，能够构建网页的结构，那么 CSS 就是赋予这些结构生命、色彩和布局的魔法。CSS 全称 Cascading Style Sheets（层叠样式表），它负责控制网页的呈现外观，决定了元素如何显示在屏幕上、纸张上或其他媒体上。学习 CSS 是成为一名网页前端开发者的必经之路。

本教程将带你从零开始，详细了解 CSS 的基本概念、语法、常用属性和核心原理。让我们一起开始这段美妙的样式之旅吧！

1. 什么是 CSS？为什么学习 CSS？

什么是 CSS？

CSS 是一种样式表语言，用于描述 HTML（或其他标记语言）文档的展示方式。简单来说，它告诉浏览器如何显示你的 HTML 元素。HTML 负责页面的内容和结构（比如这是一个标题，这是一个段落），而 CSS 则负责页面的外观（比如标题是什么颜色、字体大小，段落有多少边距，图片如何排列）。

为什么学习 CSS？

  1. 美化网页： CSS 可以让你的网页从简单的黑白文本变得五彩斑斓、布局优雅、吸引用户。
  2. 控制布局： 精确控制页面元素的排列方式、位置和大小，实现复杂的页面布局。
  3. 响应式设计： 通过 CSS，你可以让网页在不同设备（桌面、平板、手机）上呈现不同的样式和布局，提供更好的用户体验。
  4. 提高效率： 将样式与内容分离，你可以修改一个 CSS 文件来改变整个网站或多个页面的外观，而无需修改每个 HTML 文件。
  5. 可维护性： 样式集中管理，使得代码更易于维护和更新。

CSS 与 HTML 协同工作，共同构成了现代网页的基础。HTML 是骨架，CSS 是皮肤和衣服。

2. 如何将 CSS 应用到 HTML 文档？

有三种主要方法将 CSS 应用到 HTML 文档中：

2.1 内联样式 (Inline Styles)

直接在 HTML 元素的 style 属性中书写 CSS 规则。

“`html

这是一个蓝色居中的标题

这是一个有左边距的段落。

“`

  • 优点： 简单直接，优先级最高（后面会讲到）。
  • 缺点： 不推荐！混淆了内容与样式，难以维护，无法复用，字数一多就非常混乱。只在极少数特定情况下使用（如 JavaScript 动态改变样式，或邮件模板）。

2.2 内部样式表 (Internal/Embedded Styles)

在 HTML 文档的 <head> 部分，使用 <style> 标签来包含 CSS 规则。

“`html




内部样式表示例


这是一个绿色标题

这是一个使用内部样式表设置行高的段落。


“`

  • 优点： 将样式与内容分离到页面的不同区域，适用于单个页面且样式独特的场景。
  • 缺点： 样式仅限于当前页面，无法在多个页面间共享。如果网站有多个页面，复制粘贴样式会很麻烦。

2.3 外部样式表 (External Style Sheets)

将 CSS 规则书写在一个独立的 .css 文件中，然后在 HTML 文档中使用 <link> 标签引入。

步骤：
1. 创建一个 .css 文件，例如 style.css。
2. 在 .css 文件中编写 CSS 规则。
3. 在 HTML 文档的 <head> 部分，使用 <link> 标签链接到这个 CSS 文件。

style.css 文件内容：
“`css
body {
font-family: Verdana, Geneva, Tahoma, sans-serif;
margin: 0;
padding: 0;
}

h1 {
color: purple;
border-bottom: 2px solid purple;
}

.highlight {
background-color: yellow;
}
“`

index.html 文件内容：
“`html




外部样式表示例

这是一个紫色标题

这是一个被高亮显示的段落。


“`

  • 优点： 强烈推荐！ 完全实现了内容（HTML）与样式（CSS）的分离。样式可以在多个页面间复用，极大地提高了网站的开发效率和可维护性。当需要修改样式时，只需修改一个 CSS 文件即可。
  • 缺点： 对于极简单的单页应用，可能稍微增加了文件的数量。

总结： 在实际开发中，几乎总是使用外部样式表。

3. CSS 基本语法

CSS 规则由两部分组成：选择器 (Selector) 和 声明块 (Declaration Block)。

css
selector {
property: value;
another-property: another-value;
/* ... 更多声明 */
}

  • 选择器 (Selector)： 指向你希望设置样式的 HTML 元素。可以是元素的名称（如 h1）、类（如 .className）、ID（如 #idName）等。
  • 声明块 (Declaration Block)： 包含一条或多条声明，用花括号 {} 包围。
  • 声明 (Declaration)： 由 属性 (Property) 和 值 (Value) 组成，中间用冒号 : 分隔，每条声明以分号 ; 结束。
    • 属性 (Property)： 你希望改变的样式特征（如 color, font-size, width 等）。
    • 值 (Value)： 赋予属性的具体值（如 blue, 16px, 50% 等）。

示例：

“`css
h1 { / 选择器: 选中所有

元素 /
color: red; / 声明 1: 设置文本颜色为红色 /
font-size: 24px; / 声明 2: 设置字体大小为 24像素 /
}

p { / 选择器: 选中所有

元素 /
text-align: justify; / 声明 1: 设置文本两端对齐 /
margin-bottom: 15px; / 声明 2: 设置下外边距为 15像素 /
}
“`

4. CSS 选择器详解

选择器是 CSS 的核心，它们让你能够精准地选中需要应用样式的 HTML 元素。以下是一些最常用和基础的选择器：

4.1 元素选择器 (Element Selector)

选择所有指定类型的 HTML 元素。

“`css
p { / 选择所有

元素 /
color: gray;
}

a { / 选择所有 元素 /
text-decoration: none; / 移除链接下划线 /
}
“`

4.2 ID 选择器 (ID Selector)

选择带有指定 id 属性的元素。ID 在一个 HTML 文档中应该是唯一的。使用 # 符号开头。

“`html

简介段落

“`

“`css

header {

background-color: lightblue;
padding: 10px;

}

intro {

font-style: italic;

}
“`

4.3 类选择器 (Class Selector)

选择带有指定 class 属性的所有元素。同一个类可以应用于多个元素，一个元素也可以拥有多个类。使用 . 符号开头。

“`html

这是一个错误提示。

操作成功。

这是一个警告框。

“`

“`css
.error {
color: red;
font-weight: bold;
}

.success {
color: green;
}

.box {
border: 1px solid black;
padding: 10px;
}

.warning { / 元素同时拥有 box 和 warning 类 /
background-color: lightyellow;
border-color: orange;
}
“`

4.4 通用选择器 (Universal Selector)

选择页面上的所有 HTML 元素。使用 * 符号表示。

css
* {
margin: 0; /* 通常用于重置所有元素的默认外边距和内边距 */
padding: 0;
}
注意： 谨慎使用通用选择器，因为它会影响所有元素，可能导致性能问题或意外的样式。

4.5 分组选择器 (Grouping Selector)

将多个选择器分组，为它们应用相同的样式，用逗号 , 分隔。这可以减少重复代码。

“`css
h1, h2, h3 { / 同时选择所有

,

,

元素 /
color: darkproxy;
}

.button, .link { / 同时选择所有 class 为 button 或 link 的元素 /
cursor: pointer;
}
“`

4.6 组合选择器 (Combinators)

用于选择基于它们与其他元素的关系的元素。

  • 后代选择器 (Descendant Selector): 选择某个元素的 后代 元素（可以是子元素、孙子元素等）。使用空格分隔。
    css
    div p { /* 选择所有在 <div> 元素内的 <p> 元素 */
    border: 1px solid #ccc;
    }
  • 子选择器 (Child Selector): 选择某个元素的 直接子 元素。使用 > 符号分隔。
    css
    ul > li { /* 选择所有作为 <ul> 元素直接子元素的 <li> 元素 */
    list-style-type: square; /* 将列表项标记改为方块 */
    }
  • 相邻兄弟选择器 (Adjacent Sibling Selector): 选择紧接在另一个元素后面的同级元素。使用 + 符号分隔。
    css
    h2 + p { /* 选择紧接在 <h2> 元素后面的第一个 <p> 元素 */
    font-weight: bold;
    }
  • 通用兄弟选择器 (General Sibling Selector): 选择某个元素后面的所有同级元素。使用 ~ 符号分隔。
    css
    h2 ~ p { /* 选择 <h2> 元素后面的所有 <p> 元素 (不包括 <h2> 本身) */
    background-color: #f0f0f0;
    }

掌握选择器是编写高效和可维护 CSS 的关键一步。

5. CSS 常用属性介绍

CSS 属性非常多，但一些核心属性是必须掌握的。

5.1 文本样式 (Text Styling)

  • color: 设置文本颜色。
    css
    p { color: blue; }
  • font-size: 设置字体大小。可以使用像素 px、em、rem、百分比 % 等单位。
    css
    body { font-size: 16px; }
    h1 { font-size: 2em; /* 相对于父元素字体大小的 2倍 */ }
  • font-family: 设置字体族。可以指定多个字体，浏览器会尝试使用第一个可用的。
    css
    body { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; }
  • font-weight: 设置字体粗细。如 normal (正常), bold (粗体), 或数字值 (100-900)。
    css
    strong { font-weight: bold; }
  • text-align: 设置文本水平对齐方式。left, right, center, justify (两端对齐)。
    css
    h1 { text-align: center; }
  • text-decoration: 设置文本装饰线。none (无下划线), underline (下划线), overline (上划线), line-through (删除线)。
    css
    a { text-decoration: none; }
  • line-height: 设置文本行高。
    css
    p { line-height: 1.6; /* 通常使用数字，表示字体大小的倍数 */ }
  • text-indent: 设置首行缩进。
    css
    p { text-indent: 2em; }

5.2 颜色与背景 (Colors and Backgrounds)

  • color: 设置文本颜色 (同上)。
  • background-color: 设置元素的背景颜色。
    css
    div { background-color: #f0f0f0; /* 使用十六进制颜色码 */ }
    span { background-color: rgba(255, 0, 0, 0.5); /* 使用 RGBA，包含透明度 */ }
  • background-image: 设置元素的背景图片。
    css
    body { background-image: url("background.png"); }
  • background-repeat: 控制背景图片是否以及如何重复。no-repeat, repeat (默认), repeat-x, repeat-y.
    css
    div { background-image: url("pattern.gif"); background-repeat: repeat-x; }
  • background-position: 设置背景图片的起始位置。
    css
    header { background-image: url("logo.png"); background-position: center top; }
  • background-size: 设置背景图片的大小。cover, contain 或具体数值。
    css
    body { background-image: url("large-background.jpg"); background-size: cover; }
  • background 简写属性：集成了上述背景相关的多个属性。顺序通常是：color image repeat position / size。
    css
    div { background: #eee url("image.jpg") no-repeat center / cover; }

5.3 边框 (Borders)

  • border-width: 设置边框宽度。
    css
    div { border-width: 1px; }
  • border-style: 设置边框样式。solid, dashed, dotted, double, none 等。
    css
    div { border-style: solid; }
  • border-color: 设置边框颜色。
    css
    div { border-color: black; }
  • border 简写属性：集成了宽度、样式和颜色。
    css
    div { border: 1px solid black; } /* 最常用 */
  • 可以单独设置某一条边的样式：border-top, border-right, border-bottom, border-left。
    css
    div {
    border-top: 2px dashed blue;
    border-left: none;
    }
  • border-radius: 设置边框圆角。
    css
    div { border-radius: 8px; } /* 四个角都圆角 */
    img { border-radius: 50%; /* 使图片变成圆形或椭圆形 */ }

5.4 CSS 盒模型 (Box Model)

CSS 盒模型是理解元素在页面上占用空间的关键概念。每个 HTML 元素都可以被看作一个矩形的“盒子”。这个盒子由四个部分组成（从内到外）：

  1. 内容区域 (Content): 元素实际的内容，如文本、图片等。其大小由 width 和 height 属性控制。
  2. 内边距 (Padding): 内容区域与边框之间的空间。由 padding 属性控制。
  3. 边框 (Border): 包围内容和内边距的线条。由 border 属性控制。
  4. 外边距 (Margin): 边框外部，元素与其他元素之间的空间。由 margin 属性控制。

CSS 盒模型图示
(图示链接，请自行查阅或想象：内容Content -> 内边距Padding -> 边框Border -> 外边距Margin)

尺寸计算 (默认 box-sizing: content-box)

默认情况下，width 和 height 属性仅设置内容区域的大小。元素的总宽度和总高度计算公式如下：

  • 总宽度 = width + left-padding + right-padding + left-border + right-border + left-margin + right-margin
  • 总高度 = height + top-padding + bottom-padding + top-border + bottom-border + top-margin + bottom-margin

这意味着如果你设置一个 div 的 width: 100px; padding: 10px; border: 1px solid black; margin: 20px;，那么它在页面上实际占用的水平空间是 100 + 10 + 10 + 1 + 1 + 20 + 20 = 162px。

box-sizing: border-box

为了让盒模型更直观，CSS3 引入了 box-sizing 属性。当设置为 border-box 时，width 和 height 属性将包括内容、内边距和边框。

css
.box {
width: 100px;
padding: 10px;
border: 1px solid black;
margin: 20px;
box-sizing: border-box; /* 使用 border-box */
}
在这个例子中，元素的总宽度仍然是 162px，但其中 width 属性控制的是 内容 + padding + border 的总和。内容区域的大小会自动调整。许多开发者倾向于使用 border-box，因为它使得布局尺寸的计算更加直观。

边距、内边距和边框属性：

  • padding: 设置所有四条边的内边距。
    css
    div { padding: 10px; /* 所有边 10px */ }
    div { padding: 10px 20px; /* 上下 10px，左右 20px */ }
    div { padding: 10px 20px 30px; /* 上 10px，左右 20px，下 30px */ }
    div { padding: 10px 20px 30px 40px; /* 上 10px，右 20px，下 30px，左 40px */ }
  • padding-top, padding-right, padding-bottom, padding-left: 单独设置某条边的内边距。
  • margin: 设置所有四条边的外边距。用法与 padding 类似。
    css
    div { margin: 20px auto; /* 上下 20px，左右 auto (通常用于块级元素水平居中) */ }
  • margin-top, margin-right, margin-bottom, margin-left: 单独设置某条边的外边距。
  • 外边距塌陷 (Margin Collapsing): 当两个垂直外边距相遇时，它们会合并成一个外边距，取其中较大的那个值。这是盒模型中一个需要注意的特性。

5.5 布局属性 (Basic Layout)

  • display: 控制元素如何生成盒模型以及如何参与布局。常用的值有：

    • block: 块级元素。独占一行，可以设置宽度、高度、内边距和外边距。常见的块级元素有 div, p, h1–h6, ul, li 等。
    • inline: 行内元素。不独占一行，宽度和高度由内容决定，忽略 width 和 height 设置，垂直方向的内边距和外边距不影响其他元素布局。常见的行内元素有 span, a, img, strong, em 等。
    • inline-block: 行内块级元素。不独占一行，但可以设置宽度、高度、内边距和外边距。结合了行内元素和块级元素的特点。
    • none: 元素不会被显示，并且不会占用空间。
    • flex: 用于创建 Flexbox 布局，用于更灵活的对齐和分布空间（这是现代布局方法，基础教程中了解即可）。
    • grid: 用于创建 Grid 布局，强大的二维网格布局系统（这也是现代布局方法）。

    css
    span { display: inline-block; width: 100px; height: 30px; } /* 让 span 元素可以设置宽高 */
    .hidden { display: none; } /* 隐藏元素 */
    * width, height: 设置元素内容区域的宽度和高度。可以使用像素 px、百分比 % (相对于父元素)、auto (默认，由内容决定) 等。
    css
    img { width: 100%; /* 图片宽度占父元素宽度的 100% */ height: auto; /* 高度自适应，保持宽高比 */ }
    div { width: 500px; height: 300px; }

5.6 列表样式 (List Styles)

  • list-style-type: 设置列表项的标记样式。对于无序列表 (ul)：disc, circle, square, none。对于有序列表 (ol)：decimal, lower-alpha, upper-roman, none 等。
  • list-style-image: 使用图片作为列表项标记。
  • list-style-position: 设置标记相对于列表项内容的位置。inside (标记在内容内部), outside (标记在内容外部，默认)。
  • list-style 简写属性：集成了 type, position, image。
    css
    ul { list-style: none; /* 移除默认列表标记 */ }
    ol { list-style: upper-roman inside; }

6. CSS 特殊概念

6.1 层叠与优先级 (Cascade and Specificity)

当多个 CSS 规则应用到同一个元素上时，浏览器需要决定使用哪一个规则。这就是“层叠 (Cascade)”和“优先级 (Specificity)”的作用。

层叠的顺序（大致由低到高）：

  1. 浏览器默认样式。
  2. 用户自定义样式（不常见）。
  3. 作者样式（你写的 CSS）。
  4. 作者的 !important 样式。
  5. 用户的 !important 样式（不常见）。

大多数情况下，我们只关心第 3 和 4 点。

优先级 (Specificity)：

当多个“作者样式”规则应用到同一个元素时，优先级更高的规则会胜出。优先级由选择器的类型决定，优先级高的选择器具有更大的“权重”。优先级计算有一个评分机制：

  • 内联样式 (Inline Styles): 权重最高，得分非常高（可以认为是无限大，但会被 !important 覆盖）。
  • ID 选择器 (#): 得分较高（例如 100 分）。
  • 类选择器 (.), 属性选择器 ([]), 伪类 (:): 得分中等（例如 10 分）。
  • 元素选择器 (如 p, div), 伪元素 (::): 得分较低（例如 1 分）。
  • 通用选择器 (*), 组合器 (+, >, ~, 空格), 否定伪类 (:not()): 得分非常低，通常不影响优先级计算（得分为 0）。

计算方法： 统计一个选择器中各种选择器的数量，然后按等级相加（从高到低）。

示例：

“`css
/ 选择器 A: p – 得分: 0,0,0,1 /
p { color: red; }

/ 选择器 B: .text – 得分: 0,0,1,0 /
.text { color: blue; }

/ 选择器 C: #my-element – 得分: 0,1,0,0 /

my-element { color: green; }

/ 选择器 D: div p – 得分: 0,0,0,2 (两个元素选择器) /
div p { color: orange; }

/ 选择器 E: div .text – 得分: 0,0,1,1 /
div .text { color: purple; }
“`

如果一个 <p class="text" id="my-element">Hello</p> 元素同时匹配了以上所有规则：
* A: p (0,0,0,1)
* B: .text (0,0,1,0)
* C: #my-element (0,1,0,0)
* D: div p (0,0,0,2) – 假设它在一个 div 里
* E: div .text (0,0,1,1) – 假设它在一个 div 里

优先级从高到低：C (#my-element) > E (div .text) > B (.text) > D (div p) > A (p)。
因此，文本最终会是绿色。

当优先级相同时： 靠后出现的规则会覆盖靠前出现的同优先级规则。

!important：

使用 !important 标记的声明会拥有最高的优先级（甚至高于内联样式，但用户 !important 更高）。

css
p {
color: red !important; /* 即使有更高优先级的规则，这个颜色也会被应用 */
}
注意： !important 会破坏正常的层叠规则，使得调试和维护变得困难。应尽量避免使用 !important，除非是覆盖第三方库样式或在极少数特殊情况下。

6.2 继承 (Inheritance)

某些 CSS 属性（主要是文本和字体相关的）可以从父元素继承到子元素。

示例：

“`css
body {
font-family: Arial, sans-serif;
color: #333;
}

div {
border: 1px solid blue; / border 属性不会被子元素继承 /
}

p {
/ p 元素会继承 body 的 font-family 和 color /
/ 但不会继承 div 的 border 属性 /
}
“`

常见的可继承属性包括：color, font-family, font-size, font-weight, font-style, line-height, text-align, text-indent, list-style 等。

不可继承的属性通常是那些影响盒模型或定位的属性，如 width, height, margin, padding, border, display, position 等。

理解继承可以帮助你写出更简洁的 CSS 代码，避免重复设置子元素的样式。

6.3 CSS 注释 (Comments)

在 CSS 中，你可以使用 /* */ 来添加注释，用于解释代码或临时禁用某些规则。注释不会被浏览器解析。

“`css
/ 这是一个单行注释 /

/
这是一个
多行注释
/

h1 {
color: blue; / 设置标题颜色 /
/ font-size: 24px; / / 临时禁用字体大小设置 /
}
“`

7. CSS 单位 (Units)

CSS 支持多种单位来表示长度、大小、角度等。对于基础布局，最常用的是长度单位。

7.1 绝对单位 (Absolute Units)

单位的实际物理尺寸是固定的，不会随着其他元素的尺寸或屏幕大小而改变。

  • px: 像素 (Pixels)。最常用的单位之一，但在不同设备上物理大小可能略有差异。
  • pt: 点 (Points)。用于印刷媒体，1pt = 1/72 英寸。
  • cm, mm, in: 厘米、毫米、英寸。物理长度单位，主要用于打印样式。

7.2 相对单位 (Relative Units)

单位的实际尺寸是相对于其他元素、视口或字体大小计算的，这对于创建响应式布局非常重要。

  • %: 百分比 (Percentage)。相对于父元素的尺寸或属性值。
    css
    div { width: 50%; } /* 宽度是父元素宽度的一半 */
    h1 { font-size: 150%; } /* 字体大小是父元素字体大小的 1.5 倍 */
  • em: 相对于当前元素的 font-size。如果在父元素上使用，则相对于父元素的 font-size。常用于文字和与文字相关的间距。
    css
    div { font-size: 16px; }
    p { font-size: 1.2em; /* 16px * 1.2 = 19.2px */ }
    span { margin-right: 0.5em; /* 基于 span 自己的 font-size */ }
    注意： em 的计算是层层嵌套的，如果父元素设置了 font-size，子元素的 em 将基于父元素的字体大小，这有时可能导致意外的结果。
  • rem: 相对于根元素 (<html>) 的 font-size。更推荐用于字体大小和响应式布局，因为它避免了 em 的嵌套计算问题。
    css
    html { font-size: 16px; /* 设置根字体大小 */ }
    h1 { font-size: 2rem; /* 16px * 2 = 32px */ }
    p { font-size: 1rem; /* 16px * 1 = 16px */ }
  • vw: 相对于视口 (Viewport) 宽度的 1%。100vw 等于视口宽度。
  • vh: 相对于视口高度的 1%。100vh 等于视口高度。
  • vmin/vmax: 相对于视口宽度和高度中较小/较大的那个。

对于基础布局和字体大小，px, %, em, rem, vw, vh 是最常用的。

8. 浏览器开发者工具

学习 CSS 过程中，浏览器开发者工具（如 Chrome DevTools, Firefox Developer Tools）是你的好帮手。你可以右键点击网页元素，选择“检查”或“检查元素”，就能看到该元素的 HTML 结构和应用的 CSS 规则。你可以在这里实时修改 CSS 属性，观察效果，这对于调试和理解样式非常有帮助。

9. 总结与下一步

恭喜你！你已经学习了 CSS 的基本语法、如何应用样式、常用的选择器以及一些核心属性（文本、颜色、背景、边框、盒模型、布局基础）。这些是构建和美化网页样式的基石。

掌握了这些基础后，你可以尝试：

  • 实践： 自己动手编写 HTML 和 CSS 代码，尝试不同的样式和布局。
  • 查阅文档： MDN Web Docs (developer.mozilla.org) 是最权威、最详细的 CSS 文档，遇到不明白的属性或概念，随时查阅。
  • 学习更高级的布局技术： 深入学习 Flexbox 和 Grid，它们是现代网页布局的主流方法。
  • 学习响应式设计： 利用媒体查询 (@media) 让你的网页在不同设备上表现良好。
  • 学习其他 CSS 概念： 如定位 (Positioning)、浮动 (Float, 但现在常用 Flex/Grid 替代)、伪类和伪元素、转换 (Transforms)、过渡 (Transitions)、动画 (Animations) 等。

CSS 的世界广阔而精彩，不断学习和实践是精通它的唯一途径。祝你在网页样式设计的旅程中取得成功！

发表评论

您的邮箱地址不会被公开。 必填项已用 * 标注

滚动至顶部