内容营销
Blogger:博客代码的 CSS 样式
有朋友问我如何在 Blogger 条目中制作代码区域。 我在 Blogger 模板中使用 CSS 样式标签来完成此操作。 这是我添加的内容:
p.code {
font-family: Courier New;
font-size: 8pt;
border-style: inset;
border-width: 3px;
padding: 5px;
background-color: #FFFFFF;
line-height: 100%;
margin: 10px;
}
p.code
:这是一个针对 HTML 的 CSS 规则<p>
类名为“code”的元素。 这意味着具有此类的任何段落都将根据以下属性设置样式。font-family: Courier New;
:此属性将字体系列设置为“Courier New”。 它指定目标元素中的文本将使用的字体。font-size: 8pt;
:此属性将字体大小设置为 8 磅。 目标元素内的文本将以该字体大小显示。border-style: inset;
:该属性将边框样式设置为“内嵌”。 它为目标元素周围的边框创建凹陷或受压的外观。border-width: 3px;
:该属性将边框宽度设置为 3 像素。 元素周围的边框将为 3 像素厚。padding: 5px;
:此属性在目标元素内的内容周围添加 5 个像素的填充。 它提供文本和边框之间的间距。background-color: #FFFFFF;
:此属性将背景颜色设置为白色 (#FFFFFF)。 目标元素内的内容将具有白色背景。line-height: 100%;
:此属性将行高设置为字体大小的 100%。 它确保文本行根据字体大小间隔。margin: 10px;
:此属性在整个元素周围添加 10 像素的边距。 它提供了该元素与页面上其他元素之间的间距。
提供的 CSS 代码使用“code”类定义 HTML 段落的样式。 它设置这些段落的字体、字体大小、边框样式、边框宽度、填充、背景颜色、行高和边距。 此样式可以应用于 Blogger 帖子中的代码片段或预格式化文本,以赋予它们特定的外观。
其外观如下:
p.代码{
字体系列:Courier New;
字体大小:8pt;
边框样式:内嵌;
边框宽度:3px;
填充:5px;
背景颜色:#FFFFFF;
行高:100%;
保证金:10px;
}
编码愉快!