样式表
样式表是一种将网页的内容和表示分离的网页设计形式,在网页设计中网页标记(HTML或XHTML)包含页面的语义内容和结构,但没有定义其可视化布局(风格)。相反,风格的定义是在一个外部的样式表文件中,使用如CSS、XSLT样式表语言。这种设计方法被认为是一种“分离”,因为它在很大程度上取代了以前风格和结构在一起的定义方法。 这种方法背后的哲学是一种关注点的分离。
HTML |
---|
比较 |
优点
形式和内容分离有一些优点[1][2],但只有在主流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工具,广义样式表共享库可能会有助于这些方法的落地。