CSS的网站建设培训用花式标题

使用的字体,边框,和图片来装点文章标题

标题是常见的大多数网页。事实上,任何文本文件往往都至少有一个标题,让你知道你在读什么称号 。但是,即使HTML有6个预先定义的标题标签


易雅达看到许多网页HTML看起来像这样:

<div id="headline" class="header">这是我的页面标题</div>

然后,他们把标题ID和头类的样式,以便它看起来完全一样,他们希望它看起来。一般来说,这种类型的代码背后的原因是因为:

“<h1> 大,大胆,和丑陋。”

  • 好了,当然,如果你没有风格它,它的大,大胆,和丑陋。但你的造型的div,但,即使看起来像一个标题时,它没有任何样式?


查看一个标准的标题和无样式的DIV标题。

为什么要使用标题标签

  • 标题标签一样的搜索引擎,这是使用标题,并以正确的顺序(如H1,H2,然后H3等)中使用它们的最好理由。
  • 搜索引擎提供最高加权内标题标签中包含的文本,该文本,因为有一个语义值。换句话说,你的页面标题H1标签,你告诉搜索引擎蜘蛛,这是#1页面的焦点 。H2标题#2强调,依此类推。


您不必记得你用什么类来定义您的头条新闻

  • 当你知道,您的所有网页将会有一个H1是大胆,2em和黄色,那么你可以在样式表中定义,一旦这样做。6个月后,当你加入另一个页面,您只需添加一个H1标签页面顶部,你不必返回到其他网页,找出您用来定义主要是什么风格的ID或类标题和分目。


他们提供了一个强大的页面纲要

  • 纲要使文本更易于阅读 。这就是为什么大多数美国学校教的学生写提纲,他们在写论文之前。当您使用大纲格式的标题标签,您的文字有一个清晰的结构,速度非常快,变得很明显。此外,有工具,可以查看页面纲要提供一个大纲,而这些依靠大纲结构标题标签。


您的网页将感,甚至与样式关闭

  • 不是每个人都可以查看或使用样式表(这回来到#1 -搜索引擎认为您的网页,而不是样式表的内容(文本) )。如果您使用的标题标签,你让你的网页更容易,因为标题提供的信息,一个DIV标记不会。


风格的文字和你的标题的字体

移 动从“大,大胆,和丑陋的”标题标签的问题,最简单的方法是样式的文本的方式,你要他们看看。事实上,当我在一个新的网站的工 作,www.yiyada.com通常写段,H1,H2和H3风格的第一件事情。通常只是字体系列和尺寸/重量与坚持。例如,这可能是一个初步的样式表为 一个新的站点:

body, html { margin: 0; padding: 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;
margin: 0;
padding: 0;
color: #e7ce00;
}


边框可以打扮文章标题

边框是一个伟大的方式来改善您的头条标题 。和边界很容易添加。但别忘了发挥的边界-你不需要在您的标题两侧的边界 。您可以使用更多的不仅仅是平淡乏味边界。

h1 {
font: bold italic 2em/1em "Times New Roman", "MS Serif", "New York", serif;
margin: 0;
padding: 0;
color: #e7ce00;
border-top: solid #e7ce00 medium;
border-bottom: dotted #e7ce00 thin;
width: 600px;
}


添加背景图片,你的标题更潇洒

许多Web站点的页面,其中包含一个标题的顶部有一个头部分 - 通常是网站的标题和图形。大多数设计者认为这是两个独立的元素,但你没有。如果图形是有装饰的标题,那么为什么不将它添加到标题样式?

h1 {

font: bold italic 3em/1em "Times New Roman", "MS Serif", "New York", serif;

background: #fff url("headline.jpg") repeat-x bottom;

padding: 0.5em 0 90px 0;

text-align: center;

margin: 0;

border-bottom: solid #e7ce00 0.25em;

color: #e7ce00;

}

这个标题的窍门是,我知道我的形象是90像素高 。所以我加了填充90px标题底部(填充:0.5 0 90px 0P)。你可以行高和填充文本的标题,以显示你想让它的确切位置。


在标题用图片更换

  • 这是另一种流行的技术网页设计师,因为它允许你创建一个图形的标题,并取代与该图像的标题标签的文本。就易雅达而言,我不觉得舒适与目前可用的图片替换技术,因为它们都具有可访问或搜索引擎优化的问题。我愿意等待,直到XHTML和CSS赶上这个需要。