假设你想与全世界分享你的旅行冒险经历。于是，你写了一篇博客，在每一个段落中倾注心血，在打字时重温每一个瞬间。
但当你预览你的文章时，却发现了一个问题。设计平淡无奇：图片太小，文字难读，整体布局也无法展现你想要讲述的精彩故事。
这时，CSS 就能帮上忙。
有了 CSS，你就能将博客从简单的文字墙转变为身临其境的视觉体验。想想看，图像跃然纸上，标题引人注目，段落流畅自如。
最棒的是什么？你不需要成为一名专业设计师就能做到这一点。CSS 是一种简单直观的语言，任何人都可以学会。在这篇简短的指南中，我们将探讨学习 CSS 的途径和入门方法。
CSS 简介
在学习网站编码之前，你必须了解一些幕后发生的事情。每个网站都包含不同的文件或编码语言。以下是其中一些文件的工作原理：
- HTML 构建网站结构。
- JavaScript：定义网站的行为： 定义网站的行为。
- CSS 指定网站的外观和风格。
目前，Javascript 是全球开发人员使用最多的编程语言，使用率高达 63.61%，而 HTML/CSS 则以 52.97% 的使用率位居第二。
CSS 即层叠样式表，是一种为网站设计样式的编程语言。它与构建网页内容的 HTML 配合使用。CSS 可以控制页面元素的布局、颜色、字体和其他设计方面。
当你访问一个网站时，你会看到它独特的网页设计、引人入胜的布局、格式和使用 CSS 创建的样式。如果没有 CSS，网站的默认样式和功能就会乏善可陈。
例如，如果亚马逊网站没有添加 CSS 样式，就会是这个样子：
这样的用户体验会很糟糕，如果亚马逊的网站看起来是这样的，它的发展可能也不会那么快。
现在，让我们来了解 CSS 的一些基础知识，包括 CSS 的结构以及如何编写 CSS 样式表。
了解 CSS 的基础知识
CSS 是一种基于规则的语言，它允许你为网页上的特定元素定义样式。CSS 的基本概念之一是使用选择器来定位 HTML 元素并对其应用样式。
下面是一个简单的 CSS 规则集示例：
h2 {
font-size: 18px;
color: black;
}
h3 {
font-size: 16px;
color: red;
}
在这里，我们有两条 CSS 规则：
- 第一条规则使用以逗号分隔的选择器，以
<h2>元素为目标。它将 font-size 属性设置为 18px，将 color 属性设置为黑色。 - 第二条规则以
<h3>元素为目标。它将字体大小设置为 16px，颜色设置为红色。
CSS 规则集由选择器和声明块组成。选择器决定样式将应用于哪些元素，而声明块（大括号 {} 中的所有内容）包含一个或多个定义样式的属性值对。
CSS 还提供了大量属性，用于控制元素的布局、间距、外观以及与文本相关的属性（如字体大小和颜色）。
CSS 框模型是一种思考元素如何在网页上显示的方法。想象一下，每个元素都是一个有四层的框。
- 内容层：元素的最内层：包含文本、图片或更多元素
- 填充：内容与边框之间的空间
- 边框：填充周围的边缘
- 边距：边框外的空间
常用的 css 属性：
- 宽度和高度：这些属性决定了元素的大小，允许你控制其在页面上的尺寸。如果你不希望元素的伸展范围超过某一点，还可以设置最大高度和最大宽度属性。
- 填充：修改元素边框内的空间，在边框和元素内容之间增加喘息空间。
- 边框：元素上的边框可以在组件周围创建一个可见的边界，而且可以用不同的宽度、颜色和图案对边框进行样式设置。
- 边距：调整元素边框外的空间，在元素与其相邻元素之间拉开距离。
- Background-color（背景色）：使用指定颜色填充元素内容和衬垫后面的区域。例如，
background-color: lightblue。 - 颜色：确定标签内字符或文本字体的颜色。
- 显示：指定元素的显示方式，如块级元素或内联元素，或者根本不显示。
有了这些属性和其他许多属性，你就可以通过修改和添加自定义字体、颜色、间距等来定制网页的外观。
在 HTML 网页中应用 CSS 样式有三种方法：
- 内联样式： 使用
style= attribute将样式直接应用于 HTML 元素，例如将 display 属性应用于 div 元素。 - 嵌入式样式： 在 HTML 文档
<head>部分的style element中定义样式。 - 外部样式 创建一个单独的 CSS 文件，并使用
<head>部分的<link>元素将其链接到 HTML 文档。
使用外部样式表通常被认为是最佳做法，因为这样可以更好地分离关注点，并更容易在多个页面中维护样式。
为什么要考虑学习 CSS
虽然设计网站完全可以不使用代码，但学习 CSS 可以让你对网站的外观和功能有更多的控制。自定义 CSS 可以让你创建一个独特而难忘的网站，在默认设计中脱颖而出。
如果没有自定义 CSS，网站可能仅限于 WordPress 主题规定的简单设计和背景颜色。默认设计可能无法以最佳方式展示您的品牌、产品或内容。自定义 CSS 将确保您的设计独一无二、令人难忘。
以下是您可以使用基本 CSS 属性对网站进行样式化的部分内容：
- 文本颜色和字体样式。
- 段落元素间距和样式的 CSS 布局。
- 使用
:hover伪类实现链接悬停效果。 - 背景图片和阴影
- 还有更多
除此以外，还有 ::before 和 ::after 这样的 CSS 伪元素，可帮助您动态插入内容，并在不修改结构的情况下将样式应用到内容的特定部分。
通过 CSS，您可以修改主体元素的背景颜色属性，添加背景图片属性，并创建吸引受众的视觉设计。
它还能让你设计出适应不同屏幕尺寸和移动设备的响应式页面，让每个人都能更方便地访问你的内容。
CSS 可让你在设计网站时省时省力。使用 CSS 选择器，你可以将样式应用到网站中的多个元素，从而减少你需要编写的代码量。
将 CSS 与 JavaScript 或 PHP 等其他编码语言结合起来学习，还能进一步促进网络开发或设计职业的发展。即使对 CSS 有基本的了解，在电子邮件营销、内容创建或虚拟技术协助等高薪工作中也很有价值。
它能让你在不依赖第三方工具的情况下为客户设计在线内容和响应式设计。
将 CSS 知识与设计工具（Adobe Photoshop、Sketch 或 Figma）的专业知识结合起来，你就有能力实现精美的视觉设计，而拥有一般软件工程技能的开发人员往往无法做到这一点。
如何快速学习 CSS（3 种简单方法）
如果你已经决定开始学习 CSS，但又不知从何入手，我们为你整理了一份免费、实用的在线资源清单，在你学习的每个阶段都能为你提供帮助。
1. 观看 YouTube CSS 教程
YouTube 是学习新技能的绝佳资源，CSS 也不例外。
许多网络开发专家创建了循序渐进的 CSS 学习指南，通常分为不同的部分，便于学习。筛选 YouTube 课程的最简单方法就是查看发布日期。一般来说，如果课程的出版日期在一到两年之间，就可以开始学习了。
不过，由于 CSS 是一项成熟的技术，更新并不频繁，因此你可以多学几年，仍然可以获得相关的课程。
可以考虑观看 Codevolution 的 CSS速成课程，快速了解 CSS。
这段一小时的视频为初学者讲解了如何格式化和自定义 CSS，带你完成在 HTML 文档中添加 CSS 的第一步。你将学会颜色、文本、字体、列表、表格等样式。
请记住，一个小时的视频并不能涵盖所有内容，您可能还需要观看有关 CSS 网格和 flexbox 等高级技术的其他视频。
查看 SuperSimpleDev 的 HTML & CSS 课程，了解更全面的 CSS 视频。这段长达六个半小时的视频将向你传授从基础知识到更专业技术的所有知识，无论你以前是否有相关经验。
它还包括 HTML 指南，是您一站式学习多种编码技术的绝佳资源。
本教程无需任何经验，是您成为专业开发人员的第一步。本教程还包含 HTML 指南，是一次学习多种编码技术的绝佳资源。
在本教程之后，你可以完成不同的练习来练习 CSS 和 HTML。它包含 100 多个任务。如果掌握了相应的技术，在课程结束时就能创建一个 YouTube 网页！
2. 学习 CSS 课程
虽然 YouTube 对基础编码知识很有价值，但它可能并不总能提供最全面或最新的信息。要继续提高 CSS 技能，可以考虑探索提供结构化深入学习路径的 CSS 在线课程。
幸运的是，许多平台都提供免费的 CSS 课程，让你可以按照自己的节奏和方便的方式学习。Codecademy 就是这样一个平台，创建账户后即可免费学习 CSS 课程。
Codecademy Learn CSS 课程教你如何使用 CSS 创建网页样式，内容包括：
- 正确的文件格式。
- 添加新功能。
- 构建美观的 CSS 布局。
- CSS 语法和视觉规则。
- 框模型。
- 显示属性
- 颜色和排版。
每个模块都包含书面课程和概念实施说明。您将能够格式化代码并查看它对前端显示的影响，通过动手实践加深理解。
学习 CSS 的另一个绝佳资源是 web.dev 的 Learn CSS 课程。该免费课程将基本概念分解成易于理解的模块，涵盖的主题包括
- 框模型
- CSS 选择器
- Flexbox 布局
- CSS 网格布局
web.dev CSS 课程的一个令人兴奋的特点是，它在每个模块中都包含了 CSS Podcast 的片段。如果你是听觉学习者，这一点尤其有用：
为了测试你的知识水平，web.dev 在每个模块的结尾都提供了一个测验题，帮助你加强对教材的理解。
完成 web.dev CSS 课程中的所有模块，你就能更快地在项目中应用 CSS。
以下是课程行业中其他一些值得一提的课程，你可以试试：
- freeCodeCamp：提供涵盖 CSS 和其他网络开发技术的综合课程。
- edX：提供来自顶尖大学和机构的 CSS 课程，通常还可以获得认证证书。
- Udemy：提供广泛的 CSS 课程，既有免费的，也有付费的，可满足不同技能水平和学习风格的需求。
3. 玩 CSS 学习游戏
从在线课程中学到 CSS 基础知识后，是时候测试一下自己的技能了。虽然你可能还没准备好立即进行网站编码实验，但互动 CSS 游戏为你提供了一种有趣且引人入胜的方式来练习新发现的知识。
CSS Diner 是一款让你掌握选择器的在线游戏。你将学会如何在 CSS 代码的开头指定 HTML 元素，然后为这些元素添加样式。
我们试玩了这款游戏，老实说，我们着迷了！一边玩游戏，一边学习 CSS。
如果你正在寻找更多的游戏来练习 CSS、HTML 和 JavaScript，可以考虑在 Codepip 上创建一个免费账户：
另一款练习 CSS 的热门游戏是 Flexbox Froggy，这款游戏的重点是 Flexbox 布局模型。
在这个游戏中，你的目标是通过编写应用 Flexbox 属性的 CSS 代码，帮助一只动画青蛙到达百合花板。随着关卡的深入，你将面临越来越复杂的挑战，考验你对 Flexbox 对齐、合理性和分布的理解。
通过游戏学习 CSS 的主要好处在于，它能让你在掌握复杂 CSS 概念的同时，以完全初学者的身份尽情享受犯错带来的乐趣。
让你的 CSS 技能更上一层楼
如果你想提高网页设计技术，CSS 是一个很好的起点。它是许多自定义网站设计的基础，你可以用它来构建独特的特性和功能。即使你不懂代码，许多免费教育指南也能帮助你了解 CSS。
回顾一下，以下是你可以用来开始学习 CSS 的一些最佳方法：
- 观看来自 Codevolution 或 SuperSimpleDev 的 YouTube 教程。
- 参加 Codecademy 或 Udemy 的 CSS 课程。
- 玩 CSS Diner 或 Flexbox Froggy 等益智游戏。
评论留言