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

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

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

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

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

•内嵌样式

•内部样式

•外部样式

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

1、内嵌样式(Inline Style)

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

看如下例子：

＜html>
＜head>＜title>内嵌式样式(Inline Style)＜/title>＜/head>
＜body>
＜P style="font-size:20pt; color:red">这个内嵌样式(Inline Style)定义段落
里面的文字是20pt字体，字体颜色是红色。＜/p>
＜P>这段文字没有使用内嵌样式。＜/p>
＜/body>
＜/html>

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

CSS

如上图，我们可以看到，这种方式使用CSS是将style作为HTML标签的一个属性加入的，也就是说，它还是没有真正的把结构和表现分开，所以，这种方法用的比较少。下面我们来看第二种方法：

2、内部样式(Internal Style Sheet)

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

CSS

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

3、外部样式(External Style Sheet)

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

CSS

注意：上图中的URL是指的被引用的CSS文件的URL，而且LINK语句还有别的属性，这里暂时先不加以说明，后面我们学习到的时候再详细讨论。

补充说明：被引用的CSS样式文件中应该只有基本的CSS语句，不要其他任何东东。例如我们要实现和第一个例子一样的效果，我们可以新建一个记事本文件，输入如下代码：p{font-size:20pt;color:red}然后将这个文件的扩展名改为"css"，这样就做好这个样式文件了。至于这条语句究竟是什么意思，相信聪明的你已经猜到了，对的，没错，它的意思是将所有的P标签（段落）中的文本外观变为字号：20PT，颜色：红色，当然了，如果实在不明白也没关系，后面我们会一一介绍。

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

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

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

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

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

课外练习：

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

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

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