下载首页 | 资讯中心 | 下载分类 | 最近更新 | 排 行 榜 | 国产软件 | 国外软件 | 汉化补丁 |
文章搜索: 分类 关键字 收藏本站设为首页
您的位置:首页网页设计CSS样式 → 提高网页的维护更新效率(CSS篇)
提高网页的维护更新效率(CSS篇)
日期:2007-6-20 9:33:43 人气:58     [ ]
上一页 [1] [2] 下一页
id="fontzoom">

提高网页的维护更新效率--/web/hc/Css/" target="_blank">样式表高效使用

随着互联网经济的不断发展,互联网上的专业网站、公众服务网站以及企业门户的数量都在飞速的增长,各网站的信息量也呈爆炸性增长的趋势。面对这些庞大的信息量,我们对网页中每一个栏目的增删,都会是一个很复杂的过程。为了提高网页的维护更新效率,我们可以使用/web/hc/Css/" target="_blank">样式表,来仅仅改变一个文件,就能达到同时改变几百个网页的外观,而其个性化的表现未受任何损失。为了能充分用好/web/hc/Css/" target="_blank">样式表的强大性和灵活性,笔者就怎样有效使用样式表,来谈谈自己的一些心得体会。

1、在一个网页中同时调用CSS的多种引入方式

  在HTML中引入CSS的方式很多,例如直接插入式,使用 链接外部样式表,使用CSS"@import"导入样式表以及在内部元素中使用"STYLE"标记来定义样式表等。有网友询问,这些引入方式能不能同时在一个网页中被调用,它们之间会不会产生混乱?其实,我们大可不必这么担心,这就是它为什么称之为“层叠样式表”的原因,浏览器在处理网页中的样式表是按照一定的顺序来处理的,首先检查页面中是否有直接插入式CSS,如果存在就先执行它,针对本句的其它CSS就不去管它了;接着检查网页源代码中的"STYLE"标记,有就执行了;接下来再依次检查执行"@import"导入的内部样式表和 链接的外部样式表。因此,我们完全可以在一个网页中同时调用CSS的多种引入方式。

2、快速创建CSS外连式文件

  对于一个初接触CSS的网页设计人员来讲,要用写字板之类的编辑器,去创建一个CSS外连式文件是相当困难的。由于Dreamweaver对CSS支持的很好,用它来帮助就轻松多了。具体可以这样操作:首先在纸上写好在网站的网页中可能要用到的格名称,然后在Dreamweaver的编辑窗中调出CSS面板,一个一个地定义,并在一个空白页上适当地写一点相关内容,边定义边试用,效果不满意,立即修改;全部定义好后,再用记事本创建一个空的CSS外连式文件,把在〈head〉与〈/head〉之间的那段定义好的CSS复制到CSS文件中去,就大功告成了。

3、让背景图案静止不动

  当网页不能在一屏全部显示时,我们往往借助于水平滚动条和竖直滚动条来浏览屏幕以外的内容,移动滚动条时一般图象和文字是一起移动的,那么我们有没有办法使背景图象不随文字一起“滚动”呢?利用CSS就可以实现这样的目的,我们只要把下面这段源代码直接放在网页的与标签之间就可以了,其中bg.jpg就是网页中的背景图象,大家可以把它换成自己需要的背景图象:

〈style type="text/css"〉

〈!--

BODY { background: purple url(bg.jpg);

    background-repeat:repeat-y;

    background-attachment:fixed  

    }

--〉

〈/style〉

4、让网页自动进行“首行缩进”

  用DreamWeaver来设计网页的用户知道,在DreamWeaver中输入空格不是那么的方便,我们可以利用css来设计“首行缩进”功能来弥补这个缺憾。打开DreamWeaver的设计界面,在该界面中找到CSS的属性定义对话框(Style Definition for .style1),在该对话框的“Block”标签下的“text-indent”属性定义设置项中来设置“首行缩进”功能,在这里要注意的是,所谓“首行”是指每段内容的第一行,也就是直接按回车键就形成了一个新的段落。缩进最好以“em”(字符)为单位,比如:汉字编排要求每段开始缩进两个汉字,设置好的CSS如下所示:

〈style type="text/css"〉

〈!--

.style1 { text-indent: 2em}

--〉

〈/style〉

5、巧用css来设定文字的背景

  在DreamWeaver中,如果我们需要给文字加上不同的背景颜色时,操作上很简单,只要用鼠标单击属性面板上的文字颜色按钮,从弹出的颜色设置栏中选择需要的颜色就可以了。但如果我们要给部分文字加不同的背景色,该怎么操作呢?由于DreamWeaver3中没有这方面的功能,但我们可以巧妙利用css来实现这样的目的。具体操作过程是,首先我们可以先做一个定义背景色的CSS,例如给这个css命名为bjstyle,接着在网页中选中需要设置颜色的文字,然后在工具栏中单击一下“bjstyle”就行了。下面就是一个定义颜色背景的CSS的源代码:

〈style type="text/css"〉

〈!--

.bjstyle { background: #cc00bb}

--〉

〈/style〉

6、给指定内容加边框

  在DreamWeaver中,我们可以利用CSS强大的定义功能来给某部分内容加边框,定义时首先打开DreamWeaver的设计界面,在该界面中找到CSS的属性定义对话框(Style Definition for .style1),该对话框的“Border”设置项就是用来定义指定内容边框线的,其中“top”、“bottom”、“left”、“right”设置栏是分别用来定义指定内容四周边框线的粗细和颜色的,这些设置项设置好后还需要在下面的“Style”中定义线型,否则我们将看不到定义的边框线,因为css默认的线型是“none”。下面是一个定义了上边框为:蓝色细线;左边框为:绿色中粗线的CSS源代码:

〈style type="text/css"〉

出处:本站原创 作者:佚名
 阅读排行
01.精美qq空间横幅代码
02.最酷qq个性女生网名
03.最新又有免费QQ秀啦《..
04.巧用透明FlaSh扮靓你的..
05.花之神匠代码(最新代码..
06.最新QQ空间免费导航
07.最新免费个人形象设置..
08.最新qq空间flash代码m..
09.CSS技术结合图像实现动..
10.Photoshop光影魔术师:..
11.QQ音速种子狂刷
12.最新QQ空间透明代码
13.PS实例教程:教你制作结..
14.Photoshop光影魔术师:..
15.制作背景图__教程
16.用Photoshop制作漂亮的..
17.如何获得QQ音速种子
18.≤QQ空间代码≥在日志..
19.网页浮动广告的制作代..
20.用Photoshop制作大红灯..
21.常用CSS
22.Photoshop给靓丽美女打..
 推荐文章
·Photoshop 表现技法之..
·快速将你的相片矢量化..
·PHOTOSHOP制作炽热的太..
·用Photoshop制作美丽的..
·流行杀手的娃娃工厂__..
·打造8号台球__教程
·PHOTOSHOP制作待机MM图..
·用Photoshop帮MM做纹身..
·PHOTOSHOP美眉着色绝招..
·PHOTOSHOP花露的制作_..
·PHOTOSHOP渐变工具的巧..
·PHOTOSHOP手绘奥兰多-..
·高难度抠图两种方法__..
·Photoshop高尔夫球的制..
·Photoshop打造精美玉佩..
Eqxia_COM下载站 版权所有 Copyright© 2001-2005 Www.eqxia.COM, All Rights Reserved.