网页样式的重要性：CSS简介
若没有CSS，网站可能会显得单调乏味。这是因为CSS这种样式语言负责设置网页的文本样式、大小、颜色以及在页面上的定位。
什么是CSS？
层叠样式表（Cascading Style Sheets），简称CSS，是一种描述HTML元素如何在屏幕或纸张上呈现的语言。它由万维网联盟（W3C）于1996年创建。
HTML元素最初并非设计为带有格式化网页的标签，开发人员只需为页面编写标记。HTML 3.2引入的诸如<font>之类的标签给开发人员带来了新的挑战。
由于网页开始包含彩色背景、不同字体和多种样式，重写代码变得既耗时又复杂。为了解决这些难题，W3C推出了CSS，并且CSS在多年来不断发展。
为何使用CSS？
#1. CSS的高效性
CSS使我们摆脱了在每个网页上重复添加字体、元素对齐、边框、颜色、背景样式和大小等标签的困扰。
#2. 节省时间
通过更改外部CSS文件，您可以轻松地修改整个网站的外观。
#3. 多设备兼容性
如今，用户通过各种屏幕尺寸的设备（如电脑、平板电脑和智能手机）访问网站。CSS使得创建能够响应不同屏幕尺寸的网页变得非常容易。
#4. 易于维护的应用程序
现代Web应用程序总是在不断演变。CSS使得更改单个组件甚至整个网站变得简单，而无需大幅修改代码库。
CSS如何与HTML协同工作以创建网站？
HTML是一种用于创建网页的标准标记语言。而CSS则负责描述网页（由HTML创建）的显示方式。要用HTML和CSS构建网页，最好的方式是使用一个包含文本、图像链接和HTML标签的HTML文件。
HTML文件可以通过<link>标签链接到一个单独的CSS文件，或者使用内部或内联CSS样式。一个HTML文件可以有一个如<h1>的标题，和一个用<p>表示的段落。你可以使用CSS指示浏览器将段落中的所有内容显示为粗体，或者将标题内容设置为50像素并显示为绿色。
我们将在下一节中演示HTML和CSS如何协同工作。
CSS的类型
#1. 外部CSS
若要将CSS定义为外部CSS，需要一个HTML文件和一个扩展名为.css的独立CSS文件，例如style.css。CSS文件使用<link>标签与HTML文件/文档进行链接。
以下是一个外部CSS文件的示例：
.main {
text-align:center;
}
.GF {
color:red;
font-size:50px;
font-weight:bold;
}
#TP {
color:blueviolet
font-style:bold;
font-size:20px;
}
该CSS文件可以通过以下HTML文档链接：
<html>
<head>
<link rel="stylesheet" href="https://wilku.top/12-best-online-courses-and-books-to-master-css/style.css"/>
</head>
<body>
<div class = "main">
<div class ="GF">Geek Flare!!!! </div>
<div id ="TP">
Your favourite tech portal
</div>
</div>
</body>
</html>
<link>标签将外部样式表与HTML文档链接，而href属性则指定了外部样式表的位置。
最终网页的呈现效果将如下所示：
外部CSS是最受推荐的方法，因为它允许轻松创建可重用组件，并对整个代码库进行全局更改。
#2. 内部CSS
当您有一个需要设置独特样式的HTML文档时，内部CSS是一种理想选择。样式规则集被写入HTML文档的<head>部分。
以下是一个内部CSS的示例：
<html>
<head>
<title>Internal CSS Example</title>
<style>
.main {
text-align:center;
}
.GF {
color:Red;
font-size:70px;
}
.custom {
font-style:bold;
font-size:20px;
}
</style>
</head>
<body>
<div class = "main">
<div class ="GF">Internal CSS Demonstration</div>
<div class ="custom">
The Results
</div>
</div>
</body>
</html>
呈现的网页将如下所示：
在大多数情况下，内部CSS并非理想选择，因为它会使HTML文档中的代码变得非常庞大，从而影响加载速度。
#3. 内联CSS
内联CSS直接包含在HTML标签的style属性中。例如，你可以使用内联CSS来设置段落、标题甚至div的样式。
<html>
<head>
<title>Inline CSS</title>
</head>
<body>
<p style = "color:red; font-size:50px;
font-style:bold; text-align:center;">
Inline CSS Demonstration
</p>
</body>
</html>
呈现的文档将如下所示：
如果你计划扩展Web应用程序，内联CSS不是一个好选择，因为为每个HTML标签添加CSS属性会非常耗时。
现在让我们一起探索一些学习CSS的最佳在线课程和书籍。
使用HTML和CSS构建响应式网站
这门课程旨在教授如何使用HTML5和CSS3构建响应式网站。即使你没有任何Web开发的基础，也可以学习这门课程，它会探索诸如盒子模型、选择器冲突、定位方案和继承等概念。
如果你想学习如何集思广益、计划、草图、编码、测试和优化专业网站，这门课程也是理想之选。
高级CSS和Sass
高级CSS和Sass课程会通过探索级联、特异性和继承等主题，帮助你了解CSS背后的原理。
该课程涵盖了许多用于创建功能强大、响应迅速的网页的现代CSS技术。课程还介绍了Sass及其如何在构建CSS、全局变量和管理媒体查询时使用。
如果你想学习CSS动画，这也是一门理想的课程，因为它涵盖了@keyframes、动画和过渡。
学习CSS
Codecademy的“学习CSS”课程会教你如何使用CSS将HTML转化为视觉上吸引人的网站。该课程分为8节课，并有6个项目来测试你的理解。
你将从这门课程中学到的主要内容包括：如何向HTML元素添加样式、连接HTML和CSS文件，以及如何为网页创建独特的布局。
使用HTML和CSS构建你的第一个网页
“构建你的第一个网页”课程会教你如何使用HTML5和CSS3创建响应式网站。这个免费课程分为4个模块，大约需要10个小时才能完成。学习该课程不需要任何编程知识。
CSS基础
CSS基础课程由W3Cx创建。你将在这门课程中学到网页设计的最佳实践、基本的CSS选择器以及如何选择CSS属性。该课程分为5个模块，如果每周学习5-7个小时，大约需要5周的时间才能完成。
CSS3简介
这门CSS3课程将带你了解层叠样式表。这门由密歇根大学编写的课程，会教你如何编写CSS规则、建立良好的编程习惯和测试代码。你大约需要12个小时才能完成这门课程，完成课程后，你将获得一个可分享的证书。
HTML和CSS入门
这门关于HTML和CSS的入门课程，会教授你如何使用HTML和CSS创建样式化且结构良好的网站。该课程教导学习者如何使用树状结构构建网站，并使用CSS对其进行样式设置。
这门免费课程适合初学者，并且采用自定进度的学习模式。你大约需要3周的时间来完成这门由行业专家教授的课程。
CSS教程
W3schools上的CSS教程是一门免费课程。为了方便理解，课程分为多个章节。每个章节都提供了示例和练习。该平台提供了一个在线环境，你可以通过“试试看”按钮来体验不同的概念。
CSS：权威指南
如果你想学习CSS的基础知识，从选择器、特异性到级联，《CSS：权威指南》一书会很有帮助。这本书还详细介绍了弹性盒子、定位和浮动技巧。
如果你想学习如何使用CSS生成2D和3D转换、过渡和动画，这也是一本值得购买的书。《权威指南》有Kindle版和平装版两种版本。
使用HTML5和CSS进行响应式网页设计
这本关于使用HTML5和CSS进行响应式网页设计的书会教你如何使用HTML5和CSS创建面向未来的响应式网站。
从本书中学习技巧后，你创建的网站将在台式机、平板电脑和手机上完美运行。这本书以易于理解的格式编写，有平装版和Kindle版两种格式。
HTML和CSS：设计和构建网站
这本关于HTML和CSS的书适合所有人，无论你是爱好者、学生还是专业人士。
作者通过信息图表和生活摄影来传达本书的内容，使得各种概念更容易掌握。该资源以独特的结构呈现，方便你浏览所有章节。
现代CSS
这本关于现代CSS的书：《掌握现代Web开发的CSS关键概念》，通过代码示例、图表和屏幕截图来教授CSS。
该书在第一章介绍了颜色、选择器、盒子模型、组合器和特异性。本书随后介绍了样式文本、定位、渐变、边框、Z-index和堆叠上下文。你还将学习一些高级主题，如过渡、动画、变换、弹性盒子和CSS网格。
结语
CSS在现代网站中的作用再怎么强调都不为过。除了使网页在视觉上更具吸引力之外，CSS还可以让网页更易于浏览。
如果你使用上面列出的资源，学习CSS会变得很简单。其中一些课程是免费的，而另一些则是付费的。
接下来，你可以查看面向开发人员和设计师的CSS速查表。