为了更好地理解样式表的作用，我们先看一个CSS的应用实例。在本例子中，你很容易对比出使用CSS前后两个网页的区别，当然了，现在你可能读不懂CSS部分的代码。别担心，这些代码将在少后的教程中介绍。
（本文来源于图老师网站，更多请访问http://m.tulaoshi.com/webkaifa/）我们首先来看一下未加入CSS的页面。网页里只有一段话：菜鸟吧的站长是大傻瓜！傻瓜爱吃大西瓜！。而且由于分别是标题1、2、3、4，页面内字体大小也不相同，还有标题的自动换行。
它的源代码如下：
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"html xmlns="http://www.w3.org/1999/xhtml"
head
title我真惨!被用来演示CSS!/title
meta http-equiv="Content-Type" content="text/html; charset=gb2312" /
!--这里将要插入CSS --
/head
body
h1a href="http://cainiao8.com/"菜鸟吧/a/h1
h2的站长/h2
h3是大傻瓜！傻瓜/h3!--我就要被修该啦，郁闷 --
h4爱吃大西瓜！/h4
/body
/html
下面我们简单的为它加上一点CSS，来让我不再傻按如下提示修改网页的代码：
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"html xmlns="http://www.w3.org/1999/xhtml"
head
title我真惨!被用来演示CSS!/title
meta http-equiv="Content-Type" content="text/html; charset=gb2312" /
style type="text/css"
!--
h1 {font-size: 12px;}
h2,h4 {font-size: 12px; display:inline;}
--
/style
/head
body
h1a href="http://cainiao8.com/"菜鸟吧/a/h1
h2的站长/h2
h3 style="display:none"是大傻瓜！傻瓜/h3
h4爱吃大西瓜！/h4
/body
/html
让我们来看看加入CSS之后的网页。你很容易看出两个网页的差别，页面内的文字大小统一了，而且只有标题1后面有一个换行，甚至有一部分文字被隐藏了起来。这都要归功于上面红色部分的代码。它们就是CSS，下面就让我们大概了解一下这些代码的意义。
（本文来源于图老师网站，更多请访问http://m.tulaoshi.com/webkaifa/）
