August 1, 2007
CSS扫盲（五）：制作漂亮的双引号引用标志
从这一期的CSS扫盲教程开始，我将陆续发表一些有趣的CSS应用实例——学习基础知识实在无聊。今天的内容是如何利用CSS制作漂亮的双引号引用标志。看下面的示例：
使用漂亮的双引号把引用内容放进来！
首先，我们需要知道一些基本的东西：
- 引用的标签是blockquote
- 事先准备两张“双引号”图片并保存在主题的images目录下
下面是相应的CSS代码，加入到你的CSS中吧：
blockquote p {
font: 12px Georgia, "Times New Roman", Times, serif;
width: 400px;
padding-left: 18px;
text-indent: -18px;
}
blockquote p:first-letter {
background: url(images/open-quote.gif) no-repeat left top;
padding-left: 18px;
padding-top: 12px;
font: italic 26px Georgia, "Times New Roman", Times, serif;
}
blockquote p ~ p:first-letter {
font: normal 12px Georgia, "Times New Roman", Times, serif;
background: none;
}
blockquote {
color: #777;
padding-top: 6px;
padding-bottom: 10px;
background: url(images/close-quote.gif) no-repeat right bottom;
}
font: 12px Georgia, "Times New Roman", Times, serif;
width: 400px;
padding-left: 18px;
text-indent: -18px;
}
blockquote p:first-letter {
background: url(images/open-quote.gif) no-repeat left top;
padding-left: 18px;
padding-top: 12px;
font: italic 26px Georgia, "Times New Roman", Times, serif;
}
blockquote p ~ p:first-letter {
font: normal 12px Georgia, "Times New Roman", Times, serif;
background: none;
}
blockquote {
color: #777;
padding-top: 6px;
padding-bottom: 10px;
background: url(images/close-quote.gif) no-repeat right bottom;
}
第一部分用于定义引用文字的一些基本信息（字体，宽度，左留空等）；
第二部分使用p:first-letter，定义引用文字首字的样式，左上方有“左引号”图片做背景、字体样式为斜体等；
第三部分的p ~ p:first-letter是什么意思呢？这段代码用来保证非第一段文字的首字母并不应用第二部分代码定义的样式，假如引用文字中有两个以上段落也不至于出现多个“左引号”，可惜的是IE6不支持此段代码 -__-||
这是引用文字的第一段。
第二段在这里，大家可以分别使用Firefox和IE看看效果有什么不同。
第四部分定义了引用文字的字体颜色、在引用文字的右下方有“右引号”图片作为背景。
这样就搞定了。看上去似乎并不难吧？好了，就讲这么多，赶快在你的blog上试试吧！
References:
Simple Double Quotes
Nick La的站看来也是经常关注
不知道为什么，我在自己博客中实现不了。头都昏了，先睡觉喽
Nick La的方法不对，有人在评论中提出来了，呵呵，这个方法就是我借鉴他们二人的基础上弄出来的。
嗯，果然不同，呵呵
没办法，呵呵，IE就是这样。
哈，按你说的搞定了。
双quote漂亮多了
哈哈，我去参观！
谢谢
好詳細的教學，我也試著做，
但是一個很大的問題是–
我找了好久,都找不到 兩張「雙引號」圖片 -__-
求救求救，如果可以寄給我，那就太感謝了～
已经 email 给你了。
你好，
谢谢你寄给我，可是我没有收到email，方便再寄一次给我吗?
谢谢，真是不好意思。^^
直接给你下载地址吧：
Open Quote
Close Quote
謝謝你! 收到! ^^