什么是CSS和它在哪里使用?

什么是级联样式表?

网站由许多独立的部分组成,包括图像,文本和各种文档。 这些文档不仅包括可以链接到各种页面(如PDF文件)的文档,还包括用于构建页面的文档,例如用于确定页面结构和CSS(层叠样式表)文档的HTML文档决定页面的外观。 本文将深入研究CSS,介绍它是什么以及它在今天的网站上的用处。

一个CSS历史课程

CSS最初是在1997年开发的,作为Web开发人员定义他们创建的网页的外观的方式。 它的目的是让网络专业人士将网站代码的内容和结构与视觉设计分开 ,这在此之前是不可能的。

结构和样式的分离允许HTML执行更多的功能,它最初基于内容的标记,而不必担心页面本身的设计和布局,通常称为“外观和感觉”的页面。

直到2000年左右,当网页浏览器开始使用这种标记语言的基本字体和颜色以外,CSS才得到普及。 今天,所有的现代浏览器都支持CSS级别1,大部分CSS级别2,甚至是CSS级别3的大多数方面。 随着CSS不断发展并引入新的样式,Web浏览器开始实现模块,为这些浏览器带来新的CSS支持,并为网页设计师提供强大的新样式工具。

在过去的很多年里,有些精选的网页设计师拒绝将CSS用于网站的设计和开发,但这种做法现在几乎已经从行业中消失了。 CSS现在是网页设计中广泛使用的标准,你很难找到今天在这个行业工作的人,他们至少对这种语言没有基本的了解。

CSS是一个缩写

如前所述,术语CSS代表“层叠样式表”。 让我们稍微分解一下这个短语,以更充分地解释这些文档的功能。

“样式表”一词是指文档本身(如HTML,CSS文件实际上只是可以用各种程序编辑的文本文档)。 样式表多年来一直用于文档设计 。 它们是布局的技术规格,无论是打印还是在线。 印刷设计师长期以来一直使用样式表来确保他们的设计印刷完全符合他们的规格。 网页的样式表具有相同的用途,但还具有附加的功能,即告诉Web浏览器如何呈现正在查看的文档。 今天,CSS样式表也可以使用媒体查询来改变页面查找不同设备和屏幕大小的方式 。 这非常重要,因为它允许根据用于访问它的屏幕以不同的方式呈现单个HTML文档。

级联是“级联样式表”这个术语的特殊部分。 Web样式表旨在通过该表单中的一系列样式级联,如瀑布上方的河流。 河中的水冲击瀑布中的所有岩石,但只有底部的水影响到水流的确切位置。 网站样式表中的级联也是如此。

每个网页至少受到一个样式表的影响,即使网页设计师没有应用任何样式。 该样式表是用户代理样式表 - 如果没有提供其他说明,也称为Web浏览器用来显示页面的默认样式。 例如,默认情况下,超链接的颜色为蓝色,并加下划线。 这些样式来自Web浏览器的默认样式表。 但是,如果网页设计者提供其他说明,浏览器将需要知道哪些说明优先。 所有浏览器都有自己的默认样式,但许多默认样式(如带蓝色下划线的文本链接)均在所有或最主流的浏览器和版本中共享。

作为浏览器默认的另一个例子,在我的Web浏览器中,默认字体是“ Times New Roman ”,大小为16。但是,我访问的几乎没有任何页面以该字体系列和大小显示。 这是因为级联定义了由设计者自己设置的第二个样式表来重新定义字体大小和系列,并覆盖了我的Web浏览器的默认值。 您为网页创建的任何样式表将比浏览器的默认样式具有更多特异性,因此这些默认值仅适用于样式表不覆盖它们的情况。 如果您希望链接为蓝色并加下划线,则不需要执行任何操作,因为这是默认设置,但如果您网站的CSS文件显示链接应为绿色,则该颜色将覆盖默认的蓝色。 下划线将保留在此示例中,因为您没有另行指定。

CSS在哪里使用?

CSS也可以用来定义在网页浏览器以外的其他媒体上查看网页的外观。 例如,您可以创建一个打印样式表来定义网页的打印方式。 由于导航按钮或Web表单等网页项目在打印页面上没有任何用途,因此打印样式表可用于在打印页面时“关闭”这些区域。 虽然在许多网站上并不是很常见的做法,但创建打印样式表的选项是强大且有吸引力的(根据我的经验 - 大多数网络专业人员不这么做只是因为网站的预算范围并不要求完成此额外工作)。

为什么CSS很重要?

CSS是网页设计师可以学习的最强大的工具之一,因为它可以影响网站的整个视觉外观。 写得很好的样式表可以快速更新,并允许网站在屏幕上直观地更改优先顺序,从而向访问者显示价值和重点,而不需要对底层HTML标记进行任何更改。

CSS的主要挑战是需要学习很多东西 - 并且随着浏览器每天都在变化,今天运行良好的东西可能没有什么意义,因为新的样式会被支持,而其他的则会因为某种原因而下降或失宠。

因为CSS可以级联和组合,并且考虑不同的浏览器如何以不同的方式解释和实现这些指令,所以CSS比纯HTML更难以掌握。 CSS在浏览器中的变化也是HTML的一种方式。 但是,一旦开始使用CSS,您会发现利用样式表的强大功能将为您设置网页布局和定义外观提供令人难以置信的灵活性。 一路走来,您将收集过去为您工作的风格和方法的“一揽子技巧”,您将在未来构建新的网页时再次转向。

Jennifer Krynin的原创文章。 17/5/17由Jeremy Girard编辑,