什么是 CSS？

CSS（层叠样式表）是一种样式表语言，用于描述 HTML 和 XML 文档的呈现。它控制网页的视觉外观，包括布局、颜色、字体和响应式设计。

快速了解

全称层叠样式表
创建时间1996 年（W3C 推荐标准）
规范文档官方规范

CSS 工作原理

CSS 由 Håkon Wium Lie 于 1994 年首次提出，并于 1996 年成为 W3C 推荐标准。'层叠'指的是当多个规则针对同一元素时，确定应用哪些样式规则的优先级方案。CSS 将内容（HTML）与呈现分离，使网站更易于维护和更具可访问性。现代 CSS 包括强大的功能，如 Flexbox、Grid、自定义属性（变量）、动画和用于响应式设计的媒体查询。CSS3 引入了持续发展的模块化规范。

主要特点

  • 将内容与呈现分离
  • 样式规则的层叠优先级系统
  • 支持使用媒体查询的响应式设计
  • 包括 Flexbox 和 Grid 布局系统
  • 支持动画和过渡效果
  • 自定义属性（CSS 变量）实现可重用性

常见用途

  1. 网站样式和主题
  2. 响应式网页设计
  3. UI 组件样式
  4. 打印样式表
  5. 动画和视觉效果

示例

/* 基本选择器 */
body {
  font-family: 'Arial', sans-serif;
  line-height: 1.6;
  color: #333;
}

/* 类选择器 */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* Flexbox 布局 */
.flex-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
}

/* CSS Grid */
.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

/* 响应式设计的媒体查询 */
@media (max-width: 768px) {
  .grid {
    grid-template-columns: 1fr;
  }
}

/* CSS 变量 */
:root {
  --primary-color: #3498db;
}

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

QubitTool 相关工具

CSS 格式化工具

免费在线格式化、美化和压缩 CSS 代码

相关概念

JSON