CSS 学习笔记
CSS 学习笔记
选择器：
选择器的作用就是告诉浏览器：我要把样式作用到谁身上。
类型选择器（标签选择器）
直接用 HTML 标签名来选，选中所有同名标签。
p {
color: blue;
}
h1 {
font-size: 24px;
}
上面这段代码会让页面里所有 <p> 标签的文字变蓝，所有 <h1> 的字号变成 24 像素。
- 优点：写法简单，批量控制。
- 缺点：无法控制单个元素。如果你只想让某一个
<p>变红，类型选择器无法做到。
类选择器
实际开发中最常用、最灵活的选择器。先在 HTML 里给元素起个「类名」，然后在 CSS 里用 .类名 来精准定位。
<p class="highlight">这段话需要高亮</p>
<p>这是普通段落</p>
.highlight {
background-color: yellow;
font-weight: bold;
}
- 核心规则：类名前面必须带一个点
.，HTML 里写class="xxx"，CSS 里写.xxx。 - 复用性极强：同一个类名可以应用到无数个标签上。比如按钮样式
.btn，导航样式.nav，写一次，到处用。 - 一个标签可以挂多个类：用空格隔开，比如
<div class="btn primary">，这个 div 同时拥有btn和primary两套样式。
后代选择器与子代选择器
有时候我们需要选中「嵌套在某个元素里面的元素」，这时候就要用到基于层级关系的选择器。
后代选择器（空格）：
.nav a {
color: red;
}
- 表示选中
.nav里面的所有<a>标签，不管中间隔了多少层。只要<a>是.nav的后代，就会被选中。
子代选择器（>）：
.nav > a {
color: red;
}
- 表示只选中
.nav的直接子元素<a>。如果<a>被包在别的标签里（比如<li>里面），那就选不中。
后代选择器会选中所有嵌套在内的目标元素，无论层级深浅；子代选择器只选中直接下一级的目标元素，层级更深则不会选中。
伪类
用来选中元素的特殊状态，而不是元素本身。写法是在选择器后面加冒号 :。
链接相关（最经典的一组）：
a:link { color: blue; } /* 未被访问过的链接 */
a:visited { color: purple; } /* 已经访问过的链接 */
a:hover { color: red; } /* 鼠标悬停时的链接 */
a:active { color: orange; } /* 鼠标点击瞬间的链接 */
（L - link，V - visited，H - hover，A - active）。
结构相关：
li:first-child { color: red; } /* 选中作为第一个子元素的 li */
li:last-child { color: blue; } /* 选中作为最后一个子元素的 li */
li:nth-child(2) { color: green; } /* 选中第 2 个 li */
表单相关：
input:focus {
border-color: #409eff; /* 输入框获得焦点时，边框变蓝 */
}
input:checked {
width: 20px; /* 被选中的复选框或单选框 */
}
- 伪类用于定义元素在特定状态下的样式。用户的每一次交互（鼠标移上去、点一下、输入文字）都可以配合伪类给出视觉反馈。
字体样式与文本布局
选中了元素，下一步就是设置字体外观和排版。
字体样式：
.text {
font-family: "Microsoft YaHei", sans-serif; /* 字体：优先微软雅黑，没有就用系统默认无衬线字体 */
font-size: 16px; /* 字号 */
font-weight: bold; /* 加粗：normal(正常)、bold(加粗)、100~900(数值) */
color: #333; /* 文字颜色 */
line-height: 1.5; /* 行高：1.5 倍字号，提升阅读体验 */
}
文本布局（对齐与间距）：
.text {
text-align: center; /* 水平对齐：left(左对齐)、center(居中)、right(右对齐) */
text-indent: 2em; /* 首行缩进：2em 就是缩进两个汉字的宽度 */
letter-spacing: 2px; /* 字间距：字母/文字之间的空隙 */
word-spacing: 4px; /* 词间距：主要针对英文单词 */
}
text-align不仅能对齐文字，也能让 inline 或 inline-block 元素在容器里左右移动，是最常用的水平居中手段之一。line-height在垂直居中技巧里也经常被用到，比如让单行文字在固定高度的盒子里上下居中，设line-height等于height即可。
盒子模型：一切元素都是盒子
CSS 布局的核心：网页里所有的 HTML 元素，本质上都是一个矩形的盒子。
盒子的四层结构
从内到外依次是：内容（Content）→ 内边距（Padding）→ 边框（Border）→ 外边距（Margin）。
.box {
width: 200px; /* 内容的宽度 */
height: 100px; /* 内容的高度 */
padding: 20px; /* 内边距：内容与边框之间的留白 */
border: 2px solid black;/* 边框 */
margin: 30px; /* 外边距：盒子与盒子之间的距离 */
}
- Content：内容区域，文字、图片等元素所在的区域。
width和height默认控制的就是这一层。 - Padding：内边距，内容与边框之间的区域。background-color 会延伸到 padding 区域。它增加了元素的整体尺寸，但不影响与其他元素的间距。
- Border：边框，围绕在 padding 外部的线条。可以设置粗细、样式（实线 solid、虚线 dashed 等）、颜色。
- Margin：外边距，边框外部的透明区域。背景色不会蔓延到这里。用于控制元素与其他元素之间的距离。
两种盒模型标准
默认情况下，给元素设了 width: 200px，再加了 padding 和 border 后，盒子在页面上实际占的宽度会超过 200px。因为浏览器默认使用的是 content-box（标准盒模型），width 只算 content 的宽度。
实际开发中更推荐用 border-box：
* {
box-sizing: border-box;
}
设置之后，width: 200px 就表示从 border 外侧算总共 200px，padding 和 border 包含在这个宽度内部，不会因为加内边距而撑破布局。
字体图标：
网页里经常需要一些小图标（放大镜、购物车、用户头像）。早期直接用 PNG 图片，缺点很明显：放大模糊、颜色改不了、多一张图就多一次 HTTP 请求。
字体图标的解决方案是：把图标当成文字来用。既然文字可以改颜色、改大小、用 CSS 控制，那图标也可以。
使用方法
- 在 HTML 的
<head>中引入字体图标的 CSS 文件（官方 CDN 或本地下载）。 - 在需要显示图标的地方，用
<i>标签加上对应的类名：
<i class="fas fa-search"></i> <!-- 搜索图标 -->
<i class="fas fa-user"></i> <!-- 用户图标 -->
<i class="fas fa-shopping-cart"></i> <!-- 购物车图标 -->
- 用 CSS 像控制文字一样控制它：
.fa-search {
font-size: 24px; /* 变大 */
color: red; /* 变红 */
}
- 优点：无限缩放不模糊、随意改颜色、通过 CSS 就能控制样式、体积小加载快。
- 本质：它底层是一个
@font-face规则，把图标形状映射到了某个 Unicode 字符上，浏览器渲染时把它当成矢量文字来绘制。
总结
CSS 的核心其实就两件事：选对目标（选择器）和算好尺寸（盒子模型）。选择器让我们精确控制要美化的元素，盒子模型让我们理解元素在页面上到底占了多大地方。再加上字体图标这类实用技巧，足以应付绝大多数日常开发场景。掌握了这些基础，再去看 Flexbox 和 Grid 布局，就会轻松很多。
AtomGit 是由开放原子开源基金会联合 CSDN 等生态伙伴共同推出的新一代开源与人工智能协作平台。平台坚持“开放、中立、公益”的理念，把代码托管、模型共享、数据集托管、智能体开发体验和算力服务整合在一起，为开发者提供从开发、训练到部署的一站式体验。
更多推荐
9
0- 0
已为社区贡献2条内容
所有评论(0)