初学CSS新手教程:在网页中使用CSS -东北IT网

初学CSS新手教程:在网页中使用CSS

http://www.dbit.cn　2009-12-5 11:12:31 　来源:东北IT网　编辑:叶子

本教程系个人抽工作之余所作，按照我个人的想法我是想将一些基本的东西以较为轻松的语言描述出来，做成一个系列教程（这需要时间，我会努力抽空更新的），争取让每一个看这个东东的人都能有所收获，但是因作者本人水平有限，不妥当之处敬请留言批评指正。

本教程假设您没有任何CSS样式表语言的基础，甚至，您可以完全不知道CSS是什么东东，但是，我们同样假设您已经掌握了基本的HTML/XHTML语法。比如，您肯定知道＜head>＜/head>是表明页面的头部，＜p>＜/p>是表示页面的一个段落。

1、正式开始学习之前的几句??嗦话：

CSS不是什么高深的东东，它的编写环境也很简单，你只需要在WINDOWS自带的记事本中编写，然后在浏览器中查看效果就可以了，不要认为你是在编程，实际上css唯一的作用是用来控制网页中各种对象的表现形式而已，so…你要有充足的信心相信你一定可以学好。

虽然CSS学习起来并不困难，但是它也讲究一个动手能力和实际操作经验。我认为所有讲究动手能力和实际操作经验的知识学习起来最好的方法就是动手去实践，所以，我们为什么不实际练习一下呢？记住一点：看100页书，不如动手写10行代码。

2、本小结您将学习的内容：

CSS到底是什么东东，它有何作用？

在网页中加入CSS的方法。

第一个问题：CSS到底是什么东东，有何作用？

在解决这个问题之前，我们先来看看网站中一个页面的基本组成：通常，一个页面（前台）由一下三个部分组成：结构，表现和行为。

请添加描述

注：

结构：通常指结构化的文本，通俗点理解就是经过结构化了的页面内容。用于结构化WEB标准技术有HTML、XHTML、XML等。

表现：指将页面中的元素用什么样的外观展示出来，比如文字的字体，字号，颜色，大小，是否有下划线，页面的背景颜色（图片），段落的对齐方式，元素在页面的摆放位置等等。通常用于表现的标准技术就是我们这个教程要讲的CSS（层叠样式表）技术。

行为：通俗理解为人（用户）与网页的交互，比如：我在页面的某个元素上单击一下鼠标，页面会给我什么反应——这就是一个简单的人与网页的交互，我们也可以大体理解为人与机器的交互，交流，沟通（这几个词可能不太准确，请原谅偶在汉语辞藻方面的贫乏）。目前主要表现行为的技术是各种所谓的脚本技术，比如：javascript（当前那是相当流行啊）。

有了上面的知识铺垫，我们知道了CSS是用来控制页面表现的，也就是说是用来控制网页最终展示出来的外观的。CSS的英文全称是Cascading Style Sheets，翻译过来就是层叠样式表。我们为什么要使用CSS呢？先来看看不使用CSS的网页页面代码：

CSS

从上面我们可以看出，用于控制内容表现形式的代码（红色部分）是和内容部分混杂在一起的，也就是说，二者互相混杂，不可分割。现在我们再来看看使用css后的代码：

CSS

注：上面的代码如果看不懂也没关系，后面我们会深入的讲解。

从上我们可以看出，使用CSS后可以将内容（红色部分）和表现（css部分）区分开来，只要你愿意，你甚至可以将CSS部分和HTML部分分别做成2个不同的文件，存放在不同的文件夹下。很显然，使用CSS将结构和表现分离后的代码维护方便，逻辑清晰，有条理，而且，我们甚至还可以把一个CSS文件应用给多个不同的HTML文件，来控制他们的外观，可以有效减小站点的体积。

上面我们简单介绍了CSS是什么和它能用来干什么的问题，那么我们如何才能在网页制作中使用CSS技术呢？

本新闻共2页,当前在第1页 1 2

【收藏】【打印】【进入论坛】