介绍一些编程语言— CSS 语言

介绍一些编程语言— CSS 语言

CSS 语言

简介

CSS，层叠样式表，是一种用来表现 HTML 或 XML 等文件样式的计算机语言。CSS 不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。

• CSS 指层叠样式表

• 样式定义如何显示 HTML 元素

• 样式通常存储在样式表中

• 把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题

• 外部样式表可以极大提高工作效率

• 外部样式表通常存储在 CSS 文件中

• 多个样式定义可层叠为一个

发展历程

$1990$ 年，Tim Berners-Lee 和 Robert Cailliau 共同发明了 Web。$1994$ 年，Web 真正走出实验室。

从 HTML 被发明开始，样式就以各种形式存在。不同的浏览器结合它们各自的样式语言为用户提供页面效果的控制。最初的 HTML 只包含很少的显示属性。

随着 HTML 的成长，为了满足页面设计者的要求，HTML 添加了很多显示功能。但是随着这些功能的增加，HTML 变的越来越杂乱，而且 HTML 页面也越来越臃肿。于是 CSS 便诞生了。

$1994$ 年哈坤·利提出了 CSS 的最初建议。而当时伯特·波斯正在设计一个名为 Argo 的浏览器，于是他们决定一起设计 CSS。

其实当时在互联网界已经有过一些统一样式表语言的建议了，但 CSS 是第一个含有“层叠”丰意的样式表语言。在 CSS 中，一个文件的样式可以从其他的样式表中继承。读者在有些地方可以使用他自己更喜欢的样式，在其他地方则继承或“层叠”作者的样式。这种层叠的方式使作者和读者都可以灵活地加入自己的设计，混合每个人的爱好。

哈坤于 $1994$ 年在芝加哥的一次会议上第一次提出了 $CSS$ 的建议，$1995$ 年的 www 网络会议上 CSS 又一次被提出，博斯演示了 Argo 浏览器支持 CSS 的例子，哈肯也展示了支持 CSS 的 Arena 浏览器。

同年，W3C 组织成立，CSS 的创作成员全部成为了 W3C 的工作小组并且全力以赴负责研发 CSS 标准，层叠样式表的开发终于走上正轨。有越来越多的成员参与其中，例如微软公司的托马斯·莱尔顿，他的努力最终令 Internet Explorer 浏览器支持 CSS 标准。哈坤、波斯和其他一些人是这个项目的主要技术负责人。$1996$ 年底，CSS 初稿已经完成，同年 $12$ 月，层叠样式表的第一份正式标准完成，成为 W3C 的推荐标准。

$1997$ 年初，W3C 组织负责 CSS 的工作组开始讨论第一版中没有涉及到的问题。其讨论结果组成了 $1998$ 年 $5$ 月出版的 CSS 规范第二版。

语言特点

CSS 为 HTML 标记语言提供了一种样式描述，定义了其中元素的显示方式。CSS 在 Web 设计领域是一个突破。利用它可以实现修改一个小的样式更新与之相关的所有页面元素。

丰富的样式定义

CSS 提供了丰富的文档样式外观，以及设置文本和背景属性的能力；允许为任何元素创建边框，以及元素边框与其他元素间的距离，以及元素边框与元素内容间的距离；允许随意改变文本的大小写方式、修饰方式以及其他页面效果。

易于使用和修改

CSS 可以将样式定义在 HTML 元素的 style 属性中，也可以将其定义在 HTML 文档的 header 部分，也可以将样式声明在一个专门的 CSS 文件中，以供 HTML 页面引用。总之，CSS 样式表可以将所有的样式声明统一存放，进行统一管理。另外，可以将相同样式的元素进行归类，使用同一个样式进行定义，也可以将某个样式应用到所有同名的 HTML 标签中，也可以将一个 CSS 样式指定到某个页面元素中。如果要修改样式，只需要在样式列表中找到相应的样式声明进行修改。

多页面应用

CSS 样式表可以单独存放在一个 CSS 文件中，这样就可以在多个页面中使用同一个 CSS 样式表。CSS 样式表理论上不属于任何页面文件，在任何页面文件中都可以将其引用。这样就可以实现多个页面风格的统一。

层叠

简单的说，层叠就是对一个元素多次设置同一个样式，这将使用最后一次设置的属性值。例如对一个站点中的多个页面使用了同一套CSS样式表，而某些页面中的某些元素想使用其他样式，就可以针对这些样式单独定义一个样式表应用到页面中。这些后来定义的样式将对前面的样式设置进行重写，在浏览器中看到的将是最后面设置的样式效果。

页面压缩

在使用 HTML 定义页面效果的网站中，往往需要大量或重复的表格和 font 元素形成各种规格的文字样式，这样做的后果就是会产生大量的 HTML 标签，从而使页面文件的大小增加。而将样式的声明单独放到 CSS 样式表中，可以大大的减小页面的体积，这样在加载页面时使用的时间也会大大的减少。另外，CSS 样式表的复用更大程度的缩减了页面的体积，减少下载的时间。

工作原理

CSS 是一种定义样式结构如字体、颜色、位置等的语言，被用于描述网页上的信息格式化和显示的方式。CSS 样式可以直接存储于 HTML 网页或者单独的样式单文件。无论哪一种方式，样式单包含将样式应用到指定类型的元素的规则。外部使用时，样式单规则被放置在一个带有文件扩展名 _css 的外部样式单文档中。

样式规则是可应用于网页中元素，如文本段落或链接的格式化指令。样式规则由一个或多个样式属性及其值组成。内部样式单直接放在网页中，外部样式单保存在独立的文档中，网页通过一个特殊标签链接外部样式单。

名称 CSS 中的“层叠（cascading）”表示样式单规则应用于 HTML 文档元素的方式。具体地说，CSS 样式单中的样式形成一个层次结构，更具体的样式覆盖通用样式。样式规则的优先级由 CSS 根据这个层次结构决定，从而实现级联效果。

简单程序

.heart {
  width: 20px;
  height: 20px;
  position: relative;
  transform: rotate(45deg);
  background: red;
}

.heart::before,
.heart::after {
  content: "";
  width: inherit;
  height: inherit;
  background: inherit;
  position: absolute;
}

.heart::before {
  top: -10px;
}

.heart::after {
  left: -10px;
}

参考

• https://baike.baidu.com/item/CSS/5457?fr=ge_ala

• https://www.runoob.com/css/css-intro.html

• https://www.oh100.com/kaoshi/web/340451.html