老肥谈如何在博客正文中运用样式

appearance一篇吸引眼球的文章一定要有漂亮的样式,除非它是 keso 或者韩寒写的。如果没有他们那样强大的品牌保证,那么一定要把内容和外观都做好,不然读者很难坚持阅读完大篇幅密密麻麻的文字,至少我阅读时是这样的。我以前也谈过博文 链接标签 的运用,希望它们能对您有所帮助。

题图和插图

图片的重要性是显见的,题图则可以一开始就吸引读者浓厚的兴趣。大猫 的题图一向很大很咸湿,我习惯用 128x128 的兔子图标。用 logo 做题图也不错,比如 cnBeta 的文章会自动套用话题 logo, 详细到有关鲍尔默的文章都有一个他的猴子头像。也许这样一个图片没有太多实际意义,但心理上的效果明显。不然门户网站的编辑为什么总要凑两张图片然后标题里称“组图”呢,就是要你点。

题图适合用浮动一侧的样式,按 ctrl+u 查看本文代码,就会发现我把题图所在的 <img> 标签放在了最前面,并加上了 style="float: left; margin-right: 5px" 让它浮动在左边。这个样式不适合用全局 CSS 来做,因为每个题图需要的边距都不同,而且自己定义的 CSS 样式不会传递到阅读器中。

插图不宜太大,如需大图,用缩略图做个链接。最近我给图片上的链接加了个样式,让读者更容易察觉链接,如右所示。(自定义 CSS 只在原文生效,阅读器里没有)如果觉得不错,可以在 代码 中搜索 piclink 查看。

如何强调和高亮

通常我们用 粗体 或者 高亮 来强调重点,但不可多用,不然就没有重点了。将文字弄成红色不是很好的办法,我的英文老师曾告诉我们 ALL CAPS is shouting, 所以我觉得红色的文字也显得不够礼貌。

html 格式标注的使用

行文中常用的 html 格式标注包括 h3, h4, ul, ol, li, blockquote 等,一般来说正文中的子标题不应该太大号,h3, h4 就可以了。ul 叫做无序列表,ol 叫做有序列表,li 用来标注列表中每一条项目,blockquote 是区块引用。写列表时,手动写入 1...2... 是很不规范也没有效率的做法,应该使用 html 标注,多用用编辑器的预览模式和代码模式,很容易学会:

  1. 这是一个有序列表
  2. 这是第二条
  • 这是一个无序列表
  • 这是第二条


这是一个区块引用,可看作一个有缩进的段落。引号图片是在 CSS 中定义的,在阅读器中不会有。


上面的例子中我将 ul 每条项目前做成了绿色圆点图标,这是在本站 CSS 中定义的,到阅读器中不会有这样的效果,但 ul, li 作为标准 html 标注,一般会被显示成黑色圆点的样子,标题字号、行距什么的都不会错,只是会换成缺省样式,或者阅读器里定义的样式。

合适的子标题、列表可以让文章层次分明,井井有条。如果对它们应用样式,推荐在全局 CSS 中进行,不宜过多地将格式写到 style="" 中,麻烦不说,到阅读器中就会花花绿绿的了。一个典型的错误就是指定整段文字的颜色,要是博客是深色底浅色字,到阅读器里就成浅色底浅色字了。使用 CSS 可以让样式具有更大的适应性。

写完了

OK, 如果您读到这里,就说明我这篇文章还不算失败 👿

最新评论

  • 高午饭 博主现在的社交网络有么,想关注您呢 我为什么爱 Twitter
  • 西贝博客 很好的建议!谢谢分享! 如何为 blog 建立一个高效的标签系统
  • 苹果 老罗露脸了,哈哈,支持他现在的事业 我为什么爱 Twitter
  • 飞之梦 不错,第一次看到这些效果,以后要用一用了。 CSS 文字阴影在网页设计中的应用
  • QQ地带 大牛,pansou也是用的ajax search,为什么他不会被墙呢,因为他调用的地址是ip,不是直接的谷歌域名。请问怎么实现。 打造完美的 ajax 版 Google 自定义搜索

发表您的评论

您的评论将回复给 原评论者

:D:):O8):(8D;DXD:P:nice::rainbow::cafe::love::cake:

目前有 50 条评论

  

不知道为什么阅读器里都不支持很多丰富的样式呢?

阅读器不可能去加载原文的样式嘛,都是统一的样式,比较接近缺省 html, 也有不同,比如抓虾里面的 headline 都是绿色的 :)

过来学习下,老肥同学总结的不错

文章给人的感觉还是蛮重要的,老肥这里的配色就舒服,Google阅读器看起来也舒服,感觉比抓虾要好。

抓虾不怎么样,一直也没有什么进步……

抓虾快要倒闭鸟

嗯,你的博客比较舒服啦。没有广告。

兔子图我看得腻了……杀了我吧……

呃,都看腻了哇

等差不多用完了再换别的,哈哈

mark一下,以后再用~

很好的文章!!! 😆

自己的排版一直很差 :(

呵呵,恭喜你成功了,我全看完了,突然很受启发

不好意思啊,我只看了第一段和最后一段,感觉上这两段貌似比较重要…… 👿 :p

拖出去打十分钟。。。

我就是那种手动写 1.2.3 的人。。。因为我要过 W3C。。。

我也是手动写,习惯了...

我以后在文章中插图再也不用WordPress默认的左右浮动设置了,阅读器里一团糟,害死人.
用子标题的问题,有很多主题喜欢直接将h2 h3 h4 h5全部定义成一个字体大小,所以还是要仔细寻找一下CSS里面的定义,我用过的主题除了Sofish的这个之外,都是这样的...
PS:发现搜狗的一快捷键,中文状态下输入h6

哈哈,是这样的,如果搜狗一排显示的候选字不足九个,按更大的数字都会调出那个特殊字符表,看来你的个数是默认啊

其实关注fisio博客这么久,上面写的一大半也是我都注意到的了,像配图啊ul li和引用什么的,这样总结出来当然更好了。

非常实用。

我直接跳到了文章的开头,然后直接跳到了文章的末尾,算失败不?

呃。。不发表意见

顶顶更可爱

顶顶更健康

恩,除了题图之外,基本上都能做到。

感觉每篇文章都带图有点怪。

当然不用每篇都带图,我比较那个一点... 👿

这是兔子么,我一直以为是狗 😮

我也看完了。。

在换主题?

换主机了。。呵呵

搞定

感觉很重要,文章更重要

老肥啊,Google Reader更新了,预览的脚本都不能用了,有解决方案没?

等更新吧...

我所知道的目前只有一个集成了区域精简、favicon显示的脚本,可以 试试

评论放这边的确很好

:) 图片上的hover链接样式确实不错~~嘿嘿,虚心学习~
btw,我很纯洁...

老肥,弱弱的问一下,怎样实现高亮啊? :p

你从我的 default.css 中复制关于 piclink 的那些行,大概是从 120行开始。然后应用这些到自己的 css 中,需要此效果的地方 <img> 标签中加入 class="piclink"

用 class 控制一下是为了不让侧栏等地方统统应用这一样式,如果不想每次都标记,也可以从全局控制中指定此效果仅对正文部分生效,做法就要具体分析啦

哦,谢谢老肥~ :rainbow:

不失败………… 呵呵

高手撒 高手啊
玩得转博客

有时不喜欢阅读器就是这一点,人家换了主题都不知道。以前我还喜欢段前空两格,现在不弄了。

wordcamp shanghai 的时候,白鸦出描述题,猜博客,他老是说这个博客的版式啊,logo啊什么的,对订阅读者来说,有点难,呵呵

有些博客,我都只在别人的分享里看到,博客长啥样儿,完全不知道-_-

学习了

请问 如何才能让我的引用效果显示带那个大的引号呢?

以前的模板有可现在的没了。。

还有高亮效果有插件在编辑区实现编辑时选择吗?

这是在全局 css 中对 <blockquote>引用文字</blockquote> 进行了样式化,如果查阅我用的 css 可以找到:

blockquote, quote {
background:transparent url(../images/quote.gif) no-repeat scroll left top;
margin:10px 30px 0 0;
padding:3px 10px 3px 35px;
}

高亮我也没有用插件,而是直接写了:

<span style="background-color: yellow;">高亮</span>

受教了~~~

嘿,老肥文章写的相当不错,这些文章所表达的观点也非常实用,赞。

 ....uh
受益匪浅- -

很好很实用。

呵呵,学习了,谢谢,欢迎来我的博客看看 8) :)