位置：首页>> 网络编程>> 网页设计>> [翻译]标记语言和样式手册 Chapter 10 应用CSS（5）

[翻译]标记语言和样式手册 Chapter 10 应用CSS（5）

作者：zhaozy　来源：3user.com　发布时间：2008-02-02 18:44:00　

标签：样式,标记,css,手册

技巧延伸

在这个单元里,稍微深入样式表的世界,看看替换样式表(一份标记源码配上许多份样式表),以及如何让使用者握有更多控制,选择想要使用的样式表.

替换样式表

在本章开始的时候,我们讨论了四种为页面应用CSS的不同做法,同时展示了链接,导入外部样式表的好处,我们能更进一步引用样式表,让使用者有机会选择更大的字体,不同的色彩主题,甚至是不一样的页面布局.

阅读：CSS结合js实现动态更换皮肤

我们能以<link>标签引用许多份样式表达成这个功能(与本章最初的方法B十分类似),但是要为rel属性指定"alternate stylesheet".

举例来说,如果想让使用者能够选用额外的两种字体大小,可以像平常一样链接主题样式表,接着再链接替换样式表.

<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <title>Applying CSS</title>
  <link rel="stylesheet" type="text/css" href="default.css" title="default"/>
<link rel="alternate stylesheet" type="text/css" href="largetext.css" title="large" />
  <link rel="alternate stylesheet" type="text/css"
href="largertext.css" title="larger"/>
</head>

你应该发现了,后面两个<link>标签在为rel属性指定了"alternate stylesheet"之后,我们还加上title属性为样式表指定名称.以便稍后进行选择.

"预设"的样式表一定会内浏览器启动,浏览器会下载large.css与larger.css,但除非以其他方式启动(稍后会说),否则浏览器不会使用里面的定义内容.rel属性设定的"alternate stylesheet"正是防止这些样式表在页面载入后立刻"启动"而加到标签上.

如果我们想对老旧的浏览器像是Netscape 4.x隐藏这些替换样式表的话,不必使用@import方法,Netscape不支持rel属性的"alternate stylesheet"值,因此这些样式不会发生作用.

三种字体大小

让我们来看看这些替换样式表里面放了什么.举例来说,如果我们想让使用者放大页面字体大小的话,我们能在替换样式表中指定更大的字体,在启动之后让它们覆盖default.css中的规则.

如果我们以像素指定字体大小的话,这尤为方便,因为某些浏览器不允许使用者放大这类字体,要是把基础字体设为视力不佳者难以阅读的大小时,就能用替换样式表提供放大字体的功能.

因此,在default.css里,可以为网站设定基础字体大小:

body {
font-size: 12px;
}

然后在large.css中用略大的字体大小覆盖预设值:

body {
font-size: 16px;
}

同样的,在larger.css中再放大一些:

body {
font-size: 20px;
}

当启动之后(我发誓马上就会解释),large.css和larger.css样式表就会覆盖预设样式规则,放大页面字体大小.还是层叠有个重点必须留意,那就是CSS的层叠作用仍然存在,替换样式表就与其他样式表一样,也就是会覆盖共通的规则.因此,如果我们在default.css里面指定了排版布局,定位之类的规则,而代用样式表没有重复这些规则的话,这些规则就会继续发生作用.

第一页上一页 2 3 4

6 下一页

投稿

[翻译]标记语言和样式手册 Chapter 10 应用CSS（5）

猜你喜欢