网站的外观至关重要，即使是细微的改进——例如使用与主题相配的字体或颜色——也能对消费者对您店铺可信度的评价产生积极影响。
根据斯坦福大学2003年对2,440人进行的一项研究，46.2%的在线购物者通过网站外观是否专业且美观来判断电子商务网站的信誉。事实上，无论对错，外观对购物者的吸引力甚至超过了宣传黑客或信用卡安全的安全横幅的存在。
在本期《网页设计技巧》中，作为 Practical Ecommerce 的一个 recurring feature（常规栏目），我将向您展示如何使用级联样式表（CSS）和 HTML 进行基本标题格式化的方方面面。本栏目面向几乎没有设计经验的 HTML 和 CSS 初学者。
标题
在HTML中，标题用于标识章节标题或介绍性内容；更具体地说，<h1>标签（元素）用于标识文档的一级标题，例如您店铺首页上的章节标题。<h1>标签内的内容应该是页面上最重要或最通用的章节标题。
就编写HTML而言，<h1>标签用于标题内容之前，而</h1>标签用于其之后，“/”表示关闭或结束。
<h1>Wooden Fruit Spoon</h1>
在基础 HTML 中，有几种方法可以使用短语元素为标题标签添加强调效果。
- <em>：表示强调，并将以斜体显示您的标题。
- <strong>：就像加了料的 <em>，表示强烈或粗体强调。此短语元素将使您的标题更加加粗。
木制水果勺 和 木制水果勺
虽然您可以使用许多其他短语元素，但<em>和<strong>被认为对电子商务网站最为有用，有关更多信息请参阅本文末尾参考资料部分中的短语元素。
其他标题标签包括<h2>到<h6>，随着数字增大，重要性级别降低，因此<h3>标签标识的章节标题比<h2>标签的重要性更低或层级更低；同样，<h2>标签标识的章节标题比上述<h1>元素的重要性更低或层级更低。
输入 CSS
“CSS 是一种向网页文档添加样式（例如字体、颜色、间距）的简单机制，”根据制定网站编码标准的万维网联盟（W3C）所述。
本质上，CSS 将内容与样式分离。HTML 文件保存内容并描述内容是什么，而 CSS 描述内容在页面上应如何呈现。CSS 是调整网页上标题标签的大小、字体、颜色或位置的最佳方式，因为它允许您为不同的上下文提供不同的样式。例如，当访客在线浏览您的网站时，您可能使用一个 CSS；而当同一批客户打印订单确认单时，您可能使用另一个 CSS。
CSS 选择器和基本代码
要在CSS中更改标题的外观，您可以直接针对该元素（即<h1>）并对页面上的每个该元素实例（例如每个<h1>）进行修改；您也可以针对类选择器或ID选择器，以样式化元素的子集或多个元素；或者针对上下文或后代选择器，根据某些元素与其他元素的关系来修改其样式。
元素选择器
如果我们希望网站上所有的<h1>标签都以红色显示，我们可能会编写如下代码：
h1 {color: red;}
或
h1 {color:#ff0000 ;}
在此示例中，“h1”选择页面中的每个<h1>标签或元素，花括号{ }内的内容描述样式，这里我们正在调整颜色属性，请注意我们在颜色属性后放置冒号，并在指示样式的代码后放置分号，最后，CSS识别多种颜色名称如red，或使用十六进制代码（#ff0000是红色的十六进制代码）来标识更广泛的颜色范围。
类和 ID 选择器
如果我们只想更改页面上的一些<h1>标签或元素，我们可以使用ID或类选择器，这些选择器由您作为页面作者定义，并提供极大的灵活性。
当您需要对多种元素进行相同的样式更改时，请使用类选择器，例如，如果我们希望我们的<h1>元素和<p>（段落）元素都使用Arial字体，我们可以使用类选择器来同时处理这两种元素，CSS可能如下所示：
.arial-font {font-family: Arial;}
在 HTML 中，我们可能会这样编写代码：
<div> <h1 class="arial-font">Wooden Fruit Spoon</h1> <p class="arial-font">Magnus es, domine, et laudabilis valde: magna virtus tua, et sapientiae tuae non est numerus. et laudare te vult homo, aliqua portio creaturae tuae, et homo circumferens mortalitem suam, circumferens testimonium peccati sui et testimonium, quia superbis resistis: et tamen laudare te vult homo, aliqua portio creaturae tuae.tu excitas, ut laudare te delectet, quia fecisti nos ad te et inquietum est cor nostrum. </p> <img src="add.png" /> </div> <div> <h1 >Another Wooden Fruit Spoon</h1> <p>Magnus es, domine, et laudabilis valde: magna virtus tua, et sapientiae tuae non est numerus. et laudare te vult homo, aliqua portio creaturae tuae, et homo circumferens mortalitem suam, circumferens testimonium peccati sui et testimonium, quia superbis resistis: et tamen laudare te vult homo, aliqua portio creaturae tuae.tu excitas, ut laudare te delectet, quia fecisti nos ad te et inquietum est cor nostrum. </p> <img src="add.png" /> </div>
如果你检查上面的代码，你会注意到有两个 <div> 元素。每个这些元素都有一个 <h1> 标签和一个 <p> 标签。在第一个 <div> 内部，我们识别出 <h1 class="arial-font">Wooden Fruit Spoon</h1> 和 <p class="arial-font">Magnus ...</p> 的类选择器。这些元素的内容将以 Arial 字体呈现。但第二个 <h1> 和 <p> 将使用页面或浏览器的默认字体呈现。
如果我们希望页面上的第一个 <h1> 标签与其他 <h1> 元素不同——例如白色字体和黑色背景——我们可能会使用 ID 选择器。在 CSS 中，ID 用 # 符号表示。
#special {color: #ffffff; background-color: #000000;}
我们会在 HTML 中以这种方式标识我们的“特殊” <h1> 标签：
<h1 id="special">Header Content</h1>
上下文或后代选择器
你也可以基于关系应用样式。例如，如果你希望位于 <div> 标签内的 <h1> 元素与未嵌套在 <div> 中的 <h1> 具有不同的样式，你可以使用上下文选择器。你的 CSS 可能看起来像这样：
h1 {font-variant: small-caps; color: #000000;} div h1 {font-variant: normal; color: #ff0000;}
注意代码中，我们首先为页面上所有 <h1> 元素引入一个适用于 h1 的样式。接下来，我们指示一个上下文选择器 div h1。此样式仅适用于嵌套在任何 <div> 标签内的 <h1> 标签。
标题列表的样式设置
使用 CSS，你可以通过属性控制标题的字体、颜色、大小、位置等。
标题的文本属性
- text-align：此属性描述某些内容（例如标题）相对于内容块的对齐方式。
- text-decoration：用于下划线、上划线或删除线装饰文本，此属性装饰文本元素。可接受的值包括上述的下划线、上划线和删除线，以及 none 和 inherit——这意味着某个元素（以 <h1> 为例）的属性取其父元素属性的相同计算值。
- text-shadow：很少使用，此属性允许你指定阴影偏移量、模糊半径和颜色。
- letter-spacing：此属性允许你指定字符之间的间距。
- word-spacing：类似于 letter 间距，但适用于整个单词。
- text-transform：用于调整大小写，你可以指定 capitalize, uppercase, lowercase, none, 或 inherit。
标题的字体属性
- font-family：此属性让你指定一个逗号分隔的字体列表。由于并非每个系统都拥有所有可能的字体，你可以优先安排你的字体。浏览器或用户代理将尝试渲染你列出的第一个字体。如果该字体不可用，浏览器将向下移动列表。
- font-style：调整排版，此属性定义字体是 normal（有时称为 Roman）、italic 或 oblique。
- font-variant：此属性会将小写字母转换为较小版本的大写字母字形。
- font-weight：顾名思义，该属性用于调整文本粗细。你可以选择 normal（正常）、bold（粗体）、bolder（更粗）、lighter（更细），以及 100、200、300、400、500、600、700、800、 或 900 。Normal 等于 400 ，Bold 等同于 700 ，Bolder 就像 900，而 lighter 等于 100。
- font-stretch：提供了一种统一的方式来调整某些文本中字符和单词之间的间距，您可以选择ultra-condensed、extra-condensed、condensed、semi-condensed、normal、semi-expanded、expanded、extra-expanded以及ultra-expanded。
- font-size：用于描述所选字体的字符大小，其值可以是绝对值（xx-small、x-small、small、medium、large、x-large和xx-large）、相对值（larger或smaller）、特定值（如15pt）或百分比。
- font：是一个简写属性，允许您一次性为多个字体属性设置值，例如，您可以以空格分隔的列表形式指定font-style、font-variant、font-weight和font-size。
标题通用属性
- color：用于描述文本的颜色。
- background-color：用于描述标题背后的彩色背景。
链接到 CSS
现在您已经对标题进行了样式设置，接下来需要在HTML文件和CSS文件之间建立链接，您可以通过在HTML的<link><head>部分放置一个标签来实现这一点，以下是代码的简化示例。
<head> <link rel="stylesheet" href="style.css" /> </head>
当然，<head>部分还会有其他代码行，因此在实际应用中它可能看起来像这样：
<head> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> <meta name="generator" content="Adobe GoLive" /> <meta name="description" content="Wooden Fruit Spoon for serving tasty fruit" /> <title>Fruit Spoon</title> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="thickbox.js"></script> <link rel="stylesheet" href="style2.css" /> <link rel="stylesheet" href="thickbox.css" type="text/css" media="screen" /> </head>
总结
在 网页设计技巧中，我讨论了 HTML 和 CSS 中的标题。我对标题标签、CSS 选择器以及适用于标题的一些 CSS 属性进行了简要描述。最后，我还包含了一个简短的视频以提供进一步的示例。
编辑注： 我们希望得到您的意见。是否有网页设计方面的挑战我们可以提供帮助？您是否在电子商务网站上看到过非常棒的设计想要模仿？请将您的想法发送给我们，我们将考虑将其作为 Web Design Tip 发布。
资源
- 万维网联盟的短语元素文档
- 万维网联盟 CSS 属性索引
- 万维网联盟文本属性
- 万维网联盟字体属性