[翻译]标记语言和样式手册 Chapter 4 引用(4)
作者:zhaozy 来源:3user.com 发布时间:2008-01-20 14:19:00
结果
图4-2是典型的现代浏览器所能看到的结果,圆角外边框十分完整,两个引号则漂亮的藏在文字后方.这个方法最棒的地方是整个外框可以扩大,代表你能放进去任何长度的引用内容,外框会配合引言长度自动放大或缩小(自适应),而且引号与圆角都会停留在适当的位置.这也代表视力不佳的使用者方法字体时,引用于外框的设计不会被破坏.
图 4-2,使用三个背景图与文字的引用样式示例.
强调特殊文字
我为Fast Company额外加上的引用样式之一是在引用范围内使用<strong>标签来强调特定重点文字的效果.这能进一步模仿杂志上使用的排版风格.
借着使用<strong>,我们能确保大多数不支持样式或是非可视化浏览器仍然可以得到粗体或强调的效果(在这个例子中很合理),同时我又能以CSS特别指定改用深色显示<blockquote>范围内的<strong>标签.
标记源代码内容需要略作修改,以<strong>标示几个选定的单字.
<blockquote cite="http://www.somesite.com/path/to/page.html">
<p id="quote"><strong>Misquotations</strong> are the only quotations
that are <strong>never</strong> misquoted.</p>
<p id="author">—Hesketh Pearson</p>
</blockquote>
然后这段是需要加上的额外css规则的内容:
#quote strong {
color: #000;
font-weight: normal;
}
此时,任何出现在引用范围之内的<strong>就会变成黑色(不能更黑了),另外由于引用的其他部分使用了一般的font-weight,因此我们以normal取代<strong>预设的粗体样式.
使用<strong>标签的结果可以在图4-3里看到,我们强调了"Misquotation"和"never"这两个字.
图4-3 以<strong>强调特定单字的<blockquote>样式
这回退化到什么程度?
我们知道CSS与几张背景图能把引用美化到什么程度了,但是在不支持CSS的浏览器或设备上会变成什么样呢?这个方法的显示效果会退化到什么程度呢?
恩,幸好我们以原始设计用途使用了<blockquote>元素,因此不支持样式的浏览器,电话,PDA以及屏幕阅读器都能正确的处理他的内容.举例来说,图4-4就是这个页面去掉CSS之后的样子.我在引用前后加上了虚构的文字,以便让你看到完整的效果.
图4-4. 图4-3去掉CSS之后的样子
结论
在仔细研究过几种标识引用的不同方法之后,我们很容易就能找到处理问题的正确工具,也就是<blockquote>,单纯为了缩进文字而使用<blockquote>的时代已经过去了,我们现在用它来标记长引用.
一旦完成了结构,就能轻易为<blockquote>加上样式,使他们区别于一般内容之外,同时仍能让不支持CSS的浏览器或其他设备正常解析内容
阅读下一章:Chapter 5 表单
猜你喜欢
- 做一个总结,把自己这些年的从业经历和观感罗列一下,某些话可能触及到个人神经,但它们没有恶意。设计师喜欢把世界想象得很美好,社会很和谐,但是这
- 描述返回表达式,此表达式已被格式化为日期或时间。语法FormatDateTime(Date[, NamedFormat])FormatDat
- 最近看到好多人说到tns或者数据库不能登录等问题,就索性总结了下面的文档。首先来说Oracle的网络结构,往复杂处说能加上加密、LDAP等等
- 要随机生成字符串代码如下:在MySQL中定义一个随机串的方法,然后再SQL语句中调用此方法。随机串函数定义方法:CREATE DEFINER
- 汉字转换为UTF-8的一段代码终于找到这段代码了,一个ASP写的中文转UTF-8,大家可以试试function chinese2u
- HTML 5基本思维概念形成于2003年,之后W3C对页面超文本应用技术工作小组(WHATWG)开发的HTML草图颇感兴趣,这个小组的开发人
- CAPTCHA,全称为“Completely Automated Public Turing test to tell Computers
- 在ie7发布之前,Dean的addEvent/removeEvent可以称的上是完美了。IE7发布后,引入新的内存泄漏(这个我不是很确定,忘
- 请问如何在ASP中使用ADO调用Oracle的存储过程?我们可以在下面的代码里使用微软Oracle 的OLE DB Provider ,包括
- 可能接触网站与编程设计的人都知道,一个属性值需要引号包括起来,但是有的时候就是因为没有正确设定引号类型,导致程序出错,就连我自己也是这样,我
- slice 可以用来获取数组片段,它返回新数组,不会修改原数组。除了正常用法,slice 经常用来将 array-like 对象转换为 tr
- 相信每个前端工程师都有自己喜爱的javascript框架,说情感也好,道信仰也罢,javascript框架带给人的不仅仅是便捷的开发,更有一
- 本文将想大家简单介绍一下XML HttpRequst对象基础方法,希望通过本文能够使大家对其有一个初步的了解readyState一共有5个可
- 查询速度慢的原因很多,常见如下几种:1、没有索引或者没有用到索引(这是查询慢最常见的问题,是程序设计的缺陷)2、I/O吞吐量小,形成了瓶颈效
- CREATE OR REPLACE PROCEDURE PROCSENDEMAIL(P_TXT &
- 近日无事,想起以前曾打算过要做一个定时重启或关机的工具,便花了一点时间以hta的形式写了个,名为"Windows Timer&qu
- 1.怎么样查看数据库字符集 [A]数据库服务器字符集select * from nls_database_parameters,其来源于pr
- 代码如下:--销售冠军 --问题:在公司中,老板走进来,要一张每个地区销量前3名的销售额与销售员的报表 --- create t
- 首先这个是7米当时问我一个问题,不过可惜我不知道怎么解决,后来知道解决方法很简单,只是添加了一个margin-top:-1em就
- 下面的各种屏蔽网页鼠标或键盘的代码都是我以前收集的,挺实用的,防一般的访客还是很有用的。1.禁止鼠标选中捕捉网页文字图片等元素在<bo