预览加载中,请您耐心等待几秒...
1/10
2/10
3/10
4/10
5/10
6/10
7/10
8/10
9/10
10/10

亲,该文档总共27页,到这已经超出免费预览范围,如果喜欢就直接下载吧~

如果您无法下载资料,请参考说明:

1、部分资料下载需要金币,请确保您的账户上有足够的金币

2、已购买过的文档,再次下载不重复扣费

3、资料包下载后请先用软件解压,在使用对应软件打开

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这个问题。 CSS是CascadingStyleSheets(层叠样式表)的缩写。它的作用是定义网页的外观(例如字体,颜色等等),它也可以和javascript等浏览器端脚本语言合作做出许多动态的效果。 同学习XHTML一样,在学习CSS的过程中您只需要使用Windows自带的记事本(Notepad.exe)就可以了。在实际制作网页的时候您可能需要用到FontPage、Dreamweaver等专业的网页设计软件,它们将使得为网页添加CSS的工作变得异常简单。但是再次强调,在学习CSS的过程中,您不需要这些强大的软件。本教程只使用visualstudio2008,目的在于练习手写CSS代码的能力,也是为了方便那些还没有Dreamweaver之类软件的读者。 2、样式表的基本语法 本节着重介绍样式表的基本语法,这是学好CSS的基础。 2.1插入样式表前后的网页。 为了更好地理解样式表的作用,我们先看一个CSS的应用实例。在本例子中,你很容易对比出使用CSS前后两个网页的区别,当然了,现在你可能读不懂CSS部分的代码。别担心,这些代码将在少后的教程中介绍。 我们首先来看一下未加入CSS的页面。网页里只有一段话:“菜鸟吧的站长是大傻瓜!傻瓜爱吃大西瓜!”。而且由于分别是标题1、2、3、4,页面内字体大小也不相同,还有标题的自动换行。 它的源代码如下: <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <htmlxmlns="http://www.w3.org/1999/xhtml"> <head> <title>我真惨!被用来演示CSS!</title> <metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/> <!--这里将要插入CSS--> </head> <body> <h1><ahref="http://cainiao8.com/">菜鸟吧</a></h1> <h2>的站长</h2> <h3>是大傻瓜!傻瓜</h3><!--我就要被修该啦,郁闷--> <h4>爱吃大西瓜!</h4> </body> </html> 下面我们简单的为它加上一点CSS,来让我不再傻……按如下提示修改网页的代码: <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <htmlxmlns="http://www.w3.org/1999/xhtml"> <head> <title>我真惨!被用来演示CSS!</title> <metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/> <styletype="text/css"> <!-- h1{font-size:12px;} h2,h4{font-size:12px;display:inline;} --> </style> </head> <body> <h1><ahref="http://cainiao8.com/">菜鸟吧</a></h1> <h2>的站长</h2> <h3style="display:none">是大傻瓜!傻瓜</h3> <h4>爱吃大西瓜!</h4> </body> </html> 让我们来看看HYPERLINK"http://www.cainiao8.com/web/css/index1.html"加入CSS之后的网页。你很容易看出两个网页的差别,页面内的文字大小统一了,而且只有标题1后面有一个换行,甚至有一部分文字被隐藏了起来。这都要归功于上面红色部分的代码。它们就是CSS,下面就让我们大概了解一下这些代码的意义。 2.2CSS语法简介 加在head