点击这里返回潘少俊衡 HTML教程 栏目．想浏览CSS教程请点这里。
上文：标记语言——精简标签。 Chapter 10 应用CSS
在第一部分主要的焦点放在标记语法的例子上，也探讨了如何在标签上应用CSS进行设计,指定样式细节.在第二章,我们将讨论几种把CSS应用到一份文档,网站,甚至是单一标签上的做法.除此之外也会讨论怎么对早先版本浏览器隐藏CSS内容,让我们能在使用进阶技巧时不会影响到能让所有浏览器,设备读取的标记结构.
在章节最后的"技巧延伸"单元,会介绍不必编写script就能切换字体,色彩,做出多种主题的做法 -- 替换样式表. 如何将CSS应用到文件上?
现在要来探讨四种把CSS应用到文档上的不同做法,每个方法都有自己的优缺点,根据情况而定,四种方法都有可能是最佳选择.这边示范的每个方法都是用了合法的XHTML 1.0 Transitional 语法结构,标签以及配置.
让我们从方法A开始吧. 方法A:
这个做法也成为内嵌样式表,让你能将所有CSS声明直接写在(X)HTML文件内,
与方法B类似,使用@import能以相对路径(像是上面的例子)或绝对路径从外部文件导入CSS定义.
方法C与使用标签有着相同优点,由于样式表放在外部文档中,修改并更新单一文档就能改变整个网站,而且能简单快速地完成.外部样式表会被浏览器缓存下来,为导入相同样式表的所有页面节省下载时间. 捉迷藏
使用方法C的重大好处是:Netscape 4.X以下版本并不支持@import语法,因此会使被引用的CSS内容"藏起来",这肯定是个好用的技巧,因为我们能以此编写进阶CSS语法处理布局之类的设计细节,让能够处理的最新浏览器显示它们,同时也能让老旧浏览器忽视这些语法.
Netscape 4.x的问题在于:它认为它的CSS支持能力与真正支持的浏览器一样好.因此,除了Netscape 4.x之外,我们都能让浏览器自己决定是否显示正确的效果.
这是以标准设计网站时的重点,尽量把结构化标记代码与显示方式分开,并且为支持的浏览器提供布局细节,其他样式.老旧的浏览器则去他们能轻易读取,显示的结构内容,但不会处理为他们隐藏起来的进阶CSS规则. 打开样式,关闭样式
看看图10-1和10-2,并且比较一下,这是我的个人网站使用完整CSS,接着关掉CSS的显示效果(应该十分接近老旧浏览器的显示效果),不使用CSS时的结构仍然十分明显,所有人仍然容易阅读,使用.如果我们没有把显示布局需要的CSS隐藏起来,那么旧版本浏览器的使用者或许就会拿到一团难以阅读的内容.
图10-1 我的个人网站,使用CSS
图10-2 同一个页面,拿掉CSS,古旧浏览器可能把它显示成这样 结合方法B和方法C应用多重样式表
有些时候,在一份文档中引入许多分样式表可能很有用,举例来说,可以将所有布局规则放到一个文档中,并且将字体设定放到另一个文档中,对庞大,复杂的设计来说,这能使维护大量规则的工作变得更简单. 变色龙效果
在制作Fast Company杂志的网站时,我希望每个月更改网站的配色,以便配合当期杂志的封面图片,为了简化定期修改工作,因此我把所有与颜色相关的CSS规则集中到一个文档里,并且把不会每个月修改的其他规则放进另一个文档中.
每个月就能更简单,快速的盖好所有颜色,不必在构成设计的其他几百条规则里慢慢找需要改动的内容.只要改好这个文档,整个网站的色彩就会立刻改变. 如何办到
要结合方法B与方法C引入多重样式表,做法是在页面的里使用标签引用CSS主体文档,与方法B示范相同,链接到styles.css.
而styles.css的内容只简单包含了几条@import规则,引入所需要的其他CSS文件.
举例来说,如果想引入三份样式表,一份处理布局,一份定义字体,一份定义色彩,那么styles.css的内容则可能如下所示:
如此一来,就能在整个网站使用相同的标签,只引用styles.css文件,这个文档能以@import规则继续导入其他样式表,新样式表只要加到这个文档里,就能对整个网站发挥作用.
这让更新,替换CSS变得非常简单,举例来说,如果在路上你突然想把CSS切成4个文件,你只需要改动这个文档的@import规则,而不必修改所有XHTML标记源代码. Lo-Fi和Hi-Fi样式
以方法C的@import规则对老旧浏览器隐藏CSS时,还有另一个技巧可用.那就是使用CSS的层叠效应,以方法A或方法B提供老旧,最新浏览器都支持的Lo-Fi效果,接着以@import为其他支持的浏览器提供进阶效果.
老旧的浏览器只会拿到他们能支持的内容,而新一点的浏览器则会拿到所有想使用的样式.
接着我们看看这个技巧的代码长什么样:
此处lofi.css应该包含基本的CSS规则,像是链接色彩,字体大小;而hifi.css则是包含进阶规则,像是布局,定位,背景图片等.
我们能同时传送Lo-Fi和Hi-Fi版本的样式,完全不必编写script或者在服务器端以任何方式辨认浏览器版本. 顺序很重要
在标记源代码内指定与
由于custom.css在标记源代码中是第二个出现的,因此它为相同标签指定的样式会覆盖master.css之内制定的内容.
举例来说,假设在main.css之内我们要求标签使用红色serif字体,而
上文：标记语言——精简标签。 Chapter 10 应用CSS
在第一部分主要的焦点放在标记语法的例子上，也探讨了如何在标签上应用CSS进行设计,指定样式细节.在第二章,我们将讨论几种把CSS应用到一份文档,网站,甚至是单一标签上的做法.除此之外也会讨论怎么对早先版本浏览器隐藏CSS内容,让我们能在使用进阶技巧时不会影响到能让所有浏览器,设备读取的标记结构.
在章节最后的"技巧延伸"单元,会介绍不必编写script就能切换字体,色彩,做出多种主题的做法 -- 替换样式表. 如何将CSS应用到文件上?
现在要来探讨四种把CSS应用到文档上的不同做法,每个方法都有自己的优缺点,根据情况而定,四种方法都有可能是最佳选择.这边示范的每个方法都是用了合法的XHTML 1.0 Transitional 语法结构,标签以及配置.
让我们从方法A开始吧. 方法A:
这个做法也成为内嵌样式表,让你能将所有CSS声明直接写在(X)HTML文件内,
与方法B类似,使用@import能以相对路径(像是上面的例子)或绝对路径从外部文件导入CSS定义.
方法C与使用标签有着相同优点,由于样式表放在外部文档中,修改并更新单一文档就能改变整个网站,而且能简单快速地完成.外部样式表会被浏览器缓存下来,为导入相同样式表的所有页面节省下载时间. 捉迷藏
使用方法C的重大好处是:Netscape 4.X以下版本并不支持@import语法,因此会使被引用的CSS内容"藏起来",这肯定是个好用的技巧,因为我们能以此编写进阶CSS语法处理布局之类的设计细节,让能够处理的最新浏览器显示它们,同时也能让老旧浏览器忽视这些语法.
Netscape 4.x的问题在于:它认为它的CSS支持能力与真正支持的浏览器一样好.因此,除了Netscape 4.x之外,我们都能让浏览器自己决定是否显示正确的效果.
这是以标准设计网站时的重点,尽量把结构化标记代码与显示方式分开,并且为支持的浏览器提供布局细节,其他样式.老旧的浏览器则去他们能轻易读取,显示的结构内容,但不会处理为他们隐藏起来的进阶CSS规则. 打开样式,关闭样式
看看图10-1和10-2,并且比较一下,这是我的个人网站使用完整CSS,接着关掉CSS的显示效果(应该十分接近老旧浏览器的显示效果),不使用CSS时的结构仍然十分明显,所有人仍然容易阅读,使用.如果我们没有把显示布局需要的CSS隐藏起来,那么旧版本浏览器的使用者或许就会拿到一团难以阅读的内容.
图10-1 我的个人网站,使用CSS
图10-2 同一个页面,拿掉CSS,古旧浏览器可能把它显示成这样 结合方法B和方法C应用多重样式表
有些时候,在一份文档中引入许多分样式表可能很有用,举例来说,可以将所有布局规则放到一个文档中,并且将字体设定放到另一个文档中,对庞大,复杂的设计来说,这能使维护大量规则的工作变得更简单. 变色龙效果
在制作Fast Company杂志的网站时,我希望每个月更改网站的配色,以便配合当期杂志的封面图片,为了简化定期修改工作,因此我把所有与颜色相关的CSS规则集中到一个文档里,并且把不会每个月修改的其他规则放进另一个文档中.
每个月就能更简单,快速的盖好所有颜色,不必在构成设计的其他几百条规则里慢慢找需要改动的内容.只要改好这个文档,整个网站的色彩就会立刻改变. 如何办到
要结合方法B与方法C引入多重样式表,做法是在页面的里使用标签引用CSS主体文档,与方法B示范相同,链接到styles.css.
而styles.css的内容只简单包含了几条@import规则,引入所需要的其他CSS文件.
举例来说,如果想引入三份样式表,一份处理布局,一份定义字体,一份定义色彩,那么styles.css的内容则可能如下所示:
/*老旧的浏览器不会解读这些导入规则 */
@import url("layout.css");
@import url("fonts.css");
@import url("colors.css");
如此一来,就能在整个网站使用相同的标签,只引用styles.css文件,这个文档能以@import规则继续导入其他样式表,新样式表只要加到这个文档里,就能对整个网站发挥作用.
这让更新,替换CSS变得非常简单,举例来说,如果在路上你突然想把CSS切成4个文件,你只需要改动这个文档的@import规则,而不必修改所有XHTML标记源代码. Lo-Fi和Hi-Fi样式
以方法C的@import规则对老旧浏览器隐藏CSS时,还有另一个技巧可用.那就是使用CSS的层叠效应,以方法A或方法B提供老旧,最新浏览器都支持的Lo-Fi效果,接着以@import为其他支持的浏览器提供进阶效果.
老旧的浏览器只会拿到他们能支持的内容,而新一点的浏览器则会拿到所有想使用的样式.
接着我们看看这个技巧的代码长什么样:
"http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-transitional.dtd">
Applying CSS
此处lofi.css应该包含基本的CSS规则,像是链接色彩,字体大小;而hifi.css则是包含进阶规则,像是布局,定位,背景图片等.
我们能同时传送Lo-Fi和Hi-Fi版本的样式,完全不必编写script或者在服务器端以任何方式辨认浏览器版本. 顺序很重要
在标记源代码内指定与
由于custom.css在标记源代码中是第二个出现的,因此它为相同标签指定的样式会覆盖master.css之内制定的内容.
举例来说,假设在main.css之内我们要求
标签使用红色serif字体,而则使用蓝色serif字体.
h1 {
font-family: Georgia, serif;
color: red;
}
h2 {
font-family: Georgia, serif;
color: blue;
}
在某个特定页面,我们只想改变标签的样式设定,沿用的样式.那么在custom.css中,我们就只需要为声明新样式.
h1 {
font-family: Verdana, sans-serif;
color: orange;
}
这个声明将会覆盖master.css内的声明(因为custom.css在它后面再引入).如果页面先引入master.css之后再引入custom.css的话,标签会使用橘色Verdana字体,而仍是蓝色serif字体.因为后面这个在master.css里的声明没有被custom.css覆盖.
CSS的层叠功能是个共享通用样式的好工具,让你能够只覆盖需要修改的规则.
方法D:行内样式
This is a Title
这是我们所接触的第四种CSS应用方法--行内样式,几乎任何标签都能加上style属性,让你能直接对标签应用CSS样式规则,与上面的例子一样.
由于行内样式是层叠最底层,因此他们会覆盖所有外部样式的声明,以及声明在的
h1 {
font-family: Georgia, serif;
color: red;
}
h2 {
font-family: Georgia, serif;
color: blue;
}
在某个特定页面,我们只想改变
标签的样式设定,沿用的样式.那么在custom.css中,我们就只需要为声明新样式.
h1 {
font-family: Verdana, sans-serif;
color: orange;
}
这个声明将会覆盖master.css内的声明(因为custom.css在它后面再引入).如果页面先引入master.css之后再引入custom.css的话,标签会使用橘色Verdana字体,而仍是蓝色serif字体.因为后面这个在master.css里的声明没有被custom.css覆盖.
CSS的层叠功能是个共享通用样式的好工具,让你能够只覆盖需要修改的规则.
方法D:行内样式
This is a Title
这是我们所接触的第四种CSS应用方法--行内样式,几乎任何标签都能加上style属性,让你能直接对标签应用CSS样式规则,与上面的例子一样.
由于行内样式是层叠最底层,因此他们会覆盖所有外部样式的声明,以及声明在的
声明新样式.
h1 {
font-family: Verdana, sans-serif;
color: orange;
}
这个声明将会覆盖master.css内的声明(因为custom.css在它后面再引入).如果页面先引入master.css之后再引入custom.css的话,标签会使用橘色Verdana字体,而仍是蓝色serif字体.因为后面这个在master.css里的声明没有被custom.css覆盖.
CSS的层叠功能是个共享通用样式的好工具,让你能够只覆盖需要修改的规则.
方法D:行内样式
This is a Title
这是我们所接触的第四种CSS应用方法--行内样式,几乎任何标签都能加上style属性,让你能直接对标签应用CSS样式规则,与上面的例子一样.
由于行内样式是层叠最底层,因此他们会覆盖所有外部样式的声明,以及声明在的
h1 {
font-family: Verdana, sans-serif;
color: orange;
}
仍是蓝色serif字体.因为后面这个在master.css里的声明没有被custom.css覆盖.
CSS的层叠功能是个共享通用样式的好工具,让你能够只覆盖需要修改的规则.
方法D:行内样式
This is a Title
这是我们所接触的第四种CSS应用方法--行内样式,几乎任何标签都能加上style属性,让你能直接对标签应用CSS样式规则,与上面的例子一样.
由于行内样式是层叠最底层,因此他们会覆盖所有外部样式的声明,以及声明在的
This is a Title
这是我们所接触的第四种CSS应用方法--行内样式,几乎任何标签都能加上style属性,让你能直接对标签应用CSS样式规则,与上面的例子一样.
由于行内样式是层叠最底层,因此他们会覆盖所有外部样式的声明,以及声明在的