您博客上代码的CSS样式

CSS

我的一个朋友问我如何在上一个博客条目中设置代码区域。 我实际上是利用一种样式来“伪造”代码区域。 在Blogger中,您可以编辑模板。 我添加了以下样式:

p.code {font-family:Courier New; 字号:8pt; 边框样式:插图; border-width:3px; 填充:5px; 背景颜色:#FFFFFF; 行高:100%; 边距:10px}

下一步是在“编辑HTML”模式下编辑我的标签。 我只是通过制作标签来指向我的新样式。 瞧! 细分样式:

  • 将字体设置为Courier New…看起来像通用代码编辑器
  • 将字体大小设置为8pt以看起来正确
  • 将段落边框样式设置为“插入”。 这将复制文本区域在页面上的外观。
  • 将边框宽度设置为2或3像素。 这样可使插入边框样式看起来正确。
  • 填充设置边框和内部文本之间的距离。
  • 背景颜色…将其设置为白色(#FFFFFF)
  • 线高–我将此值调整为100%,因为博客主题中的其他一些样式使我的线高约为200%
  • 将边距设置为10像素。 这会将段落(p标签)与所有内容分开10个像素。

这就是全部! 注意事项:Blogger随附的编辑器无法显示,因为它将显示在您的博客中。 但是它有效并且看起来很棒!

另外要注意的一件事是………………………………………………………………………………………………………………………………………………。 有点烦人! 我的建议是写您的整个帖子,然后再做一个小的编辑。

最后一点……请务必使用HTML实体显示符号! 几个例子:

  • 引号(“)是“
  • >是>
  • >是>

编码愉快!

3条评论

  1. 1
  2. 2
  3. 3

你觉得呢?

本网站使用Akismet来减少垃圾邮件。 了解您的数据如何处理.