没有 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 使更改单个组件甚至整个网站变得容易,而无需更改代码库。
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 备忘单。