编辑“︁CSS历史发展”︁（章节）

= CSS历史发展 =

== 引言 ==  
'''层叠样式表'''（Cascading Style Sheets，简称CSS）是一种用于描述HTML或XML文档样式的语言。自1996年首次发布以来，CSS已成为现代Web开发的基石之一。本节将详细介绍CSS的历史发展，从早期版本到当前标准，帮助初学者和高级开发者理解其演变过程及技术背景。

== 早期阶段（1990-1996） ==  
在CSS出现之前，Web页面主要通过HTML的'''<font>'''、'''<table>'''等标签直接定义样式，导致代码臃肿且难以维护。1994年，[[万维网联盟|W3C]]的'''Håkon Wium Lie'''提出CSS概念，旨在将内容与样式分离。1996年12月，W3C正式发布'''CSS Level 1'''（CSS1），支持以下基础功能：  
* 字体、颜色、边距控制  
* 文本对齐与背景设置  
* 简单的盒模型  

=== 示例：CSS1样式 ===  
<syntaxhighlight lang="css">  
/* CSS1示例：设置段落文本颜色和背景 */  
p {  
    color: blue;  
    background-color: yellow;  
}  
</syntaxhighlight>  

== CSS2与浏览器战争（1997-2004） ==  
1998年发布的'''CSS Level 2'''（CSS2）引入了：  
* 定位（如`position: absolute`）  
* 媒体类型（如打印样式）  
* 更复杂的选择器  

然而，浏览器厂商（如Netscape和Internet Explorer）对标准的支持不一致，导致开发者需编写浏览器前缀（如`-moz-`、`-webkit-`）。  

=== 实际案例：浏览器前缀 ===  
<syntaxhighlight lang="css">  
/* 早期圆角边框需浏览器前缀 */  
.box {  
    -webkit-border-radius: 10px; /* Chrome/Safari */  
    -moz-border-radius: 10px;    /* Firefox */  
    border-radius: 10px;          /* 标准语法 */  
}  
</syntaxhighlight>  

== CSS3与模块化（2005-现今） ==  
CSS3采用'''模块化'''设计，将功能拆分为独立模块（如Flexbox、Grid、Animations），逐步发布而非整体更新。关键里程碑包括：  
* 2009年：Flexbox布局草案  
* 2011年：Media Queries（响应式设计）  
* 2017年：CSS Grid Layout  

=== 时间线图表 ===  
<mermaid>  
timeline  
    title CSS发展时间线  
    1996 : CSS1发布  
    1998 : CSS2发布  
    2005 : CSS3模块化开始  
    2017 : CSS Grid成为标准  
</mermaid>  

== 数学与CSS ==  
CSS3引入计算函数（如`calc()`），支持动态布局：  
<math>  
\text{width} = \text{100\%} - \text{20px}  
</math>  
<syntaxhighlight lang="css">  
.container {  
    width: calc(100% - 20px); /* 动态计算宽度 */  
}  
</syntaxhighlight>  

== 未来趋势 ==  
当前CSS工作组正开发：  
* '''CSS Nesting'''（嵌套规则）  
* '''Container Queries'''（基于容器尺寸的响应式设计）  
* '''Houdini API'''（开放底层样式引擎）  

== 总结 ==  
CSS从简单的样式分离工具发展为功能强大的布局系统，其历史反映了Web技术的演进。理解其发展历程有助于开发者更高效地利用现代特性，同时兼容旧版浏览器。  

=== 扩展练习 ===  
尝试用CSS Grid重构以下传统表格布局：  
<syntaxhighlight lang="html">  
<div class="grid-container">  
    <div class="header">Header</div>  
    <div class="main">Main Content</div>  
    <div class="footer">Footer</div>  
</div>  
</syntaxhighlight>  

答案：  
<syntaxhighlight lang="css">  
.grid-container {  
    display: grid;  
    grid-template-areas:  
        "header"  
        "main"  
        "footer";  
}  
</syntaxhighlight>

[[Category:编程语言]]
[[Category:CSS]]
[[Category:CSS基础]]