3. CSS 基础

样式

核心模块

CSS 允许您为网页添加样式，包括颜色、文本、定位和布局以及动画。 在我们的第一个 CSS 模块中，我们将涵盖您需要了解 CSS 工作原理的所有基本语言机制。

通用资源

3.1 CSS 基本语法

学习成果

  • CSS 的目的 - 样式、布局，并为网页提供其他视觉增强（例如动画）。
  • 关键 CSS 语法
    • 规则。
    • 选择器。
    • 声明。
    • 属性（包括自定义属性）。
    • 值（包括简写值）。
    • 规则集和描述符。
  • 默认浏览器样式 - 了解浏览器为 HTML 元素提供默认 CSS 样式，以便即使没有任何用户定义的样式，它在某种程度上也是可用的。
    • 因此，也理解 HTML 与样式无关。
    • 利用这一点来加强语义和结构（语义化 HTML）与表示（CSS）分离的概念，以及不要使用表现性标记。
    • 研究 CSS 重置，首先证明浏览器样式存在并显示删除它们时页面的外观，而且也作为一种为开发人员提供空白画布以在其之上构建样式的技术。
  • 将 CSS 应用于 HTML 文档 - 内联样式、内部样式表、外部样式表
    • 为什么外部样式表通常是最佳选择。

资源

3.2 选择器

学习成果

  • 基本选择器 - 元素类型、类、ID
    • 每个文档的 ID 都是唯一的 - 您应该使用 ID 来选择一个特定元素。
    • 每个元素可以有多个类，这些类可用于根据需要分层应用样式。
    • ID 和类应谨慎使用，在它们对选择有意义的情况下使用，但不要对所有内容都使用它们 - 保持 HTML 尽可能干净和简洁。
  • 选择器列表。
  • 属性选择器。
  • 组合符。
  • 伪类和伪元素。

资源

3.3 盒模型

学习成果

  • 块级元素和内联元素。
  • 组成元素的不同盒子以及如何对其进行样式化
    • width 和 height。
    • margin.
    • border.
    • padding.
  • 通过 box-sizing: border-box 访问的替代盒子模型，以及为什么这更容易理解（以及它与标准盒子模型有何不同）。
  • 边距折叠。
  • 基本显示值，以及它们如何影响盒子行为 - block、inline、inline-block 和 none。

资源

3.4 处理 CSS 中的冲突

学习成果

  • 了解规则如何在 CSS 中发生冲突。
  • 继承。
  • 层叠。
  • 控制 CSS 冲突结果的概念
    • 特异性。
    • 源顺序。
    • 重要性。

资源

3.5 值和单位

学习成果

  • 了解属性值可以采用多种类型，以及这些类型代表什么
    • 数字、长度和百分比。
    • em 和 rem。
    • 颜色。
    • 图像。
    • 位置。
    • 字符串和标识符。
    • 函数。
  • 了解绝对单位和相对单位是什么，以及它们之间的区别。

资源

3.6 大小

学习成果

  • 内在尺寸。
  • 设置绝对尺寸和百分比尺寸。
  • min-/max-width 和 min-/max-height。
  • 视窗单位。

资源

3.7 背景和边框

学习成果

  • 基本背景样式 - 颜色和图像。
  • 背景图像大小、重复、位置和附件。
  • 背景渐变
    • 背景渐变的一般概念。
    • 线性渐变。
    • （径向、圆锥形和重复渐变更高级，在此阶段不需要深入了解。）
  • 背景的无障碍考虑事项 - 确保良好的对比度。
  • 边框基础 - border-width、border-style、border-color 和边框简写（例如 border-top 和 border）。
  • border-radius 用于圆角。

资源

3.8 溢出

学习成果

  • 了解什么是溢出。
  • 使用 overflow 属性控制溢出。

资源

3.9 样式化表单元素

学习成果

  • 对易于样式化的表单元素（如 <input type="text">）进行基本样式化。
  • 使用 CSS 重置来克服 <input> 字体样式继承和盒子样式默认差异。
  • 了解并非所有表单元素都易于样式化，以及原因
    • 系统样式应用于某些表单元素，这使得在不同浏览器之间进行一致的样式化变得困难。
    • 更复杂的表单元素具有定义其内部工作原理结构的内部（影子 DOM）元素。 这些元素通常无法访问和单独样式化。
  • 使用 appearance: none 来解决对 <input> 类型（如 search、checkbox 和 radio）的系统样式化。
  • 缓解对难以样式化的类型（如 datetime-local、color 等）的问题。

注意:

符合此课程模块并不需要对所有可能的表单样式化问题都有万无一失、最终的答案。 一些表单元素难以样式化，正如资源清楚地表明的那样。 但是，您至少应该能够处理各种表单样式化需求，并了解一些更困难的样式化问题周围的问题。

资源

3.10 调试 CSS

学习成果

  • 使用 HTML 验证器 查看您的页面上是否有任何无效标记 - 这可能会导致您的 CSS 未按预期应用。
  • 使用 CSS 验证器 检查格式不正确的 CSS 代码。 缺少分号会导致整个 CSS 声明部分无法应用。
  • 使用浏览器开发者工具检查应用于页面上 HTML 元素的 CSS。
  • 修改应用的 CSS 以确定需要哪些更改才能获得您想要的效果。 这包括启用和禁用声明、修改值以及添加新声明。
  • 使用布局检查工具检查盒子模型、网格、Flexbox 和其他布局功能（另请参见 CSS 布局）。
  • 使用响应式设计模式工具检查响应式布局（另请参见 5.5 响应式设计细节）。

资源

上一个：2. 语义化 HTML下一个：4. CSS 文本样式