CSS 基础详解
你想要系统了解 CSS 的基础知识，CSS（Cascading Style Sheets，层叠样式表）的核心作用是控制 HTML 页面的布局、外观和样式，让网页从纯文本结构变得美观且有层次感。下面从核心概念、语法、使用方式等方面展开完整讲解：
一、CSS 核心作用
简单来说，CSS 是用来 “美化” 和 “布局” HTML 页面 的：
美化：设置文字颜色、大小、字体，元素背景、边框、阴影等；
布局：控制元素的位置（左、右、居中）、大小（宽、高）、排列方式（横向、纵向）等，解决你之前遇到的 “文字自动换行” 也属于 CSS 的布局能力范畴。
二、CSS 基本语法结构
CSS 的语法由 选择器（Selector）、声明块（Declaration Block） 两大部分组成，整体结构如下：
css
/ 1. 选择器：用于定位要设置样式的HTML元素（标签/类/ID等） /
选择器 {
/ 2. 声明块：包裹在大括号 {} 内，包含一个或多个样式声明 /
属性1: 值1; / 3. 单个样式声明：属性: 值; （必须以分号 ; 结尾，最后一个可省略） /
属性2: 值2;
}
语法示例（直观理解）
css
/ 选择器：p → 定位页面中所有
标签 /
p {
/ 声明块：设置
标签的文字颜色和大小 /
color: red; / 属性：color（文字颜色），值：red（红色） /
font-size: 16px; / 属性：font-size（文字大小），值：16px（16像素） /
}
语法关键注意点
注释：CSS 注释以 / 开头，/ 结尾（单行、多行均可），注释不会被浏览器解析执行；
分号：单个样式声明的结尾必须加 ;，这是 CSS 语法的规范，避免多个样式之间冲突；
大小写：CSS 选择器和属性对大小写不敏感（如 Color: RED; 也生效），但建议统一使用小写，提升代码可读性。
三、CSS 三种引入方式（嵌入到 HTML 页面）
要让 CSS 样式生效，必须将其引入到 HTML 页面中，常用的有 3 种引入方式，各有优劣和适用场景：
- 行内样式（内联样式）
特点
直接通过 HTML 元素的 style 属性写入 CSS 样式，仅对当前元素生效，属于 “就近生效” 的样式。
语法示例
html
预览
这是行内样式演示文本
适用场景
临时修改单个元素的样式，快速测试效果；不推荐大面积使用（会造成代码冗余，难以维护）。 - 内部样式表（嵌入式样式）
特点
在 HTML 页面的
这是受内部样式表控制的文本
适用场景
单个 HTML 页面的专属样式，代码集中在页面头部，便于快速修改和调试，适合简单页面开发。
特点
将 CSS 代码单独写入一个后缀为 .css 的独立文件中，再在 HTML 页面的
步骤示例
新建独立 CSS 文件：style.css（存放所有样式代码）
css
/ style.css 中的代码 /
h1 {
color: purple;
text-align: center;
}
.auto-wrap {
width: 200px;
word-break: break-all;
border: 1px solid #ccc;
}
HTML 页面中引入 CSS 文件：
html
预览
<!DOCTYPE html>
这是外部样式表控制的标题
适用场景
多页面网站开发（如官网、商城），实现样式复用，便于后期维护和修改（改一个 CSS 文件，所有引用的页面都生效），也是企业开发的标准方式。
三种引入方式优先级（补充）
当同一元素被多种样式同时控制时，优先级遵循：行内样式 > 内部样式表 > 外部样式表（就近原则，离元素越近，优先级越高）。
四、CSS 常用选择器（定位 HTML 元素的核心）
选择器的作用是精准定位需要设置样式的 HTML 元素，常用的基础选择器有以下 4 种，是后续学习复杂选择器的基础：
语法：直接使用 HTML 标签名作为选择器（如 p、div、h1、body）；
作用：选中页面中所有该类型的标签，实现批量样式设置；
示例：
css
/ 选中所有
div {
margin: 10px;
padding: 5px;
}
语法：以 . 开头，后面跟自定义的类名（如 .box、.auto-wrap、.text-red）；
作用：选中页面中所有带有该类名的元素（无论是什么标签），实现样式复用，灵活度最高；
注意：HTML 元素通过 class 属性绑定类名，一个元素可以绑定多个类名（用空格分隔）；
示例：
css
/ 类选择器：选中所有 class="text-center" 的元素 /
.text-center {
text-align: center; / 文字居中 /
}
html
预览
标题居中
段落文本也居中
语法：以 # 开头，后面跟自定义的 ID 名（如 #header、#content、#footer）；
作用：选中页面中唯一带有该 ID 名的元素（HTML 规范中，ID 名在单个页面中必须唯一，不能重复）；
注意：HTML 元素通过 id 属性绑定 ID 名，一个元素只能绑定一个 ID 名；
示例：
css
/ ID选择器：选中 id="header" 的唯一元素 /
header {
height: 80px;background-color: #333;
}
html
预览
语法：使用 作为选择器；
作用：选中页面中所有的 HTML 元素（包括
适用场景：快速重置页面默认样式（如清除所有元素的默认边距），不推荐大面积用于样式设置（会影响性能）；
示例：
css
/ 通配符选择器：清除所有元素的默认内外边距 */
- {
margin: 0;
padding: 0;
}
五、CSS 常用基础属性（快速上手）
给大家整理了开发中最常用的基础 CSS 属性，分为两类，便于快速记忆和使用：
- 文字 / 文本样式属性
属性名 作用 常用值示例
color 设置文字颜色 red、#ff0000、rgb(255,0,0)
font-size 设置文字大小 14px、16px、1.2rem
font-family 设置文字字体 微软雅黑、Arial、sans-serif
text-align 设置文本水平对齐 left（左）、center（中）、right（右）
line-height 设置文本行高（行间距） 24px、1.5（倍行高）
text-decoration 设置文本装饰（下划线等） none（清除下划线）、underline（下划线） - 元素盒子样式属性（控制元素本身）
属性名 作用 常用值示例
width 设置元素宽度 200px、100%、auto
height 设置元素高度 100px、50vh、auto
background 设置元素背景（颜色 / 图片） #f5f5f5、url(./bg.jpg)
border 设置元素边框 1px solid #ccc（1 像素灰色实线）
margin 设置元素外边距（与其他元素的间距） 10px、0 auto（左右居中）
padding 设置元素内边距（元素内容与边框的间距） 5px、10px 20px（上下 10，左右 20）
总结
CSS 核心是控制 HTML 的样式和布局，语法由「选择器 + 声明块（属性：值；）」组成；
三种引入方式：行内（临时测试）、内部（单页面）、外部（多页面推荐，样式复用）；
四种基础选择器：元素（批量标签）、类（样式复用，最常用）、ID（唯一元素）、通配符（全选重置）；
快速上手：掌握文字样式和元素盒子样式的常用属性，即可实现基础的网页美化和布局。
掌握这些基础内容后，你就可以开始编写简单的 CSS 样式，解决网页中的大部分基础样式问题（如之前的文字自动换行、文字居中、元素布局等）。
