CSS 基础与实战：从入门到精通网页美化
前言
如果说 HTML 是网页的"骨架"，那么 CSS（Cascading Style Sheets，层叠样式表）就是网页的"皮肤"和"化妆术"。CSS 能够对网页中元素的排版进行像素级的精确控制，实现美化页面的效果。掌握 CSS，不仅能做到页面的样式和结构分离，更是前端开发的核心基本功。
一、 CSS 基础概念与引入方式
1. 基本语法规范
CSS 的语法主要由两部分构成：选择器 和 声明。
- 选择器：决定针对谁修改（找谁）。
- 声明 ：决定修改啥（干啥）。声明是键值对形式，如
color: red;。
注意规范：
- CSS 要写在
<style>标签中（内部样式）或独立的.css文件中。 - 注释使用
/* */，快捷键Ctrl + /。 - 推荐使用展开风格书写，冒号后带空格，选择器和
{之间也有一个空格。
2. 引入方式
- 内部样式表 ：写在 HTML 的
<style>标签中，一般放在<head>内。适合单页面开发，但内容多时不够分离。 - 行内样式表 ：通过标签的
style属性直接指定。优先级极高，会覆盖其他样式，适合写简单样式。 - 外部样式表（最常用） ：创建独立的
.css文件，通过<link rel="stylesheet" href="style.css">引入。这是实际开发中最标准的做法，做到了结构和样式彻底分离。- 注意 ：如果修改 CSS 后页面没变化，可能是浏览器缓存导致的，可以使用
Ctrl + F5强制刷新。
- 注意 ：如果修改 CSS 后页面没变化，可能是浏览器缓存导致的，可以使用
二、 核心：CSS 选择器
选择器的功能是选中页面中指定的标签元素，只有先选中，才能设置属性。
1. 基础选择器
- 标签选择器 ：如
p { color: red; }。能快速选择所有同类型标签，但不能差异化选择。 - 类选择器 ：以
.开头，如.blue { color: blue; }，HTML 中通过class="blue"调用。最灵活、最常用，一个标签可以使用多个类名。 - id 选择器 ：以
#开头，如#ha { color: red; }。id 是唯一的，不能被多个标签使用（类似身份证）。 - 通配符选择器 ：用
*定义，选取所有标签。常用于清除浏览器默认样式。
2. 复合选择器
- 后代选择器 ：
元素1 元素2 { ... }，选中元素1内部的元素2（可以是儿子也可以是孙子）。 - 子选择器 ：
元素1 > 元素2 { ... }，只选亲儿子，不选孙子。 - 并集选择器 ：
元素1, 元素2 { ... }，用于选择多组标签，集体声明。 - 伪类选择器 ：
- 链接伪类 ：
a:link（未访问）、a:visited（已访问）、a:hover（悬停）、a:active（按下未弹起）。书写顺序建议记作 "LVHA"（绿化）。 - 焦点伪类 ：
:focus，选中获取焦点的input表单元素。
- 链接伪类 ：
三、 常用元素属性：美化文本与背景
1. 文本与字体属性
- 字体设置 ：
font-family: '微软雅黑';（建议使用常见字体）。 - 字体大小 ：
font-size: 20px;（chrome 默认 16px）。 - 字体粗细 ：
font-weight: bold;或700（400 为正常）。 - 文字样式 ：
font-style: italic;（倾斜），或normal（取消倾斜）。 - 文本颜色 ：支持预定义颜色（
red）、十六进制（#ff0000，可简写为#f00）、RGB（rgb(255, 0, 0)）。 - 文本对齐 ：
text-align: center / left / right;。 - 文本装饰 ：
text-decoration: underline / none / line-through;（常用于去掉a标签的下划线）。 - 文本缩进 ：
text-indent: 2em;（1em 即为当前元素的文字大小）。 - 行高 ：
line-height: 40px;。行高 = 上边距 + 下边距 + 字体大小。当行高等于元素高度时，可实现单行文本垂直居中。
2. 背景属性
- 背景颜色 ：
background-color，默认是transparent（透明）。 - 背景图片 ：
background-image: url(...)，注意 url 不要遗漏。 - 背景平铺 ：
background-repeat: repeat / no-repeat / repeat-x / repeat-y;。 - 背景位置 ：
background-position，支持方位名词（center top）、精确坐标（100px 200px）或混合使用。 - 背景尺寸 ：
background-size。重点掌握cover（完全覆盖，可能裁剪）和contain（长宽完全适应内容区域，可能留白）。 - 圆角矩形 ：
border-radius: 10px;。若要生成圆形，设置为正方形宽度的一半（或 50%）。
四、 深入理解：元素的显示模式与盒模型
1. 元素的显示模式
- 块级元素 （
h1-h6, p, div, ul, ol, li）：独占一行；高度、宽度、内外边距都可控；宽度默认是父级的 100%。 - 行内元素/内联元素 （
a, strong, b, em, i, del, s, ins, u, span）：不独占一行；设置宽高无效；默认宽度就是内容本身；上下外边距无效。 - 显示模式转换 ：使用
display属性，如display: block;（转块级）、display: inline;（转行内）、display: inline-block;（转行内块）。
2. 盒模型 (Box Model)
每一个 HTML 元素都相当于一个矩形的"盒子"，由内向外分为四个部分：
- 内容 (Content)
- 内边距 (Padding)：内容与边框的距离。
- 边框 (Border) ：
border: 1px solid red;。 - 外边距 (Margin)：盒子与盒子之间的距离。
核心注意点：
- 默认情况下，边框和内边距会撑大盒子。
- 可以通过通配符设置
* { box-sizing: border-box; }来改变盒子的计算方式，让边框和内边距不再撑大盒子。 - 块级元素水平居中 ：设定宽度后，设置
margin: 0 auto;。 - 清除浏览器默认样式 ：使用
* { margin: 0; padding: 0; }。
五、 现代布局：Flex 弹性布局
在以前，我们常用 display: flex 来让 span 等行内元素拥有高度，但如今 Flex 已经成为网页布局的主流。
1. 基本概念
给父盒子添加 display: flex; 即可开启弹性布局。子元素会自动成为 Flex Item（项目），默认沿主轴（水平）排列。注意：子元素的 float, clear, vertical-align 属性会失效。
2. 常用属性
justify-content：控制主轴（水平）上的子元素排列方式。flex-start（默认，左对齐）flex-end（右对齐）center（居中）space-around（平分剩余空间，两边元素离边缘有空隙）space-between（两边元素贴近边缘，再平分剩余空间）
align-items：控制侧轴（垂直）上的子元素排列方式。stretch（默认，拉伸填满父元素）flex-start/flex-end/center等。- 单行元素垂直居中神器 ：父元素设置
display: flex; align-items: center;。
六、 效率神器：Chrome 调试工具
开发 CSS 时，F12 调试工具必不可少：
- Elements 标签页：查看和修改标签结构、CSS 属性。
- 可以在右侧实时调整颜色、字体大小，修改不会影响代码，刷新即还原。
- 如果有写错的 CSS 属性，会有黄色感叹号提示。
总结
CSS 的知识点非常细碎，但掌握"选择器 "、"盒模型 "和"Flex 布局"这三座大山，你就可以应对绝大多数页面的样式开发了。不需要死记硬背所有属性，而是在使用中不断查阅文档积累。通过不断的练习和 Chrome 调试，相信你很快就能为 HTML 骨架穿上华丽的衣裳！