当前位置：首页 > article >正文

CSS的发展历程

article 2025/1/20 19:22:24

本篇文章仅作为娱乐科普，如有错误，欢迎各位指正

一、CSS的起源

二、CSS的发展

1、CSS1

2、CSS2

3、CSS2.1

4、CSS3

一、CSS的起源

在CSS出现之前，网页的设计主要是通过HTML标签本身来完成，这导致代码出现了混乱和难以维护等一系列问题。随着网页复杂性的增加，需要一种更好的方法来处理页面的表现形式，于是CSS应运而生。

CSS（Cascading Style Sheets，层叠样式表）旨在解决网页设计中内容与表现分离的问题。CSS的第一个正式规范——CSS1，是由万维网联盟（W3C）在1996年发布的。CSS1提供了一种方式来控制网页的外观，比如字体、颜色和间距等，从而使得开发者可以更灵活地设计网页而不必依赖于HTML中的内联样式或特定的标签属性。

CSS的引入极大地改善了网页设计的方式，允许开发者将内容结构（HTML）与视觉呈现（CSS）分开处理，提高了代码的可读性和维护性。

万维网（英语：World Wide Web）亦作WWW、Web、全球广域网。它是一个通过互联网访问的，由许多互相链接的超文本组成的信息系统[1]。英国科学家蒂姆·伯纳斯-李于1989年发明了万维网，1990年他在瑞士CERN的工作期间编写了第一个网页浏览器[2][3]。网页浏览器于1991年1月向其他研究机构发行，并于同年8月向大众开放。

二、CSS的发展

1、CSS1

发布：1996年12月
特点：
- 基本视觉格式化模型：CSS1引入了定义网页外观的基本方法，包括字体属性（如字体大小、家族）、颜色、间距（边距和填充）、文本对齐等。
- 内容与表现分离：通过提供一种将样式信息从HTML文档中分离出来的机制，解决了早期网页设计中存在的内联样式混乱问题。这使得网页更加易于维护，并提高了可访问性和灵活性。

2、CSS2

发布：1998年5月
特点：
- 定位与布局：引入了定位（positioning）的概念，允许开发者精确控制元素在页面上的位置；z-index属性用于管理层叠顺序；浮动（floats）用于实现文本环绕图片等效果。
- 媒体类型支持：支持不同的输出设备（如屏幕、打印机），并提供了针对打印样式的特殊规则。
- 绝对单位：增加了对更多测量单位的支持，比如厘米（cm）、毫米（mm）、点（pt）等，使得样式可以更精确地适应不同分辨率和输出介质的要求。
- 更复杂的布局机制：开始支持一些更为复杂的布局方式，虽然相比现代标准而言仍然有限，但为后续发展奠定了基础。

3、CSS2.1

发布：2011年6月（作为推荐标准）
特点：
- 修正与澄清：主要是对CSS2中的错误进行了修正，并且对一些模糊或不明确的部分进行了澄清，以提高规范的准确性和一致性。
- 未添加新功能：该版本并不是为了引入新特性，而是为了确保现有规范能够被正确理解和实施。

4、CSS3

发展时间：从2001年开始讨论，但直到2007年后才逐步推出模块化标准。
特点：
- 模块化结构：不同于之前的单一标准，CSS3被分解成多个独立的模块，每个模块可以根据需要单独更新和发展。这种模块化的做法加快了新技术的应用速度，并允许浏览器厂商更快地采用新特性。
- 增强的选择器：新增了高级选择器如:nth-child()、:not()等，使开发者能更灵活地选取页面元素。
- 动画和过渡效果：引入了@keyframes规则用于创建动画序列，以及transition和animation属性来平滑地改变属性值，增强了用户体验。
- 多列布局：通过column-count和column-gap等属性实现了文本的多栏显示，模拟传统印刷媒体的排版风格。
- 弹性盒子布局(Flexbox)：提供了一种高效的布局系统，特别适用于响应式设计，使得调整元素尺寸和排列变得更加简单直观。
- 网格布局(Grid Layout)：允许创建复杂而灵活的二维布局，极大地简化了传统上难以实现的布局任务。
- 视觉效果：包括渐变色、阴影等，丰富了网页的表现力。