CSS 基础

🎯 学习 CSS 基础

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

CSS 的基本语法

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

/* CSS 基本语法：选择器 { 属性: 值; } */

/* 元素选择器：选中所有的 h1 元素 */
h1 { /* 开始 h1 选择器的声明块 */
    color: blue; /* 属性：color，设置文本颜色为蓝色 */
    font-size: 24px; /* 属性：font-size，设置字体大小为 24 像素 */
} /* 结束 h1 选择器的声明块 */

/* 类选择器：选中所有 class 为 button 的元素 */
.button { /* 开始 .button 类选择器的声明块 */
    background-color: #4CAF50; /* 属性：background-color，设置背景颜色为绿色（十六进制颜色值） */
    color: white; /* 属性：color，设置文本颜色为白色 */
    padding: 10px 20px; /* 属性：padding，设置内边距：上下 10 像素，左右 20 像素 */
    border: none; /* 属性：border，设置边框为无（移除默认边框） */
    border-radius: 4px; /* 属性：border-radius，设置圆角为 4 像素 */
} /* 结束 .button 类选择器的声明块 */

/* ID 选择器：选中 ID 为 header 的元素 */
#header { /* 开始 #header ID 选择器的声明块 */
    background-color: #f1f1f1; /* 属性：background-color，设置背景颜色为浅灰色（十六进制颜色值） */
    padding: 20px; /* 属性：padding，设置内边距为 20 像素 */
} /* 结束 #header ID 选择器的声明块 */

选择器：指定要应用样式的 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 { /* 选择器：body 元素，设置整个页面的基本样式 */
            font-family: Arial, sans-serif; /* 属性：font-family，设置字体系列为 Arial 或 sans-serif 替代 */
            line-height: 1.6; /* 属性：line-height，设置行高为 1.6 倍字体大小 */
        } /* 结束 body 选择器的声明块 */
        
        h1 { /* 选择器：h1 元素，设置所有标题的样式 */
            color: #333; /* 属性：color，设置文本颜色为深灰色（十六进制颜色值） */
            text-align: center; /* 属性：text-align，设置文本对齐方式为居中 */
        } /* 结束 h1 选择器的声明块 */
        
        p { /* 选择器：p 元素，设置所有段落的样式 */
            color: #666; /* 属性：color，设置文本颜色为中灰色（十六进制颜色值） */
        } /* 结束 p 选择器的声明块 */
    </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

示例：

/* 这是一个 CSS 优先级示例 */

/* specificity = 1 (元素选择器) */
p { /* 选择器：p 元素选择器，特异性为 1 */
    color: blue; /* 属性：color，设置文本颜色为蓝色 */
}

/* specificity = 10 (类选择器) */
.text { /* 选择器：.text 类选择器，特异性为 10 */
    color: red; /* 属性：color，设置文本颜色为红色 */
}

/* specificity = 100 (ID 选择器) */
#intro { /* 选择器：#intro ID 选择器，特异性为 100 */
    color: green; /* 属性：color，设置文本颜色为绿色 */
}

/* specificity = 11 (元素选择器 + 类选择器) */
p.text { /* 选择器：p 元素选择器 + .text 类选择器，特异性为 11 */
    color: purple; /* 属性：color，设置文本颜色为紫色 */
}

/* specificity = 101 (ID 选择器 + 元素选择器) */
#intro p { /* 选择器：#intro ID 选择器 + p 元素选择器，特异性为 101 */
    color: orange; /* 属性：color，设置文本颜色为橙色 */
}

!important 规则

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

.text { /* 选择器：.text 类选择器 */
    color: red !important; /* 属性：color，设置文本颜色为红色，使用 !important 提高优先级 */
} /* 结束 .text 类选择器的声明块 */

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

CSS 继承

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

/* CSS 继承示例 */

/* 父元素 */
body { /* 选择器：body 元素，作为父元素 */
    font-family: Arial, sans-serif; /* 属性：font-family，设置字体系列为 Arial 或 sans-serif 替代，可被继承 */
    color: #333; /* 属性：color，设置文本颜色为深灰色，可被继承 */
}

/* 子元素会继承父元素的 font-family 和 color 属性 */
h1 { /* 选择器：h1 元素，作为 body 的子元素 */
    /* 继承了父元素的 font-family 和 color 属性 */
    font-size: 24px; /* 属性：font-size，设置字体大小为 24 像素，不会被继承 */
}

p { /* 选择器：p 元素，作为 body 的子元素 */
    /* 继承了父元素的 font-family 和 color 属性 */
    line-height: 1.6; /* 属性：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 { /* 选择器：header 元素，设置头部区域样式 */
    background-color: #333; /* 属性：background-color，设置背景颜色为深灰色 */
    color: white; /* 属性：color，设置文本颜色为白色 */
    padding: 20px; /* 属性：padding，设置内边距为 20 像素 */
}

/* 导航样式 */
nav { /* 选择器：nav 元素，设置导航栏样式 */
    background-color: #444; /* 属性：background-color，设置背景颜色为中灰色 */
    padding: 10px; /* 属性：padding，设置内边距为 10 像素 */
}

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 单位