|
第二个问题:在网页制作中运用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是将style作为HTML标签的一个属性加入的,也就是说,它还是没有真正的把结构和表现分开,所以,这种方法用的比较少。下面我们来看第二种方法:
2、内部样式(Internal Style Sheet)
内部样式是写在网页的<head></head>标签对中的,内部样式只对当前运用该样式的网页有效,在网页中使用内部样式的基本语法如下:

注:上图绿色部分就是CSS代码,注意它是如何加入到页面中的,至于具体这些CSS代码如何书写,这个是我们后面要学习的内容,现在可以先不管它。下面我们来看第三种方法:
3、外部样式(External Style Sheet)
如果很多网页需要用到同样的样式(回想我们以前在DREAMWEAVER中学习的模板),用什么方法呢?我们可以将样式写在一个以.css为扩展名的文件中,然后在每个需要用到这些样式的网页中引用该文件就可以了,这种方法就是外部样式表方法。那么,我们如何才能在一个页面中引用事先准备好的样式表文件呢?通常我们有2种方法,一种称为“链接”,另一种称为“导入”,这里我们先介绍“链接”的方法,另一种在后面的学习中再去理会。在一个页面中“链接”一个样式表文件的语法格式如下:

注意:上图中的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文件多半已经在缓存区(其它网页早已经引用过它),网页显示的速度就比较快。
课外练习:
将上面介绍的几种方法逐一实现,理解每种方法的原理,脑袋里面多问自己几个问题,想想每种方法各自有什么优缺点。 |
|
【收藏】【打印】【进入论坛】 |
|
|
|
|
|
|
|