初学CSS的基础教程:在网页中使用CSS

【 tulaoshi.com - Web开发 】

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

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

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

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

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

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

l         在网页中加入的方法。

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

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

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

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

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

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

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

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

---------------------------------------------更加华丽的分割线--------------------------------------------------

第二个问题：在网页制作中运用技术的几种方法：

CSS按其类型可以分为3类：

•内嵌样式

•内部样式

•外部样式

这三类也分别代表了运用的种不同方法，首先来看第一种方法：

1、内嵌样式(Inline Style)

Inline Style是写在标签里面的，内嵌样式只对所在的标签有效。

html
headtitle内嵌式样式(Inline Style)/title/head

/body
/html

本例在浏览器中显示效果如下：

2、内部样式(Internal Style Sheet)

内部样式是写在网页的head/head标签对中的，内部样式只对当前运用该样式的网页有效，在网页中使用内部样式的基本语法如下：

　　注：上图绿色部分就是CSS代码，注意它是如何加入到页面中的，至于具体这些CSS代码如何书写，这个是我们后面要学习的内容，现在可以先不管它。下面我们来看第三种方法：

3、外部样式(External Style Sheet)

       如果很多网页需要用到同样的样式（回想我们以前在DREAMWEAVER中学习的模板），用什么方法呢？我们可以将样式写在一个以.css为扩展名的文件中，然后在每个需要用到这些样式的网页中引用该文件就可以了，这种方法就是外部样式表方法。那么，我们如何才能在一个页面中引用事先准备好的样式表文件呢？通常我们有2种方法，一种称为链接，另一种称为导入，这里我们先介绍链接的方法，另一种在后面的学习中再去理会。在一个页面中链接一个样式表文件的语法格式如下：

---------------------------------------------本小节最后一条分割线--------------------------------------------------

3种样式表使用方法对比：

    使用外部(Extenal)样式表，相对于内嵌(Inline)和内部式(Internal)的，有以下优点 ：

a.样式代码可以复用。一个外部CSS文件，可以被很多网页共用。

b.便于修改。如果要修改样式，只需要修改CSS文件，而不需要修改每个网页 。

c.提高网页显示的速度。如果样式写在网页里 ，会降低网页显示的速度，如果网页引用一个CSS文件，这个CSS文件多半已经在缓存区(其它网页早已经引用过它)，网页显示的速度就比较快。

---------------------------------------------SORRY，还有一条分割线，哇哈哈哈-------------------------------

课外练习：

将上面介绍的几种方法逐一实现，理解每种方法的原理，脑袋里面多问自己几个问题，想想每种方法各自有什么优缺点。