css的使用

css代码都在 <b:skin><![CDATA[...]]</b:skin> 之间。如：

<b:skin>
 /*
  * Variable definitions:
  *  <Variable name='bgcolor' description='Page Background Color'
      type='color' default='#fff'/>
  */
 body {
   background: $bgcolor;
   margin: 0;
   padding: 40px 20px;
 }
</b:skin>

在 /* ... */ 之间的就是注释了。

CDATA

所有 XML 文档中的文本均会被解析器解析。**只有 CDATA 区段（CDATA section）中的文本会被解析器忽略。**所以在编写 Blogger template 时，建议 CSS 和 JavaScript 代码用 <![CDATA[...]] 包裹起来。

CSS 可设变量

变量时作用于 Blogger 主题背景设计器中，我们可以方便地调整模板地颜色和字体。变量的声明如下：

<Variable name="robotoNormal15" description="Roboto Normal 15"
	type="font"
    default="15px Roboto, sans-serif"
	hideEditor="true"
	value="15px Roboto, sans-serif"/>

name - 此名称可以包含字母或数字。模板中的每一个名称必须是独一无二的。
description - 添加说明以显示在“字体和颜色”部分。
type -“字体”或“颜色”。只有两种。
default - 默认值。对于颜色，此变量应是十六进制颜色代码，如 #FF0066。对于字体，此变量会是 font-style font-weight font-size font-family 格式的列表。
hideEditor 隐藏主题背景设计器的编辑器

设置好变量后，我们通过 $variable_name 来引用。

还可以用 <Group></Group> 创建一个组。

<Group description="Links">
  <Variable name="body.link.color" description="Link color"
      type="color"
      default="#2196f3"  value="#2196f3"/>
  <Variable name="body.link.visited.color" description="Visited link color"
      type="color"
      default="$(body.link.color)"  value="#2196f3"/>
  <Variable name="body.link.hover.color" description="Link Hover color"
      type="color"
      default="$(body.link.color)"  value="#2196f3"/>
</Group>