CSS学习笔记3：颜色、字体与文本属性基础
下面我们马上就要准备开始学习CSS的更加深入的内容，但是在那之前，我们有必要展开了解CSS中一些最基本的构件，比如说颜色、字体与文本。他们组成了CSS中核心的骨干部分。另一部分是我们稍后会涉及到的布局等问题。
颜色（Color）
关于颜色几个最基本的属性
color: 文本颜色（继承）。background-color: 背景色（不继承）。
常见颜色写法
css
/* 十六进制 */
color: #ff5722; /* #RRGGBB */
color: #0f0; /* 简短形式：#RGB -> #00ff00 */
/* 十六进制带 alpha（现代浏览器支持） */
color: #ff572280; /* #RRGGBBAA，最后两位为 alpha */
/* RGB / RGBA */
color: rgb(255, 87, 34);
color: rgba(255, 87, 34, 0.6); /* alpha */
/* HSL / HSLA（更直观调整色相/饱和度/亮度） */
color: hsl(14, 100%, 58%);
color: hsla(14, 100%, 58%, 0.6);
/* 关键字（named colors）*/
color: crimson;
/* 当前颜色关键字（继承父元素 color） */
border-color: currentColor;CSS 变量
这个概念可能一些朋友会比较陌生，我也是，查了一下，整理在下面：
CSS 变量，也称为 CSS 自定义属性（Custom Properties），是一种强大的 CSS 功能，允许你在一个地方存储一个值，然后在样式表的其他多个地方重复使用它。
这不就是字面值变量嘛！
主要特点
- 声明方式： 变量名必须以双连字符（
--）开头，例如：--main-color: #3498db; - 作用域： 它们是 受级联约束 的，可以像常规 CSS 属性一样在特定的选择器（如
:root、.element）中声明，并从父级继承其值。通常，为了在全局使用，它们会声明在:root伪类中。 - 使用方式： 通过
var()函数来引用变量的值，例如：color: var(--main-color); - 语义化： 使用
--main-text-color这样的变量名比直接使用十六进制颜色值（如#00ff00）更具 语义化，更容易理解。
css
:root{
--bg: #ffffff;
--text: #111827;
--primary: #0b84ff;
--muted: rgba(17,24,39,0.6);
}
body { background: var(--bg); color: var(--text); }
a { color: var(--primary); }
small { color: var(--muted); }好处：可在运行时统一调整主题（暗色/亮色），减少重复。
透明度注意
opacity会影响整个元素及其子元素。rgba()/hsla()/#RRGGBBAA仅影响颜色本身，更常用于只想降低颜色透明度时。
可访问性与对比度
- 可读文本通常应满足 WCAG 对比度建议：正文文本最少
4.5:1（大文本3:1）。 - 避免浅色文本放在花哨背景上。使用工具检查对比度（浏览器扩展或在线工具）。
字体（Fonts）
基本属性
font-family: 指定字体家族（可列多个做回退）。font-size: 字体大小。font-weight: 粗细（normal/bold或数字100--900）。font-style:normal | italic | oblique。line-height: 行高。font-variant: 小型大写字母等。@font-face：引入 web 字体。
字体栈
css
body {
font-family: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
}原则：自定义字体 -> 系统相近字体 -> 通用族（serif / sans-serif / monospace）。
font 简写与长写
文档更加推介利用font进行编写和设置属性，这样更加集中
css
/* 简写：font: [style] [variant] [weight] [size]/[line-height] [family]; */
h1 { font: italic small-caps 700 2rem/1.2 "Inter", sans-serif; }
/* 更常用的分开写法 */
p { font-size: 16px; line-height: 1.6; font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }单位选择（font-size）
px: 固定像素，直观但不响应用户缩放。rem: 相对于根元素（html）字体大小。推荐用于布局与响应式，因为可调整。em: 相对于当前元素字体大小，使用时需注意嵌套放大/缩小的副作用。%: 类似em。vw/vh: 视窗相关单位，适合创意式响应式字体，但需小心极端视窗尺寸。
推荐：用rem结合根字体（通常html { font-size: 16px; }）来建立可预测的缩放。
@font-face（引入 Web 字体）
css
@font-face {
font-family: "MyInter";
src: url("/fonts/Inter-Variable.woff2") format("woff2");
font-weight: 100 900; /* 可用于 variable font */
font-style: normal;
font-display: swap; /* fallback 替换策略 */
}font-display: swap可尽快显示系统字体，再替换为 web 字体，提升感知性能。- 优化：只加载需要的字体权重/字符集，合并/使用 woff2，使用 preload/preconnect。
文本排版（Text / Typography）属性
行高（line-height）
css
p { line-height: 1.6; }
h1 { line-height: 1.2; }- 常用无单位数值（如
1.5）便于继承与缩放。
字间/词间（letter-spacing / word-spacing）
css
h1 { letter-spacing: 0.02em; } /* 调整字母间距 */- 大标题常微调
letter-spacing；正文一般不用过大值。
对齐（text-align）
left | right | center | justify。- 注意：完全两端对齐（
justify）会产生不自然的字间距，尤其是短行。
文本修饰（text-decoration）
css
a { text-decoration: underline; text-decoration-thickness: 2px; text-decoration-color: var(--primary); text-underline-offset: 3px; }- 新属性可定制下划线粗细与偏移（现代浏览器支持较好）。
text-decoration-skip-ink: auto;可以避免下划线穿过字母笔画（更美观）。
转换（text-transform）
uppercase | lowercase | capitalize，注意：全部大写会降低可读性，慎用于长段落。
溢出处理（white-space / overflow-wrap / word-break / text-overflow）
css
/* 单行省略号 */
.single-line {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* 强制换行 */
p { overflow-wrap: break-word; /* or word-break: break-word; */ }overflow-wrap: break-word能避免长 URL 或长字符串撑破容器。
文字阴影（text-shadow）
css
h1 { text-shadow: 0 1px 2px rgba(0,0,0,0.2); }- 用于微妙的层次感，但切勿过度。
垂直对齐（vertical-align）
- 主要用于 inline 元素或表格单元格的垂直对齐（如 icon 与文本在同一行时）。
方向与书写方式（direction / writing-mode）
direction: ltr | rtl（左右书写）；writing-mode支持竖排文本（东亚排版）。- 国际化时必须注意 RTL 语言（阿拉伯语/希伯来语）布局差异。