CSDN博客排版技巧

标签：style   blog   color   使用   strong   2014   

CSDN的博客排版采用的编辑器是xhEditor，官方介绍是：能实现Word代码自动检测并清理，提供高效完美的Word代码过滤方案，生成代码最优化精简，不丢失任何细节效果。但是，实际使用中不丢失任何细节是不能的，word -> html 感觉样式或多或少都会有改变。

我对CSDN的在线编辑的使用感受：

• 使用默认的在线编辑，行间距略大，段间距略小，再加上无首行缩进，感觉排出来的段落层次不够清晰；
• 复制粘贴其他网页的内容和富文本格式的内容，会一并粘贴过来格式，嵌套在 <span style="...">...</span> 中；
• 在线可视化编辑时，如果有自定义的样式想切换回去，常常只能先切换到源代码编辑，输入一些字符后再切换到可视化编辑；

我个人的使用建议：

1. 先使用自己习惯的文本编辑器（sublime or vim）等编辑，在这些编辑器里复制粘贴时会自动去掉样式留下纯文本；
2. 需要粘贴代码的地方留下一行标注，最后在 可视化在线编辑 中插入代码；
3. 需要特殊样式的地方，如标题、列表、文字颜色等先选中，然后利用可视化编辑即可；
4. 需要自定应样式的地方，可以自己复制粘贴一下自己写好的样式，然后改里面的内容；
5. 最后不满意的地方切换到源代码编辑状态下进行修改，删除可视化在线编辑自动生成的一些无用HTML代码；

当然你也可以利用Word和Windows live writer：

• 利用word排版好，复制过来，然后切换到源代码编辑状态进行调整，修改自己不满意的地方；
• 利用windows live writer进行排版好，然后站过来，有样式偏差仍然实在源代码编辑状态下调整；

我自己再写博客的时候，常常需要一个样式来显示写程序运行结果什么的，但是却没有很好的现成的样式，这时只好自己动手编HTML和CSS代码，写了一个样式。

效果如下：

DATA
DATA

上面那一段的HTML源代码是：

<pre style="font-family:consolas; font-size:13px; line-height:1.5; white-space:pre-wrap; word-break:break-all; word-wrap:break-word; color:#333333; background-color:#F5F5F5; border:1px solid #CCCCCC; padding:9px;">DATA
DATA</pre>

<pre>标签可定义预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。

样式中的3个CSS属性：

word-break:break-all;  /* break-all允许在单词内换行；normal使用浏览器默认的换行规则 */
word-wrap:break-word;  /* break-word在长单词或 URL 地址内部进行换行；normal: 默认只在允许的断字点换行 */
white-space:pre-wrap;  /* pre-wrap保留空白符序列，但是正常地进行换行；normal：默认空白会被浏览器忽略 */

一些编辑技巧：

在自己的自定义样式中编辑时如果是复制过来的纯文本，则可以直接复制到里面，但是如果敲回车的话会直接新建一个块标签，这是应该使用 shit+return .

如果对博客定制型要求很高，国内只能自己买空间搭自己的博客了，没办法，在天(he)朝(xie)最好的博客服务WordPress被墙了!

CSDN博客排版技巧,码迷,mamicode.com

CSDN博客排版技巧

标签：style   blog   color   使用   strong   2014   

原文地址：http://blog.csdn.net/thisinnocence/article/details/24597065