凛冬之翼---网页设计css字体

第一次一天之内发了两个博客,这篇文章主要是讲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>

实现效果:
网页效果

猜你喜欢

转载自blog.csdn.net/weixin_39042981/article/details/84030800