3. CSS 基础

学习成果

• CSS 的目的 — 为网页提供样式、布局以及其他视觉增强（例如动画）。

• 关键 CSS 语法

  • 规则。

  • 选择器。

  • 声明。

  • 属性（包括自定义属性）。

  • 值（包括简写值）。

  • At 规则和描述符。

• 默认浏览器样式 — 理解浏览器会为 HTML 元素提供默认的 CSS 样式，以便即使没有任何用户定义的样式，网页也能够在某种程度上可用。

  • 因此，也要理解 HTML 与样式无关。

  • 利用这一点来强化分离语义和结构（语义化 HTML）与表现（CSS）的概念，并且不使用表现性的标记。

  • 研究 CSS Reset，首先是为了证明浏览器样式存在并展示页面在移除它们后看起来是什么样子，同时也是为了作为一种为开发者构建样式提供空白画布的技术。

• 将 CSS 应用到 HTML 文档 — 行内样式、内部样式表、外部样式表

  • 为什么外部样式表通常是最佳选择。

资源

• 什么是 CSS？

• CSS 入门

• CSS 的结构

• CSS 如何工作

学习成果

• 基本选择器 — 元素类型、类、ID

  • ID 在一个文档中是唯一的 — 您应该使用 ID 来选择一个特定的元素。

  • 每个元素可以有多个类，这些类可用于根据需要叠加样式。

  • ID 和类应该在它们有意义地用于选择时谨慎使用，但您不应该将它们用于所有内容 — 尽量保持您的 HTML 干净整洁。

• 选择器列表。

• 属性选择器。

• 组合符。

• 伪类和伪元素。

资源

• CSS 选择器

• CSS 类，Scrimba 课程合作伙伴

• CSS 选择器 – 初学者类、名称、子选择器列表速查表，freeCodeCamp (2022)

学习成果

• 块级元素和内联元素。

• 构成元素的各种盒子以及如何设置它们的样式

  • width（宽度）和 height（高度）。

  • margin.

  • border.

  • padding.

• 通过 box-sizing: border-box 访问的替代盒子模型，以及为什么它比标准盒子模型更容易理解（以及它与之的区别）。

• 外边距折叠。

• 基本显示值以及它们如何影响盒子行为 — block（块）、inline（内联）、inline-block（内联块）和 none（无）。

资源

• 盒模型

• 盒子模型，web.dev (2019)

学习成果

• 理解规则在 CSS 中如何冲突。

• 继承。

• 层叠。

• 决定 CSS 冲突结果的概念

  • 特异性。

  • 源顺序。

  • 重要性。

资源

• 层叠、特异性和继承

学习成果

• 理解属性值可以有许多不同类型，以及这些类型代表什么

  • 数字、长度和百分比。

  • Em 和 rem。

  • 颜色。

  • 图像。

  • 位置。

  • 字符串和标识符。

  • 函数。

• 理解绝对单位和相对单位是什么，以及它们之间的区别。

资源

• CSS 值和单位

学习成果

• 固有尺寸。

• 设置绝对和百分比尺寸。

• min-/max-width（最小/最大宽度）和 min-/max-height（最小/最大高度）。

• 视口单位。

资源

• CSS 中的尺寸调整元素

• 处理不同的文本方向 > 逻辑属性

学习成果

• 基本背景样式 — 颜色和图像。

• 背景图像大小、重复、位置和附件。

• 背景渐变

  • 背景渐变是什么的总体概念。

  • 线性渐变。

  • （径向、锥形和重复渐变更高级，在此阶段不需要深入研究。）

• 背景的可访问性考虑 — 确保良好的对比度。

• 边框基础 — border-width（边框宽度）、border-style（边框样式）、border-color（边框颜色）以及边框简写（例如 border-top（上边框）和 border（边框））。

• border-radius（边框圆角）用于圆角。

资源

• 边框和边框圆角，Scrimba 课程合作伙伴

• 背景和边框

学习成果

• 理解溢出是什么。

• 使用 overflow（溢出）属性控制溢出。

资源

• 溢出内容

学习成果

• 对易于设置样式的表单元素进行基本样式设置，例如 <input type="text">。

• 使用 CSS Reset 来克服 <input> 元素的字体样式继承和盒子模型默认差异。

• 理解并非所有表单元素都易于设置样式，以及为什么

  • 系统样式应用于某些表单元素，导致跨浏览器样式一致性困难。

  • 更复杂的表单元素具有定义其内部工作结构的内部（影子 DOM）元素。这些元素通常无法单独访问和设置样式。

• 使用 appearance: none 来规避 search、checkbox 和 radio 等 <input> 类型的系统样式。

• 减轻 datetime-local、color 等难以设置样式的类型的问题。

注意:

遵循此课程模块并不要求对所有可能的表单样式问题都有可靠、确切的答案。有些表单元素难以设置样式，正如资源所示。但是，您至少应该能够处理各种表单样式需求，并理解一些更困难的样式问题。

资源

• 图片、媒体和表单元素

• 为网页表单添加样式

• 高级表单样式

学习成果

• 使用 HTML 验证器来查看您的页面上是否有无效标记 — 这可能导致您的 CSS 未按预期应用。

• 使用 CSS 验证器来检查格式错误的 CSS 代码。缺少分号可能会导致一整段 CSS 声明无法应用。

• 使用浏览器开发者工具检查应用于页面上 HTML 元素的 CSS。

• 修改应用的 CSS 以确定需要进行哪些更改才能达到您想要的效果。这包括启用和禁用声明、修改值以及添加新声明。

• 使用布局检查工具来检查盒子模型、网格、Flexbox 以及其他布局功能（另请参阅 CSS 布局）。

• 使用响应式设计模式工具来检查响应式布局（另请参阅 5.5 响应式设计细节）。

资源

• 调试 CSS

• 处理常见的 HTML 和 CSS 问题

• Firefox > 检查和编辑 CSS，Firefox Source Docs

• Firefox > 响应式设计模式，Firefox Source Docs

• Chrome > 查看和更改 CSS，developer.chrome.com)