首页 > 开发 > CSS > 正文

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

2024-07-11 09:03:25
字体:
来源:转载
供稿:网友

武林网(www.vevb.com)文章简介:初学CSS的基础教程:在网页中使用CSS.

教程说明:

 

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

 

------------------------------------------------------分割线----------------------------------------------------------

 

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

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

-------------------------------------------------华丽的分割线------------------------------------------------------

第一个问题:CSS到底是什么东东,有何作用?

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

 

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

注:

 

 


 

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

 

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

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

 

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

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

 

 

 

 

内嵌样式

内部样式

外部样式

 

 

 

 

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

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

 

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

 

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

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

 

       如果很多网页需要用到同样的样式(回想我们以前在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文件多半已经在缓存区(其它网页早已经引用过它),网页显示的速度就比较快。

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

课外练习:

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

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表