第一次一天之内发了两个博客,这篇文章主要是讲css关于字体的一些基本知识。
遇到的问题:css相对来说是个软语言,所以很多时候我们的代码并没有成功的运行编译器也不会报错,所以在写网页的时候要经常检查是否有代码功能没有实现的情况。
代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
body{
background:#99CC99;
color:#333333;
margin:1em;
font-size:0.875em;
} /*设置背景和总字体样式*/
h1,h2,h3{
font-weight:normal; /*正常字体粗细*/
text-decoration:underline;/*下划线*/
letter-spacing:0.2em; /*增加字间距*/
margin-top:1em; /*上边界*/
margin-bottom:1em; /*下边界*/
}
h1{
font-family:Arial, Helvetica, sans-serif;
margin-top:0.5em;/*缩小上边界*/
}
h2{
padding-left:1em; /*左侧缩进1个字距*/
}
h3{
padding-left:3em; /*左侧缩进3个字距*/
}
p{
line-height:1.6em;/*行高1.6*/
text-indent:2em;/*首行缩进*/
margin:0;/*清除边界*/
padding-left:5em;/*右缩进*/
}
</style>
</head>
<body>
<div id="intro">
<div id="pageHeader">
<h1><span>CSS Zen Garden</span></h1>
<h2><span><acronym title="cascading style sheets">CSS</acronym>设计之美</span></h2>
</div>
<div id="quickSummary">
<p class="p1"><span>展示以<acronym
title="cascading style sheets">CSS</acronym>技术为基础,并提供超强的视觉冲击力。只要选择列表中任意一个样式表,就可以将它加载到本页面中,并呈现不同的设计效果。</span></p>
<p class="p2"><span>下载<a title="这个页面的HTML源代码不能够被改动。"
href="http://www.csszengarden.com/zengarden-sample.html">HTML文档</a> 和 <a
title="这个页面的CSS样式表文件,你可以更改它。"
href="http://www.csszengarden.com/zengarden-sample.css">CSS文件</a>。</span></p>
</div>
<div id="preamble">
<h3><span>启蒙之路</span></h3>
<p class="p1"><span>不同浏览器随意定义标签,导致无法相互兼容的<acronym
title="document object model">DOM</acronym>结构,或者提供缺乏标准支持的<acronym
title="cascading style sheets">CSS</acronym>等陋习随处可见,如今当使用这些不兼容的标签和样式时,设计之路会一路坎坷。</span></p>
<p class="p2"><span>现在,我们必须清除以前为了兼容不同浏览器而使用的一些过时的小技巧。感谢<acronym
title="world wide web consortium">W3C</acronym>、<acronym
title="web standards project">WASP</acronym>等标准组织,以及浏览器厂家和开发师们的不懈努力,我们终于能够进入Web设计的标准时代。</span></p>
<p class="p3"><span>CSS Zen
Garden(样式表禅意花园)邀请您发挥自己的想象力,构思一个专业级的网页。让我们用慧眼来审视,充满理想和激情去学习CSS这个不朽的技术,最终使自己能够达到技术和艺术合而为一的最高境界。</span></p>
</div>
</div>
</body>
</html>
实现效果: