A2. CSS 入门

为什么同样的内容在不同网站看起来天差地别？这就是CSS的魔力！如果说HTML是房子的骨架，CSS就是装修设计。它能改变文字颜色、调整布局、添加动画效果，让网页从黑白报纸变成时尚杂志。在这个单元，你将学会如何用选择器精准定位元素，用盒模型控制布局。准备好让你的网页『颜值爆表』了吗？让我们一起用CSS为网页穿上漂亮的外衣！

你将学到

• CSS 基础语法：学会为你的代码添加第一行 CSS
• 长度单位：了解 CSS 多种多样的长度单位
• 颜色表示：学会使用 CSS 颜色
• 常用属性：元素显示、文本对齐、字体家族、溢出处理等

为什么重要

• 奠定基础：CSS 是网页设计中不可缺少的一门技术，它允许你为网页添加样式。
• 界面美观：CSS 允许你为网页添加样式，从而提高网页的设计效果。

学习提示

• 牢记基础语法：CSS 的语法非常简单，只需要知道如何添加 CSS 代码，并应用到网页中。
• 善用开发者工具：在开发过程中，你可以使用浏览器的开发者工具来实时调试样式。
• 亲手敲代码：通过练习，你可以学习到 CSS 的基本语法和应用。

速查表 / Cheatsheet

亦可参见：https://htmlcheatsheet.com/css/

1. CSS 基础语法 长度属性值

   1. CSS 通过 style 属性添加内联样式，声明格式为 属性: 值;。
   2. px 是绝对单位，em 基于父级字体大小，rem 基于根字体大小。
   3. font-size 控制文字尺寸，支持关键字（如 large）和长度值（如 20px）。
   4. width / height 对块级元素生效，可以使用长度值或百分比值。

2. 颜色 CSS 调试

   1. 颜色表示：标准名称 / rgb(a) / hsl(a) / 十六进制
      1. 标准名称：red 等。
      2. rgb：rgb(255, 0, 0) 等，每个分量在 [0, 255] 之间。
      3. hsl：hsl(120, 100%, 50%) 等，H 在 [0, 360] 之间，S/L 在 [0%, 100%] 之间。
   2. alpha 通道（不透明度）用 0~1 小数，十六进制可简写
   3. HSL 可以直观调色：
      1. H：色相，0~360，0 红，120 绿，240 蓝。
      2. S：饱和度，0% 灰，100% 鲜艳。
      3. L：亮度，
   4. color 控制前景色，background-color 控制背景
   5. 开发者工具中“样式”可以实时调试，“已计算”显示最终样式

3. 盒模型

   1. 盒模型四层结构：内容区 → 内边距（padding） → 边框（border） → 外边距（margin）
   2. margin / padding 简写规则：单值全相同，双值上下/左右，四值顺时针上右下左
   3. border 必须按顺序 <width> / <style> / <color>
   4. box-sizing 控制宽度计算方式，分为 content-box 和 border-box。

4. CSS 选择器

   1. id 是唯一标识符，# 号选择；class 是可重复使用的类名，. 号选择。
   2. 样式表引入：内嵌用 <style>，外部用 <link>。
   3. 基本语法：selector { attribute: value; }。
   4. 选择器列表使用逗号，所有元素平行选择。
   5. 层级选择用空格 选择所有子孙 或 > 选择直接子元素。
   6. 优先级：ID > class > 标签选择器。

5. CSS 常用属性 兼容性

   1. display 控制元素显示类型：
      • none 不显示
      • block / inline-block / inline
   2. text-align 作用于文本容器内部 left / center / right，居中元素本身需用 margin: 0 auto;
   3. font-family 需要设置回退字体和通用字体族。字体间用逗号隔开，字体有空格时外层要添加引号
   4. overflow 处理内容溢出，常配合固定尺寸使用
      • hidden 隐藏溢出
      • scroll 强制显示滚动条
      • auto 根据内容智能显示滚动条
      • visible 默认显示
   5. border-radius可用百分比创建圆形
   6. 使用 Can I Use 查询兼容性