样式表

层叠样式表

• CSS动画
• IE盒模型缺陷
• CSS filter
• 无表格网页设计
• 响应式网页设计
• 维基教科书

样式表是一种将网页的内容和表示分离的网页设计形式，在网页设计中网页标记（HTML或XHTML）包含页面的语义内容和结构，但没有定义其可视化布局（风格）。相反，风格的定义是在一个外部的样式表文件中，使用如CSS、XSLT样式表语言。这种设计方法被认为是一种“分离”，因为它在很大程度上取代了以前风格和结构在一起的定义方法。 这种方法背后的哲学是一种关注点的分离。

优点

形式和内容分离有一些优点，但只有在主流web浏览器支持CSS的时候才行。

速度

总的来说，利用样式表的网站的用户体验通常会更快，相比不使用该技术的网站。“整体”来讲第一页可能加载更慢—因为需要传输样式表和内容。后续页面加载速度会变快，因为没有样式信息需要下载——因为CSS文件已经在浏览器的缓存中了。

可维护性

将所有样式保存在一个文件中可以减少维护的时间，减少错误的机会，从而提高表达的一致性。例如，网页上某个级别的标题可能用一种特定的颜色表示，当要修改这些标题的颜色的时候，只需要改变CSS文件中的一个短短的字符串即可。而如果使用以前的方法将样式嵌入在每个页面，需要编辑每个文件，从而繁琐，费时费力，而且容易出错。

可访问性

使用CSS的HTML或XHTML网站更容易调整，以适应不同的浏览器((Internet Explorer、火狐、Opera、Safari等等)。 在浏览器中使用“完全降低”（“degrade gracefully”）CSS的网站不能显示图形内容，如Lynx或那些很老的不支持CSS的浏览器。浏览器忽略它们不能解释的CSS，比如CSS 3语句。这使得各种各样的用户代理都能够访问网站的内容，即使他们不能呈现样式表或带有图形能力的设计。例如，一个使用可刷新点字显示输出的浏览器可以完全无视布局信息，并且用户仍然可以访问所有页面内容。

定制

如果一个页面的布局信息存储在外部，用户可以决定是否完全禁止布局信息，使网站的内容仍然保持一种可读的形式。网站的作者也可以提供多个样式表，可以在没有改变它的任何内容的情况下，彻底改变网站的外观。

大多数现代浏览器还允许用户定义自己的样式表，覆盖原有的布局。例如，允许用户加粗用户访问的每个页面上的每个超链接。

一致性

因为语义文件只包含作者想要传达的含义，文档内容中各种元素的样式是非常一致的。例如，标题、强调文本、列表和数学表达式都使用样式表中定义的样式属性。在创建页面的时候不需要关心样式属性的组合。这些表象细节可以推迟到呈现的时刻。

可移植性

表现的细节可以延迟到展示的时候才考虑，这意味着文档可以很容易被重新编排，在一个完全不同的媒介上展示，只需要为新的表达媒介准备一个新的样式表，同时符合语义文档中元素或结构的词汇。只要通过应用一个新的样式表，精心撰写的web页面文档便可以很容易地被印刷成装订卷，并含有完整的页眉和页脚，页码和生成的目录。

目前的实用性缺点

目前规范（例如：XHTML、XSL、CSS）和实现这些规范的软件工具只是达到早期成熟阶段。所以试图接受这种内容和形式分离的方法还面临一些世纪性的问题。

没有解析和生成工具导致应用范围小

风格规范仍然相当成熟，软件工具也已经逐渐适应。最主要的web开发工具大多数还是使用内容形式混合的网页编写方式。所以作者和设计者尝试开发基于图形界面的网页编辑工具，但发现很难按照语义web方法开发基于GUI的工具。除了GUI工具，广义样式表共享库可能会有助于这些方法的落地。

相关条目

• 层叠样式表