← 返回首页

第1章: CSS 简介与引入方式

了解 CSS 是什么以及如何在 HTML 中使用 CSS

什么是 CSS？

CSS (Cascading Style Sheets，层叠样式表) 是用于描述 HTML 文档样式的语言。它控制网页的外观和布局。

CSS 的作用

控制文本的颜色、字体、大小
设置元素的宽度、高度、边距、内边距
创建页面布局和定位元素
添加动画和过渡效果
实现响应式设计

💡 提示： CSS 让我们能够将内容（HTML）和样式（CSS）分离，使代码更易维护。

CSS 基本语法

CSS 规则由选择器和声明块组成：

选择器 {
    属性: 值;
    属性: 值;
}

/* 示例 */
p {
    color: blue;
    font-size: 16px;
}

语法组成

选择器：指定要设置样式的 HTML 元素
属性：要改变的样式特性（如 color、font-size）
值：属性的具体设置
声明：属性和值的组合（如 color: blue）
声明块：用 {} 包裹的多个声明

CSS 引入方式

有三种方式在 HTML 中使用 CSS：

1. 内联样式（Inline Style）

直接在 HTML 元素的 style 属性中编写 CSS。

<p style="color: red; font-size: 20px;">这是红色文本</p>

优点：优先级最高，可以快速测试样式

缺点：难以维护，不能复用，不推荐大量使用

2. 内部样式（Internal Style）

在 HTML 文档的 <head> 部分使用 <style> 标签。

<head>
    <style>
        p {
            color: blue;
            font-size: 18px;
        }
    </style>
</head>

优点：适合单页面的样式

缺点：不能在多个页面间共享

3. 外部样式（External Style）

创建独立的 .css 文件，在 HTML 中通过 <link> 标签引入。

<!-- HTML 文件 -->
<head>
    <link rel="stylesheet" href="styles.css">
</head>

/* styles.css 文件 */
p {
    color: green;
    font-size: 16px;
}

优点：可复用，易维护，推荐使用

缺点：需要额外的 HTTP 请求

三种引入方式对比演示

内联样式

这段文字使用内联样式：红色、20px、加粗

内部样式

这段文字使用内部样式：蓝色、18px、斜体

外部样式

这段文字模拟外部样式：绿色、16px（本页面的样式来自外部 CSS）

CSS 优先级

当多个样式规则应用于同一元素时，优先级决定哪个样式生效。

优先级顺序（从高到低）

!important 声明
内联样式（style 属性）
ID 选择器（#id）
类选择器、属性选择器、伪类（.class、[attr]、:hover）
元素选择器、伪元素（p、::before）
通配符选择器（*）

/* 优先级示例 */
p { color: rgba(255, 255, 255, 0.95); }              /* 优先级最低 */
.text { color: blue; }           /* 优先级较高 */
#special { color: green; }       /* 优先级更高 */
<p style="color: red;">...</p>  /* 优先级最高 */
p { color: yellow !important; }  /* !important 最高 */

⚠️ 注意： 避免过度使用 !important，它会使样式难以维护和调试。

🎯 互动练习：CSS 优先级

下面的文本应用了多个样式规则，观察哪个生效：

/* CSS 样式规则 */
#priority-demo { 
    color: green;    /* ID选择器 - 优先级：100 */
}

.priority-class { 
    color: blue;     /* 类选择器 - 优先级：10 */
}

p.priority-element { 
    color: orange;   /* 元素+类选择器 - 优先级：11 */
}

<!-- HTML 代码 -->
<p class="priority-class" id="priority-demo" style="color: red;">
    这段文字应用了多个样式...
</p>

这段文字应用了多个样式：元素选择器（橙色）、类选择器（蓝色）、ID选择器（绿色）、内联样式（红色）

🎯 优先级计算：

内联样式 (style="color: red;") - 优先级：1000 ✅ 最高
ID选择器 (#priority-demo) - 优先级：100
类选择器 (.priority-class) - 优先级：10
元素选择器 (p) - 优先级：1

结果：文字显示为红色，因为内联样式的优先级最高！

CSS 注释

使用 /* */ 添加注释，注释不会被浏览器渲染。

/* 这是单行注释 */

/*
 * 这是多行注释
 * 可以写多行说明
 */

p {
    color: blue;  /* 设置文字颜色为蓝色 */
}

本章小结

CSS 用于控制 HTML 元素的样式和布局
CSS 语法：选择器 { 属性: 值; }
三种引入方式：内联、内部、外部（推荐外部）
样式优先级：!important > 内联 > ID > 类 > 元素
使用 /* */ 添加注释