CSS 快速入门：掌握网页样式设计基础

CSS 快速入门

在本课程中，你将尝试了解 CSS 的基础知识，以及如何使用它来设计网页样式。在本课程结束时，你将能够使用 CSS 创建一个简单的网页。

001

你的第一个 CSS 实验

嗨，欢迎来到 LabEx！在这个第一个实验中，你将学习 CSS 中的经典 “你好，世界！” 程序。

002

CSS 基础和选择器

在这个实验中，你将扮演一名网页开发者的角色，负责使用基本的 CSS 技术和选择器为一家宠物服务公司创建一个时尚的网站。

003

CSS 盒模型和边距

在 “宠物之家” 这个繁华的数字领域中，这是一个致力于提供优质宠物护理服务的网站，我们的主角乔丹，一位才华横溢的网页开发者，负责提升该网站的布局和设计。

004

使用 Flexbox 构建响应式宠物之家网站

在繁华的宠物城，网页开发者乔丹负责重新设计 “宠物之家” 网站。

005

使用 CSS Grid 展示宠物服务

在 “宠物之家” 这个宠物爱好者的虚拟世界里，网页开发者亚历克斯开始了一项任务，即使用 CSS Grid 改造他们的服务展示页面。

006

动画和过渡效果

在 “宠物之家” 这个宠物爱好者的虚拟圣地的繁华世界里，创意网页设计师泰勒开始了一段为网站注入活力的旅程。

007

重置所有样式

在这个实验中，我们将探索使用 all 属性将所有样式重置为默认值的概念。在本实验结束时，你将清楚地了解如何使用此属性将所有继承和非继承的样式重置为其原始值。这将使你能够快速轻松地重置元素的样式，而无需单独重置每个属性。

008

CSS 中的盒模型重置

在这个实验中，我们将探索 CSS 编程中的盒模型重置概念。该实验将涵盖如何重置盒模型，并防止元素的宽度和高度受到边框或内边距的影响。在实验结束时，你将全面了解 box-sizing 属性以及如何使用它来优化网页设计。

009

系统字体栈

在这个实验中，我们将探索 CSS 中的系统字体栈概念。你将学习如何定义浏览器在用户操作系统上查找的字体列表，以及如何使用此技术在网页上实现原生应用的感觉。在实验结束时，你将扎实掌握如何在自己的项目中实现系统字体栈。

010

CSS 清除浮动技术

在这个实验中，我们将学习 CSS 中的清除浮动技术。此技术用于确保元素清除其浮动子元素。我们将探索如何在代码中实现此技术，并讨论其局限性。在本实验结束时，你将扎实掌握如何在 CSS 布局中使用清除浮动。

011

响应式 Flexbox 居中技术

在这个实验中，我们将探索 CSS 中 Flexbox 居中的概念。你将学习如何使用 Flexbox 在父元素内水平和垂直居中子元素。在本实验结束时，你将能够使用 Flexbox 居中技术创建响应式且视觉上吸引人的布局。

012

掌握居中网格布局

在这个实验中，我们将探索使用 CSS 进行网格居中的概念。你将学习如何使用网格布局在父元素内水平和垂直居中一个子元素。在本实验结束时，你将扎实掌握如何使用 justify-content 和 align-items 属性创建完美居中的布局。

013

垂直和水平居中元素

在这个实验中，我们将学习如何使用 CSS 变换在父元素内垂直和水平居中子元素。我们将通过使用相对和绝对定位，以及 transform 属性及其 translate 函数来实现这一点。这个实验将为你提供一种在网页上定位内容的有用技术。

014

使用 display: table 居中

在这个实验中，我们将学习如何使用 display: table 在父元素内居中一个子元素。通过使用这种技术，我们可以轻松实现垂直和水平居中，而无需诉诸复杂的定位或 JavaScript。这是在为网站和应用程序设计响应式布局时一项有用的技能。

015

均匀分布子元素

在这个实验中，我们将探索 CSS 编程的基础知识，并学习如何将样式应用于 HTML 文档。通过一系列实践练习，你将学习如何创建和修改 CSS 规则，使用选择器来针对特定元素，并将样式应用于文本、背景和边框。在本实验结束时，你将扎实掌握 CSS，并能够使用它来创建视觉上吸引人的网页。

016

创建响应式平铺布局

在这个实验中，我们将学习如何使用 display: inline-block 创建一个 3 格布局。你将使用 width 和 calc 均匀地将容器分成 3 列，并设置字体大小以避免空白。在本实验结束时，你将更好地理解如何在不使用 float、flex 或 grid 的情况下创建一个简洁且响应式的平铺布局。

017

CSS 样式设计基础

在这个实验中，我们将探索 CSS 编程的基础知识。你将学习如何使用 CSS 设计网页样式并创建视觉上吸引人的设计。在本实验结束时，你将扎实掌握 CSS 语法、选择器和属性，并能够将它们应用到你自己的项目中。

018

响应式容器宽高比 CSS

在这个实验中，我们将学习如何使用 CSS 创建一个具有指定宽高比的响应式容器。你将了解 --aspect-ratio 自定义属性，以及如何使用 calc() 函数计算容器的高度。你还将学习如何使用 object-fit: cover 属性设置子元素以保持宽高比。在本实验结束时，你将更好地理解如何在网页上创建视觉上吸引人且响应式的容器。

019

恒定宽高比

在这个实验中，我们将探索如何为宽度不同的元素创建恒定的宽高比。通过在 ::before 伪元素上使用 padding-top 属性，我们可以确保元素的高度与其宽度保持比例。此技术可用于创建具有特定宽高比的响应式正方形和其他形状。

020

使图像适配容器

在这个实验中，我们将学习如何使用 CSS 在保持图像宽高比的同时，将图像适配并定位在其容器内。我们将探索 object-fit 和 object-position 属性，以及如何使用它们来实现不同的效果。在本实验结束时，你将能够创建在指定空间内完美适配的视觉上吸引人的图像。

021

带有粘性章节标题的列表

在这个实验中，我们将通过为每个章节创建带有粘性标题的列表来探索 CSS 的世界及其功能。目的是展示如何使用 position: sticky 属性创建一个增强用户体验的用户友好界面。通过这个实验，你将学习如何使用 CSS 创建视觉上吸引人且功能强大的网页。

022

带有侧边栏的响应式布局

在这个实验中，我们将探索 CSS 编程的世界。这个实验的主要目标是提供创建带有侧边栏的响应式布局的实践经验。在本实验结束时，你将更好地理解如何使用 display: grid 和 minmax() 属性创建一个有效且视觉上吸引人的布局。

023

可访问的屏幕外元素隐藏

在这个实验中，我们将探索 CSS 中隐藏屏幕外元素的概念。这种技术使我们能够在视觉和位置上使元素不可见，同时仍允许辅助技术访问它们。在本实验结束时，你将扎实掌握如何使用此技术创建更易访问且布局友好的网页。

024

使用 CSS 进行全屏元素样式设计

在这个实验中，我们将探索如何使用 :fullscreen CSS 伪元素选择器在元素处于全屏模式时为其应用样式。我们将使用 Element.requestFullscreen() 创建一个按钮，以使元素全屏，用于预览样式。在本实验结束时，你将更好地理解如何使用 CSS 创建具有自定义样式的全屏元素。

025

使用 CSS 溢出截断文本

在这个实验中，我们将深入研究 CSS 编程，学习如何截断超过一行宽度的文本。通过结合使用 overflow、white-space 和 text-overflow 属性，我们将能够在截断的文本末尾显示省略号。通过这个实验，我们将更深入地了解如何优化网站上文本的显示。

026

修剪多行文本

在这个实验中，我们将探索如何使用 CSS 将多行文本修剪为指定的行数。通过使用 -webkit-line-clamp 属性和其他相关的 CSS 属性，我们可以有效地限制文本块中显示的行数，使其更具视觉吸引力且更易于阅读。通过这个实验，你将学习如何在网页设计项目中实现此技术。

027

风格化引号

在这个实验中，我们将探索 CSS 中的 quotes 属性，它允许我们自定义用于内联引号的引号。我们将学习如何使用此属性定义自己的开始和结束引号字符，并将它们应用于 HTML 中的元素。在本实验结束时，你将更好地理解如何为网页样式添加个人风格。

028

用 CSS 制作蚀刻文本效果

在这个实验中，我们将学习如何使用 CSS 创建 “蚀刻” 或雕刻的文本效果。这种效果可以为你的网页设计增添独特而时尚的触感，而且实现起来出奇地容易。通过调整阴影、背景和文本颜色，我们可以营造出文本被雕刻在背景中的错觉。和我们一起探索这个有趣且富有创意的技术吧！

029

使用 CSS 实现响应式流体排版

在这个实验中，我们将学习如何使用 CSS 实现流体排版。流体排版可确保文本根据视口宽度进行缩放，使其在不同屏幕尺寸下更具响应性和可读性。通过使用 clamp() 函数和一个公式来计算字体大小的响应值，我们可以创建一个更具动态性和用户友好性的设计。

030

用 CSS 创建渐变文本

在这个实验中，我们将探索 CSS 中的渐变文本概念。本实验的目的是帮助你理解如何使用 linear-gradient() 函数创建渐变文本，以及如何使用 webkit-text-fill-color 和 webkit-background-clip 属性用渐变背景填充文本。在本实验结束时，你将能够创建视觉上吸引人的渐变文本，从而提升网页设计的效果。

031

自定义文本选择

在这个实验中，我们将探索 CSS 编程的世界，并学习如何使用各种 CSS 属性和选择器来设计网页样式。本实验的目的是为初学者和中级开发者提供实践经验，以提高他们创建视觉上吸引人的网页的技能。通过这个实验，你还将学习如何解决常见的 CSS 问题，并在编码中使用最佳实践。

032

时尚的首字下沉技术

在这个实验中，我们将学习 CSS 中的首字下沉技术。首字下沉是一种排版技术，用于为段落的第一个字母增添视觉吸引力。通过这个实验，你将了解如何使用 :first-child 选择器和 ::first-letter 伪元素以独特且引人注目的方式为段落的第一个字母设置样式。

033

截断多行文本

在这个实验中，我们将学习如何截断超出其容器尺寸的多行文本。此技术对于显示较长文本的摘录同时保持简洁有序的设计很有用。通过使用 CSS 属性，如 overflow、height 和 background，我们可以创建一个视觉上令人愉悦的截断效果，从而提升用户体验。

034

漂亮的文本下划线

在这个实验中，我们将学习如何使用 CSS 创建一个不会裁剪下行字母的漂亮文本下划线。通过结合使用 text-shadow 和带有线性渐变的 background-image，我们可以创建一个渐变，作为实际的下划线，同时确保文本仍然可选择。此技术为 text-decoration: underline 提供了一个更具视觉吸引力的替代方案。