💻 基础语法入门

CSS 通过选择器定位 HTML 元素，使用属性定义样式。核心结构如下：

/* 选择器 { 属性 } */
selector {
  property: value;
}
  • selector 可是标签名（如 p）、类名（.class）或 ID（#id）
  • 属性包括 color、font-size、background 等
  • 值可带单位（如 px、em）或颜色代码（如 #000000）
css_syntax

🔍 选择器进阶技巧

掌握这些选择器能让样式控制更精准：

  • 全局选择器 *：匹配所有元素
  • 类选择器 .class：匹配特定类
  • ID 选择器 #id：匹配唯一 ID
  • 后代选择器 div p：匹配 div 内所有 p 元素
  • 伪类选择器 .hover：匹配悬停状态
css_selectors

🧱 布局神器：Flex & Grid

现代布局必备工具：

📐 Flex 布局

  • display: flex 启用弹性盒子
  • flex-direction 控制排列方向
  • justify-content 对齐方式
  • align-items 垂直对齐

📌 Grid 布局

  • display: grid 创建网格系统
  • grid-template-columns 定义列数
  • grid-gap 设置间距
  • grid-auto-flow 自动填充策略
flex_grid_layout

📘 实用资源推荐

想要深入学习？欢迎访问：

css_realworld