使用字体，边框和图像来装饰标题
标题在大多数网页上都很常见。 事实上，几乎任何文本文档都至少有一个标题，以便您知道您正在阅读的标题。 这些标题使用HTML标题元素编码 - h1，h2，h3，h4，h5和h6。
在某些网站上，您可能会发现标题不使用这些元素进行编码。 相反，标题可能会使用添加了特定类属性的段落，或具有类元素的分段。 我经常听说这种不正确的做法的原因是设计师“不喜欢标题的样子”。 默认情况下，标题以粗体显示，并且尺寸较大，特别是h1和h2元素，其显示的字体比页面文本的其余部分大得多。 请记住，这只是这些元素的默认外观！ 使用CSS，您可以制作标题外观，无论您想要什么！ 您可以更改字体大小，删除粗体等等。 标题是编写页面标题的正确方法。 这是一些原因。
为什么使用标题标签而不是DIV和样式
搜索引擎像标题标签
这是使用标题的最佳理由，并以正确的顺序使用它们（即h1，h2，h3等）。 搜索引擎对包含在标题标签内的文本赋予最高的权重，因为该文本具有语义值。 换句话说，通过标记你的页面标题H1，你告诉搜索引擎蜘蛛，这是页面的第一焦点。 H2标题有＃2重点，等等。
您不必记住您用来定义头条的类别
当你知道所有的网页都会有一个大胆的，2em和黄色的H1，那么你可以在样式表中定义一次，然后完成。 6个月后，当您添加另一个页面时，您只需在页面顶部添加一个H1标签，您就不必返回其他页面来查找用于定义主页的样式ID或类别标题和副标题。
它们提供了强大的页面大纲
大纲使文字更易于阅读。 这就是为什么大多数美国学校在写论文前教导学生撰写大纲的原因。 当您以大纲格式使用标题标签时，您的文本具有清晰的结构，并且非常快速地显现出来。 此外，还有一些工具可以查看页面大纲以提供摘要，这些依赖于大纲结构的标题标签。
即使样式已关闭，您的页面也能感觉到
不是每个人都可以查看或使用样式表（这回到＃1 - 搜索引擎查看页面的内容（文本），而不是样式表）。 如果您使用标题标签，则可以使页面更易于访问，因为标题提供的信息不适用DIV标签。
它对屏幕阅读器和网站可访问性很有帮助
正确使用标题会为文档创建逻辑结构。 这是屏幕阅读器将用于向视力障碍用户“阅读”网站的内容，使您的网站可供残疾人士使用。
设置标题的文本和字体
摆脱标题标签的“大胆，粗犷和丑陋”问题的最简单方法就是按照您希望的方式设计文本的样式。 实际上，当我在新网站上工作时，我通常首先编写段落h1，h2和h3样式。 我通常坚持只是字体家族和尺寸/重量。 例如，这可能是新网站的初步样式表（这些只是可以使用的一些示例样式）：
body，html {margin：0; 填充：0; } p {font：1em Arial，Geneva，Helvetica，sans-serif; } h1 {font：bold 2em“Times New Roman”，Times，serif; } h2 {font：bold 1.5em“Times New Roman”，Times，serif; } h3 {font：bold 1.2em Arial，Geneva，Helvetica，sans-serif; }您可以修改标题的字体或更改文字样式甚至文字颜色 。 所有这些都会将您的“丑陋”标题变成更具活力的东西，并与您的设计保持一致。
h1 {font：bold italic 2em / 1em“Times New Roman”，“MS Serif”，“New York”，serif; 保证金：0; 填充：0; 颜色：＃e7ce00; }边界可以打扮头条
边界是改善您的头条新闻的好方法。 边界很容易添加。 但不要忘记试用边界 - 你不需要在标题的每一边都有边框。 而且你可以使用的不仅仅是平淡无奇的边界。
h1 {font：bold italic 2em / 1em“Times New Roman”，“MS Serif”，“New York”，serif; 保证金：0; 填充：0; 颜色：＃e7ce00; border-top：solid＃e7ce00 medium; border-bottom：虚线＃e7ce00薄; 宽度：600px; }我在示例标题中添加了顶部和底部边框，以引入一些有趣的视觉样式。 您可以用任何想要达到所需设计风格的方式添加边框。
添加背景图片到您的头条新闻更多Pizazz
许多网站在页面顶部都有一个标题部分，其中包含标题 - 通常是网站标题和图形。 大多数设计师认为这是两个单独的元素，但您不必。 如果图片只是为了装饰标题，那么为什么不把它添加到标题样式？
h1 {font：bold italic 3em / 1em“Times New Roman”，“MS Serif”，“New York”，serif; 背景：#fff url（“fancyheadline.jpg”）repeat-x bottom; 填充：0.5em 0 90px 0; text-align：center; 保证金：0; border-bottom：solid＃e7ce00 0.25em; 颜色：＃e7ce00; }这个标题的诀窍是，我知道我的图像是90像素高。 所以我将填充添加到90px标题的底部（填充：0.5 0 90px 0p;）。 您可以使用边距，线条高度和填充来获得标题文本以准确显示您想要的位置。
使用图像时需要记住的一件事是，如果您有一个响应式网站 （您应该）使用基于屏幕尺寸和设备进行更改的布局，则标题的大小并不总是相同。 如果您需要将标题大小确定，可能会导致问题。 这是我为什么通常会在标题中避开背景图像的原因之一，它们有时候看起来很酷。
标题中的图像替换
这是网页设计师的另一个流行技术，因为它允许您创建图形标题并用该图像替换标题标签的文本。 这实际上是一个来自网页设计师的古老实践，他们只能使用很少的字体，并希望在他们的作品中使用更多奇特的字体。 Web字体的崛起真正改变了设计师如何处理网站。 现在头条可以设置成各种各样的字体和图像，并且不再需要嵌入的字体。 因此，您只能在旧版网站上找到替代旧标题的CSS图片，而这些网站尚未更新到更现代的做法。
Jennifer Krynin的原创文章。 在9/6/17由Jeremy Girard编辑