登录论坛
|
注册会员
设为首页
|
收藏本站
当前位置 :
首页
>
软件学院
>
程序开发
>
CSS
>正文
初学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是将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文件多半已经在缓存区(其它网页早已经引用过它),网页显示的速度就比较快。
课外练习:
将上面介绍的几种方法逐一实现,理解每种方法的原理,脑袋里面多问自己几个问题,想想每种方法各自有什么优缺点。
本新闻共
2
页,当前在第
2
页
1
2
【
收藏
】【
打印
】【
进入论坛
】
相关文章:
最新文章
中关村艳照门女主角详记录高清组图
大连护士门大尺度艳照高清组图
iPhone女孩微博爆红 最宝贵东西换iPhon
反恐精英之父内维尔:改变电脑游戏销售
团购网站黎明之前:中国市场惨烈厮杀不
团购鼻祖Groupon中国揭秘:快与慢的商业
Spil Games发布新的品牌形象
1800配置一台主机 不要显示器
联想V360笔记本模特写真
爱国者第四代移动硬盘将面市、低电压保
推荐文章
1
2
3
4
5
6
7
8
9
10
iPhone女孩微博爆红 最宝贵东西换
大连护士门大尺度艳照高清组图
中关村艳照门女主角详记录高清组
苹果员工中毒门
宫如敏不雅照疯传 看张馨予韩一菲
深耕市场 永续经营——专访百脑汇
优派专业电子书 让您回家旅途多姿
揭晓百万大奖三星bada魅力绽放中
大明龙权“江湖英雄会”全国PK大
永恒之塔校园达人挑战赛完美落幕
八卦图解
More>>
iPhone女孩微博爆红 最宝贵东西换
大连护士门大尺度艳照高清组图
中关村艳照门女主角详记录高清组
宫如敏不雅照疯传 看张馨予韩一菲