重学CSS :CSS 起源 和 术语

423 阅读7分钟

重学CSS 系列

重头开始,探索未知。

什么是CSS

CSS 英文全名 Cascading Style Sheets(层叠样式表)

是一种编写样式表的语言,其设计目的是描述结构化文档(如HTML和XML)在多种媒体上的渲染方式。通常不会改变文档语言本身所表达的基础语义内容。换言之,CSS关注的是如何展示文档内容,比如文字的大小、颜色、布局排列、背景图像等视觉效果。

有人说,动画呢? 那不也是视觉效果嘛。

CSS 文档演进

CSS也是有版本的, 一般用 CSS Level 来表示, 比如 CSS Level 1,俗称为 CSS1, 统一 CSS Level 3, 就是耳熟能详的 CSS3。

CSS Level 1CSS Level 2 是通过一份包含多个章节的单一文档进行定义的的。

截图_20245615075654.png CSS Level 2之后,其实就是 CSS 3,采取了模块化的方法,把CSS划分为多个模块,更加容易管理。 看下面的图,CSS 被拆分为了很多模块。

截图_20245915075932.png

这个提个问题, 有没有 CSS3.1呢?更多的版本信息,后续后细说。

早期样式方案

在CSS正式出现前,网页也是能控制样式的,主要通过HTML元素自身的属性来实现的,这种方式功能有限,且不够灵活。 以下就是一些早期的方案:

  1. 内联样式:在HTML标签中直接指定样式属性
<body bgcolor="#FFFFFF">
    <font color="red">
    <h1 style="color: red; font-size: 16px;">Hello World</h1>
</body>
  1. HTML属性: 使用HTML标签的各种属性来控制样式,如 align 控制元素对齐方式、width 和 height 设置尺寸等。
<img src="" height='400px' width="300px" />
<div align="left"></div>
  1. 表格布局:- 使用HTML <table> 元素以及相关的表格标签 (<tr><td><th>) 来组织和控制页面布局。

  2. 字体和颜色属性: HTML提供了诸如 <font> 标签这样的元素,允许开发者设置字体大小、颜色和类型等。

  3. 框架(Frames) : 通过 <frameset> 标签定义多个窗口区域,从而实现页面分块布局。

CSS 起源

由于HTML最初设计的目的是为了结构化文档内容,而非关注视觉样式,随着网页内容变得复杂和多样化,网页设计者不得不在HTML标签中混杂大量的表现样式信息,导致代码冗余且难以维护。

在CSS诞生之前,也有其他方案试图解决这个问题:

  • 当时的浏览器供应商,如Netscape Navigator推出了一些专有的样式语言,如Netscape的JavaScript Style Sheets(JSSS)

挪威人哈肯·维姆·利夫·伯斯塔尔在1994年提出了CSS的第一个提案,主张将样式和内容分离,以便于网页设计者集中管理和修改样式,同时也能保证网页加载更快、维护更容易。

1996年底,W3C采纳了这一提议,并开始了CSS标准的制定工作,最终发布了CSS Level 1规范,从此奠定了CSS作为网页样式标准的地位。

更多的关键年份信息如下:

  • 1994年:挪威计算机科学家哈肯·维姆·利夫·伯斯塔尔 首次提出CSS的概念,并于同年10月10日在芝加哥的一次会议上发表了题为“ Cascading HTML Style Sheets: Proposal for Adding Style to the Web”的论文,阐述了CSS的核心思想。
  • 1996年12月:W3C(万维网联盟)发布了CSS Level 1的第一份候选推荐标准(Candidate Recommendation),标志着CSS作为一个正式标准的起点。
  • 1998年5月:CSS2 扩展了CSS1的功能,引入了媒体查询、定位、表格布局、国际化支持和其他与用户界面相关的属性。
  • 2004年2月:CSS2.1 即CSS2修订版于2004年2月19日发布了一个工作草案,并在2011年6月7日成为最终的W3C推荐标准,此版本对CSS2进行了修正和澄清,专注于浏览器实现间的互操作性。
  • 2011年CSS Selectors Level 3的部分内容在2011年9月成为了W3C 推荐标准,而其他模块如Flexbox、Grid Layout等则在之后的不同年份获得了推荐标准地位。 始于1999年,CSS3并不是一个单一的整体版本,而是由一系列模块组成,每个模块在其独立的时间线上发展并成熟。例如,不同的CSS3模块在2000年代后期至2010年代初期开始发布,此后持续更新。

倒下的历史前辈

Netscape的JavaScript Style Sheets(JSSS)

JavaScript Style Sheets(JSSS)是由Netscape公司创造的一种样式表技术,它是基于W3C推荐的Cascading Style Sheets(CSS)模型的一种替代方案。

JSSS允许开发者使用JavaScript语法来定义和控制HTML文档中各种元素的显示属性,这些属性可以内联定义、在文档级别定义或在外部文件中定义。

相关的资料比较少

外部JSSS文件引用示例:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Example Document</title>
  <link href="styles.js" rel="stylesheet" type="text/javascript">
</head>
<body>
  <!-- 文档主体内容 -->
</body>
</html>

JSSS内联样式示例:

<style type="text/javascript">
<!--
document.tags.body.backgroundColor = "#ffffff"; // 设置body背景色为白色
document.tags.h1.fontSize = "2em";             // 设置h1字体大小为2倍基础字号
-->
</style>

缺点很明显: 过度依赖JavaScript, 可维护性低等。

CSS工作小组

Cascading Style Sheets (CSS) Working Group
即 Cascading Style Sheets (CSS) 工作组 是万维网联盟(World Wide Web Consortium,简称W3C)下属的一个团队, 专注于研究、制定和推广CSS技术标准。

截图_20244211114238.png

CSS Working Group 成员

你可以在 CSS Working Group Members 看到全部的成员。

可以看到 腾讯 和 阿里的成员,值得骄傲。

截图_20244811114817.png

截图_20244811114831.png

CSS工作小组章程

working group's charter (version 2023–2025) 工作小组的章程(2023年至2025年版)是指CSS工作组在这段时间内所遵循的官方指导文件,其中详细列出了该小组的主要任务、目标、责任范围、计划活动以及成员角色等关键信息。

这份章程旨在指导CSS工作组在未来几年的工作方向,确保其研发活动符合W3C的整体策略和技术发展路线图,同时也反映了2023年至2025年间,CSS技术和标准的发展规划及预期成果。该章程将作为工作组开展各项工作、制定技术报告和推动CSS标准化进程的基础框架。

所以呢? 如果想知道 CSS 最新的动向,这份章节也是不错的选择。

截图_20242011022021.png

几个术语

Style sheet

样式表(Style Sheet)是一系列规则的集合,这些规则专门用来指定文档的呈现样式。与HTML、XML等结构化文档语言配合使用,确保内容和样式分离。

在JavaScript编程中是有对应模型的

截图_20245811105859.png

image.png

Source document

源文档: 源文档就是包含了网页具体内容、结构信息以及可能的元数据的文件,它可以是一个HTML文件,也可以是SVG矢量图形文件或其他支持CSS样式的文档格式。

有些邮件的显示也是支持HTML和css展示形式, 这种场景也算是 Source document。

此外 EPUB电子书PDF文档 也可能是 Source document。

Author

作者:通常指的是创建或编写文档内容和样式表的个人,包括但不限于网页设计师、前端开发者、内容创作者等。这些人通过编写HTML、XML等文档语言以及CSS样式表来决定网页或文档的结构和样式表现。

这个词需要记住,后续样式来源和优先级的时候会有关联。

User Agent (UA)

用户代理:对于CSS规范而言,用户代理特指那些支持并按照CSS规范定义来解释和应用层叠样式表的程序,如浏览器、电子邮件客户端、电子书阅读器、屏幕阅读器

不限于浏览器。

User

用户:指与用户代理互动,以便查看、听取或以其他方式使用文档内容的人。

在网页浏览环境中,用户通常是通过浏览器这一用户代理访问和消费由作者编写的文档和相关样式表所呈现的网页内容。

引用