什么是 CSS?
CSS 允许您创建美观的网页,但它在底层是如何工作的呢?本文将解释什么是 CSS,基本语法是什么样的,以及您的浏览器如何将 CSS 应用到 HTML 以进行样式设置。
CSS 入门
在本文中,我们将使用一个简单的 HTML 文档并对其应用 CSS,在此过程中学习该语言的一些实用细节。我们还将回顾您尚未了解的 CSS 语法特性。
样式化个人简介页面 挑战
在此挑战中,您将样式化一个简单的个人简介页面,测试您在过去几课中学习到的一些技能,包括编写选择器、设置背景颜色和文本样式。我们还将邀请您查阅一些我们尚未涵盖的基本 CSS 功能,以测试您的研究能力。
基本 CSS 选择器
在本文中,我们将回顾一些选择器基础知识,包括基本的类型、类和 ID 选择器。
属性选择器
正如您从 HTML 学习中了解到的,元素可以具有属性,这些属性提供有关正在标记的元素的更多详细信息。在 CSS 中,您可以使用属性选择器来定位具有特定属性的元素。本课程将向您展示如何使用这些非常有用的选择器。
伪类和伪元素
我们将要了解的下一组选择器被称为伪类和伪元素。它们的数量很多,而且通常服务于非常特定的目的。一旦您知道如何使用它们,您就可以浏览不同的类型,看看是否有适合您正在尝试完成的任务的东西。
组合器
我们将要了解的最后选择器称为组合器。组合器用于以一种方式组合其他选择器,使我们能够根据元素在 DOM 中相对于其他元素的位置(例如,子元素或兄弟元素)来选择元素。
盒模型
CSS 中的所有内容周围都有一个框,理解这些框是使用 CSS 创建更复杂布局或将项目与其他项目对齐的关键。在本课程中,我们将了解 CSS 盒模型。您将了解它的工作原理以及与之相关的术语。
处理冲突
本课程的目的是加深您对 CSS 最基本概念的理解 — 层叠、特异性和继承 — 这些概念控制着 CSS 如何应用于 HTML 以及如何解决样式声明之间的冲突。
修复博客页面样式 挑战
在此挑战中,我们为您提供了一个部分样式化的基本博客页面示例。我们需要您解决现有 CSS 的一些问题并添加一些样式来完成它。在此过程中,我们将测试您对选择器、盒模型和冲突/层叠的知识。
值和单位
CSS 规则包含声明,声明又由属性和值组成。CSS 中使用的每个属性都有一个值类型,它描述了它允许拥有哪种类型的值。在本课程中,我们将了解一些最常用的值类型、它们是什么以及它们如何工作。
CSS 中的尺寸调整元素
了解设计中不同功能的大小非常重要。在本课程中,我们将总结元素通过 CSS 获取大小的各种方式,并定义一些有关大小的术语,这些术语将来会对您有所帮助。
背景和边框
在本课程中,我们将了解您可以使用 CSS 背景和边框做的一些创意事情。从添加渐变、背景图像和圆角,背景和边框是 CSS 中许多样式问题的答案。
挑战:调整和装饰内容面板 挑战
在此挑战中,您将获得一个轻度样式化的页面结构,该结构呈现一个内容面板,顶部有一个标题,底部有一个按钮栏。我们希望您按照说明调整和装饰它,从而产生一个有趣的布局。在此过程中,我们将测试您对 CSS 值和单位、大小以及背景和边框的知识。
溢出内容
溢出是指内容过多而无法容纳在元素框内的情况。在本课程中,您将学习如何使用 CSS 管理溢出。
图片、媒体和表单元素
在本课程中,我们将了解 CSS 中某些特殊元素的处理方式。图像、其他媒体和表单元素在您使用 CSS 设置样式方面的行为与普通盒子略有不同。了解哪些可能哪些不可能可以节省一些挫败感,本课程将强调您需要了解的一些主要事项。
表格样式
样式化 HTML 表格并不是世界上最迷人的工作,但有时我们都必须这样做。本文解释了如何使 HTML 表格看起来美观,并突出显示了一些特定的表格样式技术。
调试 CSS
本文将指导您如何调试 CSS 问题,并向您展示所有现代浏览器中包含的开发者工具如何帮助您找出问题所在。