掌握 CSS 的 12 门最佳在线课程和书籍

没有 CSS 的网站看起来会很无聊,因为这种样式语言负责文本样式、大小、颜色和在网页上的定位。

什么是 CSS?

层叠样式表,缩写为 CSS,是一种描述 HTML 元素应如何显示在屏幕或纸张上的语言。 CSS 由万维网联盟 (W3C) 于 1996 年创建。

HTML 元素未设计为具有有助于格式化网页的标签,开发人员只需要为页面编写标记。 HTML 3.2 推出时引入的 等标签给开发人员带来了新的问题。

由于网页有彩色背景、不同的字体和多种样式,重写代码变得既昂贵又痛苦。 W3C 学校引入 CSS 来解决这些挑战,并且多年来一直在不断发展。

为什么是 CSS?

#1。 CSS 是高效的

CSS 使我们免于在每个网页上添加字体、元素对齐、边框、颜色、背景样式和大小等标签的痛苦。

#2。 省时间

您可以通过更改外部 CSS 文件轻松更改整个网站的外观。

#3。 多设备兼容性

现代 Web 用户在具有不同屏幕尺寸的小工具(例如 PC、平板电脑和智能手机)上访问网站。 CSS 使创建响应屏幕尺寸的网页变得容易。

#4。 易于维护的应用程序

现代 Web 应用程序总是在不断发展。 CSS 使更改单个组件甚至整个网站变得容易,而无需更改代码库。

  11 种针对营养和食谱的最佳食品 API 解决方案

CSS 如何与 HTML 结合使用来创建网站?

HTML 是一种用于创建网页的标准标记语言。 另一方面,CSS 描述了网页(使用 HTML 创建)的显示方式。 使用 HTML 和 CSS 创建的网页最好有一个包含文本、图像链接和 HTML 标签的 HTML 文件。

此 HTML 文件可以使用链接标记将单独的 CSS 文件链接到它,也可以使用内部或内联 CSS 样式。 一个 HTML 文件可以有一个标题,如

和一个由

表示的段落。 您可以使用 CSS 指示浏览器以粗体显示段落中的所有内容,甚至将标题内容设为 50 像素和绿色。

我们将在下一节中演示 HTML 和 CSS 的工作原理。

CSS 的类型

#1。 外部 CSS

对于要归类为外部的 CSS,应该有一个 HTML 文件和一个单独的 CSS 文件,扩展名为 .css。 例如,style.css。 CSS 文件使用链接标记与 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 文档链接:

<!DOCTYPE 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 的示例:

<!DOCTYPE html>

<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 包含正文中的 CSS 样式。 例如,您可以使用内联 CSS 设置段落、标题甚至 div 的样式。

<!DOCTYPE html>

<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 技术。 该课程介绍了 Saas 以及如何在构建 CSS、全局变量和管理媒体查询时在项目中使用它。

如果您想学习 CSS 动画,这也是一个理想的课程,因为它涉及@keyframes、动画和过渡。

学习 CSS

Learn CSS by Codecademy 教授如何使用 CSS 将 HTML 转换为视觉上引人注目的网站。 该课程分为 8 课,有 6 个项目来测试您的理解。

您将从本课程中学到的主要内容是如何向 HTML 元素添加样式、连接 HTML 和 CSS 文件以及为网页创建独特的布局。

使用 HTML 和 CSS 构建您的第一个网页

构建您的第一个网页课程教授如何使用 HTML5 和 CSS3 创建响应式网站。 这个免费课程分为 4 个模块,大约需要 10 个小时才能完成。 学习本课程不需要任何编程知识。

CSS 基础知识

CSS Basics 由 W3Cx 创建。 您将在本课程中学到的一些东西是; 网页设计的最佳实践、基本的 CSS 选择器以及如何选择 CSS 属性。 该课程分为 5 个模块; 如果每周学习 5-7 小时,则需要大约 5 周的时间才能完成。

CSS3简介

这门 CSS3 课程介绍了层叠样式表。 该课程由密歇根大学编写,教授如何编写CSS规则、建立良好的编程习惯和测试代码。 您需要大约 12 小时才能完成本课程,完成后将获得可共享的证书。

HTML 和 CSS 简介

这门关于 HTML 和 CSS 的入门课程教授如何使用 HTML 和 CSS 创建样式化且结构良好的网站。 该课程教学习者如何使用树状结构创建网站,然后使用 CSS 对其进行样式设置。

此免费课程适合初学者,采用自定进度的学习模式。 您需要大约 3 周的时间来完成这门由行业专家教授的课程。

教程

CSS Tutorial 是 W3schools 上的免费课程。 为了便于理解,课程分为几章。 每章都给出了例子和练习。 该平台有一个在线平台,您可以通过“尝试一下”按钮尝试不同的概念。

CSS:权威指南

如果您想学习 CSS 的基础知识,从选择器和特异性到级联,CSS:权威指南书会很有帮助。 该书还详细介绍了 flexbox、定位和浮动技巧。

如果您想学习如何使用 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 备忘单。