[翻译]标记语言和样式手册 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 表单
0
投稿猜你喜欢
前言有时候大家需要知道一个关键词在互联网上的热度，想知道某个关键词的热度变化趋势。大家可能就是使用百度指数、微信指数之类的。非常好用，但是就- JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。它基于JavaScript（Standard
- 通常人们使用以下两种方法来执行SQL语句： Set Rs=Conn.Execute(SqlStr) 和&nbs
- 使用sql的计划任务可以处理一些特殊环境的数据，除了使用windows系统的计划任务来定时处理，不过要配合程序才行，有些事情可以直接使用sq
- 文本的排版依据语言的不同会有一些格式上的要求，比如简体中文中类似逗号、分号等标点符号不会出现在一行的开头，对于英文来讲就是一个完整单词不会在
- 一、函数解释1.Softmax函数常用的用法是指定参数dim就可以：（1）dim=0：对每一列的所有元素进行softmax运算，并使得每一列
- 1.排序ORDER BY 子句来设定哪个字段哪种方式来进行排序，再返回搜索结果。desc：降序select * from blog orde
- 首先新建一个dataframe：In[8]: df = pd.DataFrame({'name':list('ABC
- <html> <head> <script type="text/javascript"&
- 这个项目到一开始的kickoff到现在，持续了很长的一段时间，现在差不多也接近了尾声，所以要好好做个总结，下面不会设计到太多技术层面上的东西
- 本文实例为大家分享了基于Tensorflow的MNIST手写数字识别分类的具体实现代码，供大家参考，具体内容如下代码如下：import te
- 图像文件是自己仿照mnist格式制作，每张图像大小为128*128import structimport matplotlib.pyplot
- 本人第一次使用vue awesome。踩到的坑确实不少。官网上面的用法写的很简单，按照上面做法基本会遇到如下这个问题轮播第二次之后，首屏会自
- 获得当前时间时间戳# 注意时区的设置import time# 获得当前时间时间戳now = int(time.time())# 转换为其他日
- PyQt5布局控件QVBoxLayout简介采用QVBoxLayout类，按照从上到下的顺序添加控件本节内容较少，演示两个实例，便于明白QV
- #!/usr/bin/env pythonimport sysfrom PyQt4 import QtGui,QtCoreimport ht
- 在windows平台上使用pyhton编写语音识别程序需要用到speech模块，speech模块支持的主要功能有：文本合成语音，将键盘输入的
- hp中怎么让json_encode不自动转义斜杠“/”？下面本篇文章给大家介绍一下PHP中让json_encode不自动转义斜杠“/”的方法
- 本文实例为大家分享了Python读写Excel表格的具体代码，供大家参考，具体内容如下python读取Excel表格：import xlrd
- 我们在讲模块的时候，有些人看到了内置属性，就把它们当做函数，其实还是有区别的，这里需要为大家进行明确。我们所看到的函数两边带有双下划线，这是
