在第一部分主要的焦点放在标记语法的例子上，也探讨了如何在标签上应用CSS进行设计,指定样式细节.在第二章,我们将讨论几种把CSS应用到一份文档,网站,甚至是单一标签上的做法.除此之外也会讨论怎么对早先版本浏览器隐藏CSS内容,让我们能在使用进阶技巧时不会影响到能让所有浏览器,设备读取的标记结构. 在章节最后的 技巧延伸 单元,会介绍不必编写script就能切换字体,色彩,做出多种主题的做法 -- 替换样式表.如何将CSS应用到文件上? 现在要来探讨四种把CSS应用到文档上的不同做法,每个方法都有自己的优缺点,根据情况而定,四种方法都有可能是最佳选择.这边示范的每个方法都是用了合法的XHTML 1.0 Transitional 语法结构, html 标签以及 head 配置. 让我们从方法A开始吧.方法A: style 标签
!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd html xmlns= http://www.w3.org/1999/xhtml xml:lang= en lang= en head meta http-equiv= content-type content= text/html; charset=utf-8 / title Applying CSS /title style type= text/css ![CDATA[ ...CSS声明放在这边 ... ]] /style /head
!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-transitional.dtd html xmlns= http://www.w3.org/1999/xhtml xml:lang= en lang= en head meta http-equiv= content-type content= text/html; charset=utf-8 / title Applying CSS /title link rel= stylesheet type= text/css href= styles.css _fcksavedurl= styles.css / /head
方法B示范了连接外部样式表的做法:把所有CSS声明内容放在单独文档中,接着在(X)HTML的 head 内使用 link 标签引用它的内容. 我们以href属性指定文档的位置,这个属性可以是相对路径(像是上面的例子),或者是绝对路径(填入样式表完整的 http:// 位置).同时留意 link 是单一标签,或是空标签,必须在最后以 / 自我闭合.分离文档 = 方便维护 把所有的CSS规则放在与标记内容不同的文档中有个明显的优点:也就是任何对整个网站进行的样式变动都能够修改这个档案完成,而不必像使用方法A的时候,为每个网页重复修改CSS声明. 当然,这对大规模网站来说是十分关键的,上百份,甚至上千份页面都能共享单一文档内的相同样式. 链接外部样式表的额外优点之一是:这个文档通常只会被下载一次,之后浏览器就会使用缓存,能在重复浏览相同页面或是其他引用了相同样式表的页面时,节省需要的下载时间.仍然无法完全隐藏 与方法A一样,方法B仍然可有可能被老旧,只支持部分CSS功能的浏览器解读,任何为最新浏览器设计的样式都有可能在不支持的浏览器中造成大混乱. 嗯...这是我第二次提到这个问题了,下一个方法必须解决它,对吧?方法C:@import
!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-transitional.dtd html xmlns= http://www.w3.org/1999/xhtml xml:lang= en lang= en head meta http-equiv= content-type content= text/html; charset=utf-8 /
