用于布局的字体和颜色标记
如果您熟悉 HTML 或 CSS，则可以随意修改模板的字体和颜色。不过，如果您想让模板使用"Blogger 布局"的"字体和颜色"功能，就需要遵循一些原则。这样，如果您稍后改变主意，可以更加轻松地修改颜色。这么做在您与他人共用模板，而他们想要稍微自定义其模板的情况下，也会很有帮助。
在代码的
<head>段，您需要一对<b:skin> </b:skin>标记。CSS 样式声明会插在这对标记之间，附带变量名称，使您的设计能够在"字体和颜色"页面中发挥作用。进一步讨论之前，请先查看下列简单的代码示例：
<head> ... <b:skin> <style type='text/css'> /* * Variable definitions: * <Variable name='bgcolor' description='Page Background Color' type='color' default='#fff'/> */ body { background: $bgcolor; margin: 0; padding: 40px 20px; } </style> </b:skin> </head>
CSS 代码的第一部分包含在
/*and*/注释标记中，使 CSS 代码仅供 Blogger 内部使用，而不会出现在您的博客上。这里会有一个变量列表，每个您希望能在"字体和颜色"标签中修改的字体或颜色都有一个变量。要让上述示例能够显示信息，每个变量都不可或缺，以下针对每个变量加以说明：
- name - 此名称只能包含字母或数字，而且模板中的每一个名称必须是独一无二的。
- description - 可以是较具描述性的名称，且包含空格。此变量会出现在"字体和颜色"标签中。
- type - 可以是"字体"或"颜色"。
- default - 默认值。对于颜色，此变量应是十六进制颜色代码，例如
#FF0066。对于字体，此变量会是font-style font-weight font-size font-family格式的列表。
设定变量后，代码的其它部分看起来就像常规 CSS，除了一项例外。无论何时，当您想使用已设定变量的颜色或字体时，需要输入
$variable_name，而不是实际的颜色或字体。在上述示例中，您可以看到我们创建了一个名为bgcolor的变量，并将其设置为白色 (#fff)。接着，在代码中，我们不会直接说将正文背景属性设置为白色，而是说background: $bgcolor。这样仍然能够使背景变成白色，不同之处在于，如果我们想要的话就能轻松地在"字体和颜色"标签中进行更改。
设计模板时，您需要为想要控制的所有字体和颜色添加许多变量。不过，您不需要为其他类型的 CSS 属性创建变量。这些变量将如往常般包含在 CSS 中（如同上述示例中的
margin:和padding:属性）。
0 评论:
发表评论