1869 | 0 一枝梅 发表于 2012-8-15 09:23:09
<!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声明放在这边 ...
]]> Webjx.Com
</style>
</head> Webjx.Com
这个做法也成为内嵌样式表,让你能将所有CSS声明直接写在(X)HTML文件内,<style>标签位于页面<head>之内,可以放进任何你需要的样式.
方法B示范了连接外部样式表的做法:把所有CSS声明内容放在单独文档中,接着在(X)HTML的<head>内使用<link>标签引用它的内容.
<!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>
<!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>
<style type="text/css">
<![CDATA[
@import "styles.css"; 网页教学网
]]>
</style>
</head> 网页教学网
捉迷藏
使用方法C的重大好处是:Netscape 4.X以下版本并不支持@import语法,因此会使被引用的CSS内容"藏起来",这肯定是个好用的技巧,因为我们能以此编写进阶CSS语法处理布局之类的设计细节,让能够处理的最新浏览器显示它们,同时也能让老旧浏览器忽视这些语法.
Netscape 4.x的问题在于:它认为它的CSS支持能力与真正支持的浏览器一样好.因此,除了Netscape 4.x之外,我们都能让浏览器自己决定是否显示正确的效果.
这是以标准设计网站时的重点,尽量把结构化标记代码与显示方式分开,并且为支持的浏览器提供布局细节,**样式.老旧的浏览器则去他们能轻易读取,显示的结构内容,但不会处理为他们隐藏起来的进阶CSS规则.
打开样式,关闭样式
看看图10-1和10-2,并且比较一下,这是我的个人网站使用完整CSS,接着关掉CSS的显示效果(应该十分接近老旧浏览器的显示效果),不使用CSS时的结构仍然十分明显,所有人仍然容易阅读,使用.如果我们没有把显示布局需要的CSS隐藏起来,那么旧版本浏览器的使用者或许就会拿到一团难以阅读的内容.
Webjx.Com
图10-1 我的个人网站,使用CSS
/* 老旧的浏览器不会解读这些导入规则 */如此一来,就能在整个网站使用相同的<link>标签,只引用styles.css文件,这个文档能以@import规则继续导入**样式表,新样式表只要加到这个文档里,就能对整个网站发挥作用.
@import url("layout.css");
@import url("fonts.css");
@import url("colors.css");
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"此处lofi.css应该包含基本的CSS规则,像是链接色彩,字体大小;而hifi.css则是包含进阶规则,像是布局,定位,背景图片等.
"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="lofi.css" _fcksavedurl=""lofi.css"" />
<style type="text/css">
@import "hifi.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>
<style type="text/css">
@import "master.css";
@import "custom.css";
</style>
</head>
举例来说,假设在main.css之内我们要求<h1>标签使用红色serif字体,而<h2>则使用蓝色serif字体.
在某个特定页面,我们只想改变<h1>标签的样式设定,沿用<h2>的样式.那么在custom.css中,我们就只需要为<h1>声明新样式.
h1 {
font-family: Georgia, serif;
color: red;
}
h2 {
font-family: Georgia, serif;
color: blue;
}
h1 {这个声明将会覆盖master.css内的声明(因为custom.css在它后面再引入).如果页面先引入master.css之后再引入custom.css的话,<h1>标签会使用橘色Verdana字体,而<h2>仍是蓝色serif字体.因为后面这个在master.css里的声明没有被custom.css覆盖.
font-family: Verdana, sans-serif;
color: orange;
}
这是我们所接触的第四种CSS应用方法--行内样式,几乎任何标签都能加上style属性,让你能直接对标签应用CSS样式规则,与上面的例子一样.
<h1 style="font-family: Georgia, serif; color: orange;">This is a Title</h1>
<head>你应该发现了,后面两个<link>标签在为rel属性指定了"alternate stylesheet"之后,我们还加上title属性为样式表指定名称.以便稍后进行选择.
<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>
body {然后在large.css中用略大的字体大小覆盖预设值:
font-size: 12px;
}
body { font-size: 16px; }
同样的,在larger.css中再放大一些:
body { font-size: 20px; }
当启动之后(我发誓马上就会解释),large.css和larger.css样式表就会覆盖预设样式规则,放大页面字体大小.
图10-3 Mozilla的替换样式表清单.
希望更多浏览器制造者能实现类似的功能,但是在那之前,还有另一种切换替换样式表的做法 -- 甚至能发挥cookies的魔力,保存下用户的选择.
Paul Sowden 在 A List Apart写了篇不可多得教学,题为"Alternative Style: Working With Alternate Style Sheets"(http://www.alistapart.com/articles/alternate/).在这篇文章里,他解释如何以一段JavaScript在浏览器内启动,关闭替换样式表. 网页教学网
切换动做由页面上的超链接完成,能根据title属性选用任何样式表.这段JavaScript会设定cookies记下使用者的最后一次选择,因此在使用者下次浏览网站时,除了预设样式表之外,也会启动正确的替换样式表. 网页教学网
举个例子,在编写这段内容时,我的个人网站提供了三种不同的配色方式,每种配色都能通过点击图标,呼叫Paul Sowden的script工作,第一个图标是预设值,而第二个,第三个图标则是两个提供不同配色方式的替换样式表(图10-4).
图10-4 点击图标,启动替换样式表
由于JavaScript是在使用者端执行的,因此切换动作会立刻生效,不需要重新读取整个页面,切换速度非常快.
完整的JavaScript程序可以到Paul Sowden在A List Apart撰写的文章下载(http://www.alistapart.com/articles/alternate/).
不止能调整字体大小
通过实验层叠作用,把特定的规则放在替换用样式表中,覆盖某些预设规则,就能在网站上做出一些十分有趣的互动效果,只需要用上简单的script与几条CSS规则,就算是小带宽也能带来大冲击.
DOM的好意
我们必须感谢另一个W3C标准,让我们能以script存取替换样式表,所谓的DOM,或称之为Document Object Model,其实是...恩,一起来看看W3C是怎么解释的:
文档对象模型是个与平台,语言无关的界面,主要是让程序与scripts能够动态存取修改文件内容,结构和样式.并且能够进一步处理文件,处理完成的结果会整合到显示的页面里头,这是W3C以及网络上**DOM资源的概念. W
ebjx.Com
听起来很熟悉,不是吗?这正是样式切换script所做的事情,动态存取,更新文件的样式设定.如果遵循W3C标准的话就能很轻松的办到,让开发者编写的script能够使用既定方式存取标记源代码的标签,如果努力编写符合标准的标记源代码,我们就能确保未来更容易撰写符合标准DOM的script,增强使用者浏览这些页面的体验. 网
页教学网
样式切换script只触到了为DOM编写script的表面而已,但是这仍然是个以标准编写网页能获得很大好处的最佳示例.
版权所有© 一品威客网 威客·任务·一品威客网（www.epwk.com） 备案证号：闽ICP备12001463号
广告投放联系方式：400-128-6668 传真：0592-6301978
微信号：epweike
已经有超过10万小伙伴关注了！
更多精彩好玩的活动敬请关注微信公众号
分享
收藏
支持
反对
