《《css入门教程》word版》由会员上传分享，免费在线阅读，更多相关内容在应用文档-天天文库。

1、CSS入门教程1、CSS简介在了解了HTML或者XHTML之后，我们可以学习CSS。什么是CSS呢？让我们先来一点感性体验吧。看看这个没有添加CSS的HTML文件(http://www.csszengarden.com/zengarden-sample.html)，是一个普普通通的网页。然而通过给这个文件添加的CSS规则，我们可以得到十分美观的网页(http://www.csszengarden.com/?cssfile=/208/208.css&page=0)。我们不改动HTML，只是通过添加不同的CSS规则，我们就可以得到各种不同样式的网页。好了，下面我们再来回答什么是CSS这个

2、问题。CSS是CascadingStyleSheets（层叠样式表）的缩写。它的作用是定义网页的外观（例如字体，颜色等等），它也可以和javascript等浏览器端脚本语言合作做出许多动态的效果。同学习XHTML一样，在学习CSS的过程中您只需要使用Windows自带的记事本(Notepad.exe)就可以了。在实际制作网页的时候您可能需要用到FontPage、Dreamweaver等专业的网页设计软件，它们将使得为网页添加CSS的工作变得异常简单。但是再次强调，在学习CSS的过程中，您不需要这些强大的软件。本教程只使用visualstudio2008，目的在于练习手写CSS代码的能

3、力，也是为了方便那些还没有Dreamweaver之类软件的读者。2、样式表的基本语法本节着重介绍样式表的基本语法，这是学好CSS的基础。2.1插入样式表前后的网页。为了更好地理解样式表的作用，我们先看一个CSS的应用实例。在本例子中，你很容易对比出使用CSS前后两个网页的区别，当然了，现在你可能读不懂CSS部分的代码。别担心，这些代码将在少后的教程中介绍。我们首先来看一下未加入CSS的页面。网页里只有一段话：“菜鸟吧的站长是大傻瓜！傻瓜爱吃大西瓜！”。而且由于分别是标题1、2、3、4，页面内字体大小也不相同，还有标题的自动换行。它的源代码如下：

4、-//W3C//DTDXHTML1.0Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

菜鸟吧<

5、/h1>

的站长

是大傻瓜！傻瓜

爱吃大西瓜！

下面我们简单的为它加上一点CSS，来让我不再傻……按如下提示修改网页的代码：<

6、metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/>

菜鸟吧

的站长

是大傻瓜！傻瓜

爱吃大西瓜！

7、我们来看看加入CSS之后的网页。你很容易看出两个网页的差别，页面内的文字大小统一了，而且只有标题1后面有一个换行，甚至有一部分文字被隐藏了起来。这都要归功于上面红色部分的代码。它们就是CSS，下面就让我们大概了解一下这些代码的意义。2.2CSS语法简介加在head部分的和分别被浏览器识别为CSS的开始和结束。而注释标签则是避免不支持CSS的浏览器将CSS内容作为网页正文显示在页面上。