0 Shares

没有 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？

为什么是 CSS？

#1。 CSS 是高效的

#2。 省时间

#3。 多设备兼容性

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