CSS 基础

🎯 学习 CSS 基础

在本章节中，您将学习 CSS 的基本语法、引入方式、优先级和继承等核心概念，这些是掌握 CSS 的基础。

CSS 的基本语法

CSS 的基本语法由选择器和声明块组成：

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

/* 元素选择器 */
h1 {
    color: blue;
    font-size: 24px;
}

/* 类选择器 */
.button {
    background-color: #4CAF50;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
}

/* ID 选择器 */
#header {
    background-color: #f1f1f1;
    padding: 20px;
}

选择器：指定要应用样式的 HTML 元素
声明块：包含在大括号 {} 内的一个或多个声明
声明：由属性和值组成，属性和值之间用冒号 : 分隔，每个声明以分号 ; 结束
注释：以 /* 开始，以 */ 结束，用于添加说明

CSS 的引入方式

CSS 可以通过以下三种方式引入到 HTML 文档中：

1. 内联样式

使用 HTML 元素的 style 属性直接添加样式：

<p style="color: red; font-size: 16px;">这是一个带有内联样式的段落</p>
<div style="background-color: #f0f0f0; padding: 10px;">这是一个带有内联样式的 div</div>

优点：优先级高，可以覆盖其他样式
缺点：样式与结构混合，不利于维护，代码冗余

2. 内部样式表

在 HTML 文档的 <head> 部分使用 <style> 标签定义样式：

<head>
    <style>
        body {
            font-family: Arial, sans-serif;
            line-height: 1.6;
        }
        
        h1 {
            color: #333;
            text-align: center;
        }
        
        p {
            color: #666;
        }
    </style>
</head>

优点：样式与结构分离，便于维护
缺点：只适用于单个页面，不利于样式复用

3. 外部样式表

使用 <link> 标签链接外部 CSS 文件：

<head>
    <link rel="stylesheet" href="styles.css">
</head>

优点：样式与结构完全分离，便于维护和复用，可缓存提高加载速度
缺点：需要额外的 HTTP 请求

💡 学习提示

推荐使用外部样式表，这样可以实现样式的复用，便于维护和更新，同时提高页面加载速度（通过浏览器缓存）。

CSS 优先级

当多个 CSS 规则应用于同一个元素时，CSS 优先级决定了哪个规则会被应用。优先级从高到低依次为：

内联样式：使用 style 属性的样式，优先级最高
ID 选择器：以 # 开头的选择器
类选择器、属性选择器、伪类：以 . 开头的选择器，或 [attribute]，或 :hover 等
元素选择器、伪元素：如 p, div, ::before 等
通配符选择器：* 选择器
继承的样式：从父元素继承的样式，优先级最低

优先级计算规则

CSS 优先级可以通过计算 specificity（特异性）来确定：

内联样式： specificity = 1000
ID 选择器： specificity = 100
类选择器、属性选择器、伪类： specificity = 10
元素选择器、伪元素： specificity = 1
通配符选择器： specificity = 0

示例：

/* specificity = 1 (元素选择器) */
p {
    color: blue;
}

/* specificity = 10 (类选择器) */
.text {
    color: red;
}

/* specificity = 100 (ID 选择器) */
#intro {
    color: green;
}

/* specificity = 11 (元素选择器 + 类选择器) */
p.text {
    color: purple;
}

/* specificity = 101 (ID 选择器 + 元素选择器) */
#intro p {
    color: orange;
}

!important 规则

使用 !important 可以覆盖任何其他样式规则，优先级最高：

.text {
    color: red !important;
}

注意：应尽量避免使用 !important，因为它会破坏 CSS 的正常优先级规则，使样式难以维护。

CSS 继承

CSS 继承是指子元素会继承父元素的某些样式属性：

/* 父元素 */
body {
    font-family: Arial, sans-serif;
    color: #333;
}

/* 子元素会继承父元素的 font-family 和 color 属性 */
h1 {
    /* 继承了 font-family 和 color */
    font-size: 24px;
}

p {
    /* 继承了 font-family 和 color */
    line-height: 1.6;
}

可继承的属性

以下是一些常见的可继承属性：

字体相关：font-family, font-size, font-weight, font-style, line-height
文本相关：color, text-align, text-indent, text-decoration, letter-spacing, word-spacing
列表相关：list-style-type, list-style-position
其他：visibility, cursor

不可继承的属性

以下是一些常见的不可继承属性：

盒模型相关：width, height, margin, padding, border
背景相关：background-color, background-image
定位相关：position, top, right, bottom, left, z-index
布局相关：display, float, clear, flex, grid
其他：overflow, opacity, box-shadow

CSS 层叠

CSS 的全称是 Cascading Style Sheets（层叠样式表），层叠是 CSS 的核心概念之一。当多个样式规则应用于同一个元素时，它们会按照以下顺序层叠：

重要性：!important 规则优先级最高
特异性：特异性高的规则优先级高
源代码顺序：如果特异性相同，后面的规则会覆盖前面的规则

CSS 注释

CSS 注释用于添加说明，不会被浏览器解析：

/* 这是一个 CSS 注释 */

/* 头部样式 */
header {
    background-color: #333;
    color: white;
    padding: 20px;
}

/* 导航样式 */
nav {
    background-color: #444;
    padding: 10px;
}

CSS 单位

CSS 中常用的单位包括：

单位	描述	示例
px	像素，固定单位	font-size: 16px;
%	百分比，相对于父元素	width: 50%;
em	相对于父元素的字体大小	font-size: 1.5em;
rem	相对于根元素的字体大小	font-size: 1.2rem;
vw	视口宽度的 1%	width: 50vw;
vh	视口高度的 1%	height: 100vh;
vmin	视口宽度和高度中较小值的 1%	font-size: 5vmin;
vmax	视口宽度和高度中较大值的 1%	font-size: 5vmax;

💡 学习提示

推荐使用相对单位（如 rem, em, %）进行布局，这样可以创建更加灵活和响应式的设计。

✅ 学习进度检查

在继续学习之前，请确保您已经理解了以下内容：

CSS 的基本语法结构
CSS 的三种引入方式及其优缺点
CSS 优先级规则
CSS 继承的概念
CSS 层叠规则
常用的 CSS 单位