🎨 CSS

概述：CSS（Cascading Style Sheets，层叠样式表）是用于描述 HTML 文档视觉呈现的样式语言。CSS 控制网页的布局、颜色、字体、动画等视觉效果，与 HTML 结构层和 JavaScript 行为层共同构成现代 Web 前端三大支柱。

概述

CSS 属于 前端与客户端语言 分类。CSS3 是最新标准，引入了 Flexbox、Grid、自定义属性、动画等现代特性。

语言特点

• 层叠与继承：样式可以层叠覆盖，子元素继承父元素样式
• 选择器丰富：从基本选择器到伪元素，精确定位页面元素
• 响应式设计：媒体查询适配不同设备和屏幕尺寸
• 动画与过渡：原生 CSS 动画无需 JavaScript
• CSS 变量：自定义属性（Custom Properties）实现主题化

Hello World

/* CSS 本身不独立输出，配合 HTML 使用 */
h1 {
    color: #333;
    font-size: 24px;
    text-align: center;
}

基础语法

选择器

/* 基本选择器 */
element { }          /* 标签选择器 */
.class { }           /* 类选择器 */
#id { }              /* ID 选择器 */
* { }                /* 通配选择器 */

/* 组合选择器 */
div p { }            /* 后代选择器 */
div > p { }          /* 子代选择器 */
div + p { }          /* 相邻兄弟 */
div ~ p { }          /* 通用兄弟 */

/* 属性选择器 */
[type="text"] { }
[href^="https"] { }  /* 以 https 开头 */
[src$=".png"] { }    /* 以 .png 结尾 */

/* 伪类 */
a:hover { }          /* 悬停 */
li:first-child { }   /* 第一个子元素 */
li:nth-child(2n) { } /* 偶数项 */

/* 伪元素 */
p::before { content: "» "; }
p::first-line { font-weight: bold; }

盒模型

.box {
    /* 内容区域 */
    width: 200px;
    height: 100px;

    /* 内边距 */
    padding: 10px 20px;  /* 上下 10px，左右 20px */

    /* 边框 */
    border: 1px solid #ccc;

    /* 外边距 */
    margin: 10px auto;   /* 上下 10px，水平居中 */

    /* 盒模型计算方式 */
    box-sizing: border-box;  /* width 包含 padding 和 border */
}

Flexbox 布局

.container {
    display: flex;
    justify-content: center;   /* 主轴对齐 */
    align-items: center;       /* 交叉轴对齐 */
    gap: 10px;                 /* 间距 */
    flex-wrap: wrap;           /* 换行 */
}

.item {
    flex: 1;                   /* 等比分配 */
    flex: 0 0 200px;          /* 固定宽度 */
}

Grid 布局

.grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);  /* 三等分 */
    grid-template-rows: auto;
    gap: 20px;
}

.item {
    grid-column: span 2;      /* 跨两列 */
    grid-row: 1 / 3;          /* 从第 1 行到第 3 行 */
}

响应式设计

/* 媒体查询 */
@media (max-width: 768px) {
    .container {
        flex-direction: column;
    }
}

/* CSS 变量 */
:root {
    --primary-color: #3b82f6;
    --font-size-base: 16px;
}

.button {
    background-color: var(--primary-color);
    font-size: var(--font-size-base);
}

动画

/* 过渡 */
.button {
    transition: all 0.3s ease;
}
.button:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* 关键帧动画 */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.element {
    animation: fadeIn 0.5s ease-out;
}

应用领域

• 网页样式：页面布局、颜色、字体等视觉设计
• 响应式设计：适配不同设备和屏幕尺寸
• 动画效果：过渡动画和关键帧动画
• CSS 框架：Tailwind CSS、Bootstrap 快速开发
• 设计系统：统一的视觉规范和组件库
• 打印样式：针对打印介质的特殊排版

开发环境搭建

1. 浏览器开发者工具：F12 → Elements/Styles 面板
2. 编辑器：VS Code + CSS IntelliSense 扩展
3. 预处理器：Sass/SCSS 或 PostCSS
4. 框架：Tailwind CSS 或 Bootstrap
5. 在线练习：CodePen、CSS-Tricks

学习路线

1. 入门阶段：选择器 → 盒模型 → 定位 → 文本样式
2. 进阶阶段：Flexbox → Grid → 响应式设计 → CSS 变量
3. 实战阶段：CSS 框架 → 动画 → 预处理器 → 组件化样式
4. 高级阶段：CSS Houdini → 性能优化 → 设计系统 → CSS-in-JS

---

返回首页 | 查看所有语言