CSS 基础核心知识梳理：语法、选择器、属性与引入方式 - 实践
CSS（Cascading Style Sheets）是用于美化 HTML 页面、实现结构与样式分离的核心技术。本文基于示例代码，系统梳理 CSS 的语法规范、基础选择器、字体与文本属性，以及三种核心引入方式，结合实例解析各知识点的用法与适用场景，帮助初学者掌握 CSS 样式控制的基础能力。
一、CSS 语法规范与代码风格
CSS 的核心作用是 “选中元素并设置样式”，需遵循固定语法结构与编码规范，确保代码可维护性。
1. 基本语法结构
CSS 由 “选择器” 和 “声明块” 组成，声明块包含多个 “属性 - 值” 键值对，格式如下：
/* 选择器：确定要美化的HTML元素 */
选择器 {
属性1: 属性值1; /* 声明1：样式规则，以分号结尾 */
属性2: 属性值2; /* 声明2：多个声明用分号分隔 */
}示例：将所有<h1>标签设置为红色、40px 大小
h1 {
color: red;
font-size: 40px;
}2. 代码风格规范
为提升代码可读性，需遵循统一风格：
- 格式书写：推荐 “展开型”（每个声明独占一行），避免 “紧凑型”（所有声明写在一行）；
- 大小写：属性名、值（除字体名等特殊情况）统一用小写；
- 空格规则：属性名后冒号前加 1 个空格，选择器与
{之间加 1 个空格。
二、CSS 基础选择器：精准选中页面元素
选择器是 CSS 的 “入口”，用于从 HTML 中筛选目标元素。基础选择器包括四类，覆盖不同选中需求：
| 选择器类型 | 语法 | 作用 | 特点 | 使用场景 |
|---|---|---|---|---|
| 标签选择器 | 标签名 {...} | 选中页面中所有同名标签（如<p>、<div>） | 选中范围广，无法差异化样式 | 统一某类标签的基础样式（如所有段落的字体） |
| 类选择器 | . 类名 {...} | 选中所有class="类名"的元素 | 可给一个元素设置多个类名（用空格分隔），灵活度高 | 差异化样式（如部分文字变蓝、部分按钮加粗） |
| id 选择器 | #id 名 {...} | 选中id="id名"的唯一元素 | id 在页面中唯一，不能重复使用 | 单个元素的特殊样式（如页面顶部 banner），常与 JS 配合 |
| 通配符选择器 | * { ... } | 选中页面中所有元素（包括 body、div 等） | 无需手动添加属性，默认选中全部 | 统一页面基础样式（如清除所有元素默认边距） |
实例解析
- 标签选择器：将所有
<p>标签设为淡紫色p { color: palevioletred; } - 类选择器：将
class="blue"的列表项设为蓝色.blue { color: blue; }看看我 再看看我 - 通配符选择器：将所有元素文字设为红色
* { color: red; }
三、CSS 核心属性：控制字体与文本样式
字体属性与文本属性是 CSS 美化文字的核心，可实现字体、大小、颜色、对齐等效果。
1. 字体属性（Font）
用于控制字体本身的样式，包括字体系列、大小、粗细、倾斜等，支持 “复合属性” 简写。
| 属性 | 作用 | 取值说明 | 示例 |
|---|---|---|---|
| font-family | 设置字体系列 | 多个字体用英文逗号分隔，含空格的字体加引号（如'微软雅黑'） | font-family: '微软雅黑', sans-serif; |
| font-size | 设置字体大小 | 网页常用px（像素），标题需单独设置 | font-size: 20px; |
| font-weight | 设置字体粗细 | normal（400，默认）、bold（700），或 100-900 数值 | font-weight: 600;（半粗） |
| font-style | 设置字体倾斜 | normal（默认，取消倾斜）、italic（倾斜） | font-style: italic; |
| font（复合属性） | 简写字体样式 | 顺序：font-style font-weight font-size font-family（必须保留font-size和font-family） | font: italic 700 16px '微软雅黑'; |
2. 文本属性（Text）
用于控制文本的排版与外观，如颜色、对齐、缩进、装饰线等。
| 属性 | 作用 | 取值说明 | 示例 |
|---|---|---|---|
| color | 设置文本颜色 | 预定义颜色（red）、十六进制（#ff0000）、RGB/RGBA（rgba (162,1,162,0.85)） | color: rgba(162,1,162,0.85); |
| text-align | 设置文本水平对齐 | left（左对齐）、center（居中）、right（右对齐） | text-align: center; |
| text-indent | 设置首行缩进 | 常用px或em（1em = 当前字体大小），如 2em = 缩进 2 个字符 | text-indent: 2em; |
| text-decoration | 设置文本装饰线 | none（默认，取消装饰）、underline（下划线）、line-through（删除线） | text-decoration: underline; |
| line-height | 设置行高（行间距） | 数值或px，控制文字上下间距 | line-height: 26px; |
实例解析
/* 复合字体样式：倾斜、加粗、16px、微软雅黑，行高26px */
.mix {
font: italic 700 16px '微软雅黑';
line-height: 26px;
}
/* 文本样式：紫色、居中、下划线 */
.text {
color: rgba(162,1,162,0.85);
text-align: center;
text-decoration: underline;
}四、CSS 引入方式：实现结构与样式的关联
根据项目需求，CSS 有三种引入方式，核心差异在于 “样式与 HTML 的分离程度”。
| 引入方式 | 实现方式 | 优点 | 缺点 | 适用场景 |
|---|---|---|---|---|
| 内部样式表 | 在 HTML 的<head>中写<style>标签，内部放 CSS 代码 | 样式与 HTML 在同一文件，无需额外引入 | 样式无法复用到其他页面，未彻底分离 | 单页面项目，快速开发 |
| 行内样式表 | 在 HTML 标签的style属性中直接写 CSS（如<div style="color:red;">） | 权重最高，可快速修改单个元素样式 | 结构与样式混写，维护困难 | 临时调整单个元素样式（如特殊按钮颜色） |
| 外部样式表（推荐） | 1. 新建.css文件，写入所有 CSS；2. 在 HTML 中用 <link rel="stylesheet" href="CSS文件路径">引入 | 完全分离结构与样式，样式可复用至多个页面，维护方便 | 需要额外引入文件 | 多页面项目（如官网、管理系统），实际开发首选 |
关键说明
- 外部样式表的
<link>标签需放在 HTML 的<head>中，href为 CSS 文件的相对路径（如css基础.css）或绝对路径； - 三种引入方式的权重：行内样式表 > 内部 / 外部样式表（后定义的覆盖先定义的）。
五、总结
CSS 基础学习的核心是 “掌握选择器的精准筛选、属性的灵活运用、引入方式的合理选择”：
- 选择器：根据选中范围需求，优先用类选择器（灵活）、外部样式表（复用）；
- 属性：字体属性控制字体本身，文本属性控制排版外观，复合属性可简化代码；
- 规范：遵循统一代码风格，优先实现结构与样式分离（推荐外部样式表），为后续复杂布局（如 Flex、Grid）奠定基础。
浙公网安备 33010602011771号