标记语言——网页应用CSS样式
互联网 发布时间：2008-10-17 18:56:03 作者：佚名 
我要评论
我要评论点击这里返回网页教学网 HTML教程 栏目．想浏览CSS教程请点这里。
上文：标记语言——精简标签。
Chapter 10 应用CSS
在第一部分主要的焦点放在标记语法的例子上，也探讨了如何在标签上应用CSS进行设计,指定样式细节.在第二章,我们将讨论几种把CSS应用到
技巧延伸
在这个单元里,稍微深入样式表的世界,看看替换样式表(一份标记源码配上许多份样式表),以及如何让使用者握有更多控制,选择想要使用的样式表. 替换样式表
在本章开始的时候,我们讨论了四种为页面应用CSS的不同做法,同时展示了链接,导入外部样式表的好处,我们能更进一步引用样式表,让使用者有机会选择更大的字体,不同的色彩主题,甚至是不一样的页面布局.
我们能以<link>标签引用许多份样式表达成这个功能(与本章最初的方法B十分类似),但是要为rel属性指定"alternate stylesheet".
举例来说,如果想让使用者能够选用额外的两种字体大小,可以像平常一样链接主题样式表,接着再链接替换样式表.
你应该发现了,后面两个<link>标签在为rel属性指定了"alternate stylesheet"之后,我们还加上title属性为样式表指定名称.以便稍后进行选择.
"预设"的样式表一定会内浏览器启动,浏览器会下载large.css与larger.css,但除非以其他方式启动(稍后会说),否则浏览器不会使用里面的定义内容.rel属性设定的"alternate stylesheet"正是防止这些样式表在页面载入后立刻"启动"而加到标签上.
如果我们想对老旧的浏览器像是Netscape 4.x隐藏这些替换样式表的话,不必使用@import方法,Netscape不支持rel属性的"alternate stylesheet"值,因此这些样式不会发生作用. 三种字体大小
让我们来看看这些替换样式表里面放了什么.举例来说,如果我们想让使用者放大页面字体大小的话,我们能在替换样式表中指定更大的字体,在启动之后让它们覆盖default.css中的规则.
如果我们以像素指定字体大小的话,这尤为方便,因为某些浏览器不允许使用者放大这类字体,要是把基础字体设为视力不佳者难以阅读的大小时,就能用替换样式表提供放大字体的功能.
因此,在default.css里,可以为网站设定基础字体大小:
然后在large.css中用略大的字体大小覆盖预设值:
同样的,在larger.css中再放大一些:
当启动之后(我发誓马上就会解释),large.css和larger.css样式表就会覆盖预设样式规则,放大页面字体大小.还是层叠
在这个单元里,稍微深入样式表的世界,看看替换样式表(一份标记源码配上许多份样式表),以及如何让使用者握有更多控制,选择想要使用的样式表. 替换样式表
在本章开始的时候,我们讨论了四种为页面应用CSS的不同做法,同时展示了链接,导入外部样式表的好处,我们能更进一步引用样式表,让使用者有机会选择更大的字体,不同的色彩主题,甚至是不一样的页面布局.
我们能以<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里面指定了排版布局,定位之类的规则,而代用样式表没有重复这些规则的话,这些规则就会继续发生作用.
使替换样式表发挥作用
太棒了.现在我们已经把替换样式表准备好了,随时可供使用.使用者要如何启动它们?不幸的是,很少浏览器具备替换样式表的内建功能,而Mozilla是具备这项功能的浏览器之一.
如果有替换样式表的话,浏览器视窗的左下角会出现一个小图标,Mozilla使用者可以点击这个图标,从选单中启动替换样式表(图10-3).
图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资源的概念.
听起来很熟悉,不是吗?这正是样式切换script所做的事情,动态存取,更新文件的样式设定.如果遵循W3C标准的话就能很轻松的办到,让开发者编写的script能够使用既定方式存取标记源代码的标签,如果努力编写符合标准的标记源代码,我们就能确保未来更容易撰写符合标准DOM的script,增强使用者浏览这些页面的体验.
样式切换script只触到了为DOM编写script的表面而已,但是这仍然是个以标准编写网页能获得很大好处的最佳示例.
结论
在这一章里,我们讨论了几种将CSS应用到标签,文档和整个网站的做法,同时也学会如何对老旧浏览器隐藏CSS,以及如何引用多重样式表.接着讨论了为不同支持程度的浏览器提供Lo-Fi和Hi-Fi样式表的做法,而不必编写scripts或是在服务器端侦测浏览器类型.
最后,学到了替换样式表,如何通过使用DOM编写JavaScript让使用者获得动态切换样式表的好处,允许使用者选择字体大小,色彩甚至是布局.
最后希望这些技巧能让你在设计样式的时候顺利起步!
图10-3 Mozilla的替换样式表清单.
图10-4 点击图标,启动替换样式表
相关文章
文章介绍了HTML中img标签的使用,包括src属性（指定图片路径）、相对/绝对路径区别、alt替代文本、title提示、宽高控制及边框设置等，本文主要给大家介绍HTML img标签和超链2025-06-20- HTML meta标签用于提供文档元数据,涵盖字符编码、SEO优化、社交媒体集成、移动设备适配、浏览器控制及安全隐私设置,优化页面显示与搜索引擎索引，本文给大家介绍HTML中meta2025-06-20
input 标签主要用于接收用户的输入，随 type 属性值的不同，变换其具体功能,本文通过实例图文并茂的形式给大家介绍HTML input 标签，感兴趣的朋友一起看看吧2025-06-20
这篇文章主要介绍了html 滚动条滚动过快会留下边框线的解决方案,解决方法很简单，可以将 dialog 单独拿出来别放在 transform 的子元素里,需要的朋友可以参考下2025-06-09- 本文将介绍如何使用<img>标签在 HTML 中添加图片，并展示一些常见的用法和技巧,通过本文的介绍，应该掌握了在 HTML 中添加和调整图片的基础知识，感兴趣的朋友一起看2025-05-16
- HTML表格用于在网页上展示数据,通过标签及其相关标签来创建,表格由行和列组成,每一行包含一个或多个单元格,单元格可以包含文本、图像、链接等元素,本文将详细介绍HTML表格2025-03-12
- 本文介绍了三种禁止HTML页面滚动的方法：通过CSS的overflow属性、使用JavaScript的滚动事件监听器以及使用CSS的position:fixed属性,每种方法都有其适用场景和优缺点，感兴2025-02-24
在 Web 开发中，文本的视觉效果是提升用户体验的重要因素之一,通过 CSS 技巧，我们可以创造出许多独特的效果，例如文字镂空效果,本文将带你一步一步实现一个简单的文字镂空2024-11-17
在Html中,a标签默认的超链接样式是蓝色字体配下划线,这可能不满足所有设计需求,如需去除这些默认样式,可以通过CSS来实现,本文给大家介绍Html去除a标签的默认样式的操作代码2024-09-25- 在HTML中,可以通过设置CSS的resize属性为none,来禁止用户手动拖动文本域（textarea）的大小,这种方法简单有效,适用于大多数现代浏览器,但需要在老旧浏览器中进行测试以确保2024-09-25
最新评论