CSS 基础

CSS（Cascading Style Sheets）用于描述 HTML（或 XML）文档的视觉呈现，包括布局、颜色、字体、间距等。CSS 与 HTML、JavaScript 共同构成 Web 开发的基础。

1. CSS 规则的基本结构

CSS 由“选择器 + 声明块”组成：

css

selector {
  property: value;
  property: value;
}

2. CSS 的引入方式

CSS 常见的 3 种使用方式：

行内样式（Inline CSS）：在 HTML 元素上使用 style 属性
内部样式（Internal CSS）：在 HTML 的 <head> 内使用 <style>
外部样式（External CSS）：通过 <link> 引用独立的 .css 文件

3. 示例

css

h1 {
  color: blue;
  font-size: 24px;
  text-align: center;
}

4. 常用属性分类

文本类：font-family、font-size、color、text-align
盒模型：margin、padding、border、width、height
背景：background-color、background-image、background-repeat
布局：display、position、float、clear
视觉效果：opacity、visibility、overflow

5. 常用单位

绝对单位：px、pt、cm、mm
相对单位：%、em、rem、vh、vw

6. 颜色写法

css

color: red;
color: #ff0000;
color: rgb(255, 0, 0);
color: rgba(255, 0, 0, 0.5);

7. 继承与层叠

继承：某些属性（如 color、font-family）会从父元素传递到子元素。
层叠：当多条规则同时命中同一元素时，浏览器会根据来源、优先级与书写顺序决定最终样式。

8. 优先级（Specificity）

从高到低大致如下：

行内样式
ID 选择器
类选择器 / 属性选择器 / 伪类
元素选择器 / 伪元素

9. 常见 CSS3/现代能力

Flexbox：一维布局
Grid：二维布局
Transitions / Animations：过渡与动画
Transforms：变换
Media Queries：响应式
CSS Variables（自定义属性）、Container Queries

10. 现代工程实践（概览）

预处理器：Sass、Less、Stylus
框架/工具：Bootstrap、Tailwind CSS 等
CSS Modules、CSS-in-JS（如 styled-components、Emotion）