用CSS美化你的引用

在撰写文档时，经常会引用其它出处的文字，在网页中应该明显的标识出这些引用。一方面是为了方便用户的阅读；另一方面也是出于对原文作者的尊重！默认情况下，浏览器只是将（使用blockquote标签）引用的部分，左右两侧各留出36象素的空白，这显然不够醒目和美观。对于如何清晰美观的展现引用部分，我做了以下尝试：

1. 开头用引号标识的引用样式。

请查看实例

要实现以上效果，只需要一个引号图片和一小段CSS代码。这是最简单的解决方式，效果简洁明了，我在自己的Blog上就使用了这种方式。（这是从PJ Hyett的Blog上学到的）

1 blockquote {
2   background: url('blockquote.gif') no-repeat 0 2px;
3   font-size: 13px;
4   line-height: 18px;
5   color: #666;
6   padding-left: 23px;
7   margin: 0 40px 15px 0px;
8 }

2. 开头和结尾都用引号标识的引用样式。

请查看实例

要实现以上效果，需要两个引号图片和一小段CSS代码。这是稍微麻烦的解决方式，效果也最接近用户的习惯。（这是从Digital Web Magazine - Jeremy Keith上学到的）

 1 blockquote.pullquote {
 2   color: #666;
 3   background: #dcdcdc;
 4   padding: 0;
 5   width: 250px;
 6 }
 7
 8 blockquote.pullquote p.quote_con {
 9   margin: 0;
10   padding: 0 20px;
11 }
12
13 blockquote.pullquote p.quote_top {
14   margin: 0;
15   padding: 0;
16   background: #dcdcdc url('left-quote.png') no-repeat scroll left top;
17 }
18
19 blockquote.pullquote p.quote_bot {
20   margin: 0;
21   padding: 0;
22   background: #dcdcdc url('right-quote.png') no-repeat scroll right bottom;
23 }

以上的CSS代码中，创建了三种段落样式。"p.quote_con"用来显示引用的内容；"p.quote_top"用来显示左上角的引号；"quote_bot"用来显示右下角的引号。

1 <blockquote class="pullquote">
2 <p class="quote_top">&nbsp;</p>
3 <p class="quote_con">引用的具体内容</p>
4 <p class="quote_bot">&nbsp;</p>
5 </blockquote>

以上的XHTML代码中，利用三个段落实现了开头和结尾都用引号图片标识的引用样式。

Technorati Tags: CSS, XHTML, blockquote, Quote