是用CSS样式表还是HTML标签自身属性好呢
[问题点数：20分]
是用CSS样式表还是HTML标签自身属性好呢
[问题点数：20分]
不显示删除回复
显示所有回复
显示星级回复
显示得分回复
只显示楼主
相关帖子推荐：
2009年2月 PHP大版内专家分月排行榜第三
2009年2月 PHP大版内专家分月排行榜第三
2009年2月 PHP大版内专家分月排行榜第三
2009年2月 PHP大版内专家分月排行榜第三
本帖子已过去太久远了，不再提供回复功能。51CTO视频课程推荐：
8983人学习
22111人学习
9111人学习
查看:2284|回复：1
一.CSS应用技巧问答
问：CSS在网页制作中一般有三种方式的用法，那么具体在使用时该采用哪种用法？
　　答：当有多个网页要用到的CSS，采用外连CSS文件的方式，这样网页的代码大大减少，修改起来非常方便；只在单个网页中使用的CSS，采用文档头部方式；只有在一个网页一、两个地方才用到的CSS，采用行内插入方式。
问：CSS的三种用法在一个网页中可以混用吗？
　　答：三种用法可以混用，且不会造成混乱。这就是它为什么称之为“层叠样式表”的原因，浏览器在显示网页时是这样处理的：先检查有没有行内插入式CSS，有就执行，针对本句的其他CSS就不去管它了；其次检查头部方式的CSS，有就执行；在前两者都没有的情况下再检查外连文件方式的CSS。因此可看出，三种CSS的执行优先级是：行内插入式、头部方式、外连文件方式。
问：在Dreamweaver4中如何使外部文件式CSS？
　　答：在Dreamweaver4中使用外连文件式CSS并没有特殊要求，同样是用记事本创建一个*.css文件，在网页的〈head〉与〈/head〉之间加上一句这样的代码：〈link rel=&stylesheet& href=&在这里填上你的CSS文件地址（相对路径+文件名）&type=&
　　text/css&〉就行了。
问：如何用Dreamweaver 4快速创建CSS外连式文件？
　　答：对于一个初接触CSS的网页设计人员来讲，要用记事之类的编辑器去创建一个CSS外连式文件是相当困难的。由于Dreamweaver4对CSS支持的很好，用它来做就轻松多了。具体可以这样操作：
　　(1)先在纸上写好在网站的网页中可能要用到的名称，然后在Dreamweaver4的编辑窗中调出CSS面板，一个一个地定义，并在一个空白页上适当地写一点相关内容，边定义边试用，效果不满意，立即修改。
　　(2)全部定义好后，再用记事本创建一个空的CSS外连式文件，把在〈head〉与〈/head〉之间的那段定义好的CSS复制到CSS文件中去，就大功告成了。
　　整个过程就是点鼠标，方便吧！
问：在Dreamweaver 4中采用行内插入式CSS要手动写代码吗？
　　答：不用！先用CSS面板定义好要用的CSS，然后要插入CSS的标记插入：style=&&，再把你刚才定义的CSS从〈head〉后面拖到这个双引号中来，把花括号以外的部分删去就行了。
问：在方档头部方式和外连文件方式的CSS中都有“〈!--”和“--〉”，好象没什么用，不要可以吗？
　　答：这一对标记的作用是为了不引起低版本浏览器的错误。如果某个执行此页面的浏览器不支持CSS，它将忽略其中的内容。虽然现在使用不支持CSS浏览器的人已很少了，由于互联网上几乎什么可能都会发生，所以还是留着为妙。
问：怎样给一部分文字加背景色？
　　答：给文字加上不同颜色，在Dreamweaver 4中只要在属性面板上选取文字的颜色就行了，非常方便，但要给部分文字加不同的背景色却没有相应的功能，我们可以先做一个定义背景色的CSS（如：bgstyle），在Dreamweaver 4中点几下鼠就完成了。如一个定义淡黄色背景的CSS是这样的：
　　〈style type=&text/css&〉
　　.bgstyle
　　background: #FFFFCC
　　〈/style〉
　　在要用时选取那段文字，再在CSS面板上点一下“bgstyle”就行了。
问：怎样给部分文字加背景图像？
　　答：与加背景色操作类似，一个定义好的加背景图象的CSS例子的代码是这样的：
　　〈style type=&text/css&〉
　　.imgbgstyle
　　background-image: url(logo.gif)
　　〈/style〉
　　在要用时选取那段文字，再在CSS面板上点一下“imgbgstyle”就行了。
问：怎样使页面的背景在文字“滚动”时背景图案静止不动？
　　答：要使背景图案不随文字“滚动”的CSS是这样的：
　　〈style type=&text/css&〉
　　background: purple url(bg.jpg);
　　background-repeat:repeat-y;
　　background-attachment:
　　〈/style〉
问：如何定义字间距？
　　答：在Dreamweaver 4中CSS的属性定义对话框（Style Definition for .style1)的“Block”上的“letter spaceing”属性定义的就是字间距，它指的是每一个字符之间的额外间距，正负值均可，当取负值时产生字符挤在一起的效果。下面代码是一个定义好的字间距CSS例子：
　　〈style type=&text/css&〉
　　.style1
　　letter-spacing: 3px
　　〈/style〉
问：如何给文字加上划线、下划线、删除线和闪烁？
　　答：在Dreamweaver 4中CSS的属性定义对话框(Style Definition for .style1)的“Type”上的“decoration”属性定义的就是这些内容，要注意的是闪烁属性有些版本的浏览器不支持，少用为好。下面是一个定义好上述效果的CSS例子：
　　〈style type=&text/css&〉
　　.style1 { text-decoration: underline overline line-through blink}
　　〈/style〉
　　其中：“underline”是定义下划线；“overline ”是定义上划线；“ line-through”定义的是删除线；“blink”定义的是文字闪烁。
问：如何使网页具有“首行缩进”功能？
　　答：由于Dreamweaver 4输入空格不方便，利用“首行缩进”将弥补这个不足。在Dreamweaver 4中CSS的属性定义对话框（Style Definition for .style1）的“Block”上的”text-indent”属性定义的就是“首行缩进”，所谓“首行”是指每段内容的第一行，也就是直接按回车键就形成了一个新的段落。缩进最好以“em”（字符）为单位，比如：汉字编排要求每段开始缩进两个汉字，设置好的CSS如下所示：
　　〈style type=&text/css&〉
　　.style1 { text-indent: 2em}
　　〈/style〉
　　注意：在Dreamweaver 4中CSS的属性定义对话框（Style Definition for .style1）的“Block”上的“text-indent”右面的缩进单位选择框中“ems”指的就是“em”。
问：在用表格进行排版时，能使某一方向上的内容离开表格线一点吗？
　　答：可以！在Dreamweaver 4中CSS的属性定义对话框（Style Definition for .style1）的“Box”上的“margin”定义的就是内容离开边缘的距离，分别可定义四个方向：“top”、“bottom”、“left”、“right”。下面就是定义在左边离开“10px”的CSS例子代码：
　　〈style type=&text/css&〉
　　.style1 { margin: 0px 0px 0px 10px}
　　〈/style〉
问：能给某部分内容加边框吗？
　　答：用CSS可以给某部分内容加边框，在Dreamweaver 4中CSS的属性定义对话框（Style Definition for .style1）的“Border”定义的就是边框线，“top”、“bottom”、“left”、“right”四边可分别定义线的粗细和颜色，这些定义好后不要忘记在下面的“Style”中定义线型，否则将看不边框线，因为默认的线型是“none”。下面是一个定义了上边框为：蓝色细线，左边框为：绿色中粗线的CSS例子：
　　〈style type=&text/css&〉
　　.style1 { border: solid； border-width: thin 0px 0px medium； border-color: #0000FF black black #00FF00}
　　〈/style〉
二.HTML加速、再加速
Web开发人员是否必须掌握复杂的组件技术才能加快HTML页面的访问速度？答案是：不一定！实际上，有许多关于HTML与DHTML方面的技巧，它们原理简单而且上手容易。无论是技术高超的老手，还是初涉编程的菜鸟，领会这些都十分必要。
　　1.明显HTML，暗渡“公用脚本”
　　减少Web页面下载时间的关键就是设法减小文件大小。当多个页面共用一些成分内容时，就可以考虑将这些公用部分单独分离出来。比如：我们可以将多个HTML页面都用到的脚本程序编写成独立存在的.js文件，然后再在页面中按如下方式调用它：
　　&script_ src=&myfile.js&&&/script_&
　　这样，公用文件只需要下载一次，然后就进入缓冲区。等下次再次调用包含公用文件的HTML页面时，下载时间明显减少。
　　2.让样式表内容进入地下工作
　　CSS是HTML装扮器，一个漂亮的Web页面不可能没有它。HTML页面中有多种引用CSS的方法，不同的方法导致的效率也不一样。通常，我们可以将定义于&style&&/style&间的样式控制代码提取出来，保存到单独的.css文件中，然后在HTML页面中以&LINK&标记或者@import标记的方式进行引用：
　　&style&
　　@import url(&mysheet1.css&);
　　&/style&
　　请注意：
　　(1)css文件中无需包括&style&标记。
　　(2)@import和LINK标记要定义在HTML页面的HEAD部分。
　　3.宝贵内存节省两法
　　尽量减少HTML页面占用的内存空间是加快页面下载速度的一个有效方法。在这方面，有2个需要注意的问题：
　　(1)使用同一种脚本语言：
　　HTML页面离不开脚本程序的支持，我们经常会在页面中嵌入多种脚本语言，比如Javascript_与VBscript_。但是，这样的混合使用减慢了页面的访问速度。原因在于：要解释并运行多种脚本代码，就必须在内存中装载多种脚本引擎。所以，请尽量在页面中使用同一种脚本语言编写代码。
　　(2)巧用IFrame：
　　你使用过&IFRAME&标记吗？它可是一个非常美妙的功能。如果要在一个HTML文档中包含第2个页面的内容，通常的方法是使用&FRAMESET&标记。但是有了&IFRAME&，一切变得简单了。比如，开发一个文档预览页面，可以在左边放置一系列主题，在右边放置一个IFRAME，其中包含要预览的文档；当鼠标掠过左边的每一个主题链接时，就在右边建立一个新的IFRAME以预览文档。这样做，代码效率无疑是高效的，但同时导致了繁重的处理过程，最终是缓慢的速度。没关系，我们有办法：只使用单一的IFRAME。当鼠标指向一个新主题时，只需要修改IFRAME元素的SRC属性即可。这样，任何时间内只会有一个预览文档保留在内存。
4.择优选用动画定位属性
　　每天上网浏览页面，你一定会看到许多动画效果，比如一个可爱的小兔子在页面上来回地走动。实现这个效果的核心技术就是CCS定位。通常，我们是使用element.style.lef和element.style.top这两个属性来达到图形定位的目的。但是，这样做会产生一些问题：left属性返回一个字符串，并且其中包含了度量单位（比如100px）。因此，要设定新的位置坐标，就必须首先对这个字符串返回值进行处理，然后才能赋值，象下面一样：
　　dim stringLeft, intL
　　stringLeft = element.style.
　　intLeft = parseInt(stringLeft) ;
　　intLeft = intLeft + 10 ;
　　element.style.left = intL
　　你一定会感觉做这么点事情竟要编写这么复杂的代码，是否有更简洁的方法？当然有！请看这4个属性：posLeft、posTop、posWidth 和 posHeight，它们对应于相应字符串返回值的点数数值。好了，使用这些属性重新编写代码实现上面代码实现的功能，如：
　　element.style.posLeft += 10
　　代码短小、速度却更快！
　　5.循环控制多个动画
　　说到制作动画效果，当然离不开定时器的运用。通常的方法就是使用window.setTimeout来不断地定位页面上的元素。但是，如果页面上有多个动画要显示，是不是就要设定多个定时器呢？答案是No！原因很简单：定时器功能将消耗掉大量宝贵的系统资源。可是我们仍能在页面上控制多个动画，技巧就是使用一个循环。在循环中根据不同的变量值控制相应动画的位置，整个循环中只使用一个window.setTimeout()函数调用。
　　6.Visibility快于Display
　　让图片时隐时现会创造很有趣的效果，有2种方法可以实现这个目的：
　　(1)使用CSS的visibility属性或者display属性。对于绝对位置元素，diaplay和visibility具有同样的效果。
　　(2)两者的区别在于：设置为display:none的元素将不再占用文档流的空间，而设置为visibility:hidden的元素仍然保留原位置。
　　但是如果要处理绝对位置的元素，使用visibility会更快。
　　7.从小处着手
　　编写DHTML网页的一个重要提示是：从小处着手。初次编写DHTML页面时，一定不要试图在页面中使用你了解到的全部DHTML功能。每次可以只使用一个单一的新特征，并且仔细地观察由此产生的变化。如果发现性能有所下降，就可以快速地找到为什么。
　　8.脚本的DEFER化
　　DEFER是脚本程序强大功能中的一个“无名英雄”。你可能从没有使用过它，但是看完这里的介绍后，相信你就离不开它了。它告诉浏览器script_段包含了无需立即执行的代码，并且，与SRC属性联合使用还可以使这些脚本在后台被下载，前台的内容则正常显示给用户。
　　&script_ DEFER&
　　function UsedLater()
　　//用户与页面交互操作时才使用到的函数
　　&/script_&
&JAVA script_&
　　//立即要执行的脚本程序
　　document.write(&&H1&Immediate Gratification&H1&&);
　　&/script_&
　　最后请注意两点：
　　(1)不要在DEFER型的脚本程序段中调用document.write命令，因为document.write将产生直接输出效果。
　　(2)而且，不要在DEFER型脚本程序段中包括任何立即执行脚本，要使用的全局变量或者函数。
　　9.保持同一URL的大小写一致性
　　我们都知道UNIX服务器是大小写敏感的，但是你知道吗，Internet Explorer的缓冲区也是区别对待大小写字符串的。因此，作为web开发者，一定要记住保持相同链接的URL字符串在不同位置的大小写的一致性。否则，就会在浏览器的缓冲区中存放同一位置的不同文件备份，也增加了下载同一位置内容的请求次数。这些都无疑降低了web访问效率。所以请谨记：同一位置的URL，在不同页面中请保持URL字符串的大小写一致性。
　　10.让标记有始有终
　　自己编写或者查看他人的HTML代码时，我们一定都遇到过标记有头无尾的情况。比如：
　　&P&有头无尾标记举例
　　&LI&第一个
　　&LI&第二个
　　&LI&第三个
　　很明显，上面的代码中缺少三个&/LI&结束标记。但是这并不妨碍它的正确执行。在HTML中，这样的标记还有一些，例如FRAME、IMG和P。
　　请不要偷懒，请将结束标记写完整，因为这样做不仅使HTML代码格式更加规范，更可以加速页面的显示速度。这样Internet Explorer将不会花费时间判断和计算段落或者列表项目在哪里结束。
　　&P&有头有尾标记举例&/P&
　　&LI&第一个&/LI&
　　&LI&第二个&/LI&
　　&LI&第三个&/LI&
　　OK，以上列举了有关加速HTML页面的10个处理技巧，描述这些技巧很简单，但是只有真正领会并掌握其中的本质，并且举一反三，才会编写出更快、更好的程序。
三.用CSS实现鼠标单击特效
如果你能很好地应用CSS，那么你的主页将被打扮得很靓。下面就给大家介绍用CSS做出的一个鼠标单击特殊效果图。
一、将下面的代码复制到你的主页中&head&和&/head&之间。
&STYLE&.shadow {
　　FILTER: shadow(color=blue，direction=225)
　　.shadow1 {
　　FILTER: shadow(color=red，direction=225)
　　.shadow2 {
　　FILTER: shadow(color=green，direction=225)
　　.div {
　　CURSOR: FILTER: blur(add=ture，direction=135，strength=10); WIDTH: 800px
　　&/STYLE&
在这里应用的是blur滤镜。
　　2、在页面中插入一张图片，比如我插入是&img border=&0& src=&file:///F:/hbg/图象/校园/武测美景/广场夜景.jpg& width=&300& height=&210&&。在其前加入&TD id=flttgt style=&filter: light(enabled=1)，'width 300'& width=315&。
在刚才我们插入图片下一行中加入&TD style=&VERTICAL-ALIGN: top& width=314&&SPAN id=holder stylefont-size:14ptcolor:yellow?&。（把鼠标移到图片上，光源会跟踪鼠标。单击图片加入其他光源并且跟随鼠标移动。)
　　3、在设置了图片属性后，我们还要应用Javascript_脚本代码，也就是使图片跟随鼠标移动一些特效，代码如下。
　　&script_ language=Javascript_&
　　var g_numlights=0;
　　var blurbs= new Array(& 现在的动态滤镜赋予了网页更多的交互性能来响应用户的动作。&，& 我们使用了光源滤镜来响应用户的点击。点击图片可以增加光源。&，& 通过捕捉用户鼠标位置的方法来移动光源。&，& 不需要太多的编程。&);
　　window.onload=
　　document.onclick=
　　flttgt.onmousemove=
　　function setlights(){
　　flttgt.filters[0].clear();
　　flttgt.filters[0].addcone(0，0，5，100，100，225，225，0，60，15);
　　if (g_numlights&0){
　　flttgt.filters[0].addcone(400，170，5，100，100，225，0，0，160，15);
　　if (g_numlights&1){
　　flttgt.filters[0].addcone(320，330，5，100，100，0，225，225，60，15);
　　function keyhandler()
　　g_numlights=(g_numlights+=1)%4;
　　holder.innerHTML=blurbs[g_numlights];
　　setlights();
　　function mousehandler()
　　x=(window.event.x-80);
　　y=(window.event.y-80);
　　flttgt.filters[0].movelight(1，x，y，5，1);
　　if(g_numlights&0){
　　flttgt.filters[0].movelight(1，x，y，5，1);
　　if(g_numlights&1)
　　flttgt.filters[0].movelight(2，x，y，5，1);
　　&/script_&
四.CSS技术在网页设计中的运用
多层模式表单（Cascading Style Sheet, CSS）是一种为超文本置标语言(HyperText Markup Language, HTML)提供增强补充服务的技术，可对每一个HTML的置标(tag)做精雕细刻的修饰。只用HTML制作的网页，对页面内各部分的修饰能力有限且语句烦锁，CSS正是弥补这一缺陷的有力技术，它语句、文法简单，只要在源码中插入STYLE语句就可轻易实现页面内任意文本颜色、背景、边框、行距、字距的添删和修饰等功能，使网页更加生动活泼，从而获得满意的效果。
---- CSS在HTML中以STYLE标识出现，其格式为：一对代表CSS 技术的STYLE置标，内放被修饰的HTML置标，置标的CSS属性放于紧随其后的一对大括号内，每个属性赋值用&:&，多个属性之间用&;&隔开，例：
　　a{text-decoration: color:yellow}
　　a:hover{text-decoration: color:purple}
　　p{font-size:20; background: color:blue}
　　& /style &
---- 将如上代码插入任一HTML文档后，刷新显示，则所有锚点变为普通字体，颜色为黄，但当鼠标移至其上时，则锚点的提示字符变为带下划线的紫色字体；整个文档中被置标P包围的文字将以红底蓝字、字体大小为20个象素的形式出现。如果其中某段文字需另加修饰，可以单独的的形式出现，例如
& p style=&font-size:30; font-weight
　　: background:color:blue& &
　　................
　　& /p &
---- 则此段文字白底蓝字，30个象素大小，且字体加粗。随后是一个带有CSS技术的HTML文档的完整例子：
　　& head &
　　& title & 如何使用CSS & /title &
　　& /head &
　　& body &
　　& style &
　　a{text-decoration: background: color:yellow}
　　a:hover{text-decoration:line- background:lime}
　　h1{text-align: font-weight:900;
　　border-style: border-width: border-color:red}
　　p.first{font-size:15; font-face:楷体;
　　color: border-style:
　　border-width: border-color:blue}
　　p.second{font-size:20; word-spacing:10; background:aqua}
　　& /style &
　　& h1 & 带连框的题头1 & /h1 &
　　& a href=mailto:?subject=CSS &
　　鼠标移至此处, 背景变化
　　& /a &
　　& p & 未加CSS修饰的段落 & /p &
　　& p class=first & 指定CSS修饰的段落 & /p &
　　& p class=second & 指定另一种CSS修饰的段落 & /p &
　　& /body &
　　& /html &
---- 从上例的显示可以看出，CSS是HTML的一个补充，几乎可以对每一个HTML置标进行扩充，使网页充满活力，显示出更加完美的效果。
五.巧用样式表，让文本框与按钮变个样
在网页制作中，表单中的对象总是给人一种单调与沉闷的感觉，比如说按钮、文本框等，它们一成不变的模样与颜色出现在您的主页上时，或多或少都会破坏主页的美观程度，那么可不可以改变它们的模样呢？我的回答是，这当然可以啊，下面我们就一起来动手来改变吧。
　　先看看在网页中经常出现的按钮与文本框的本来面目吧！如下图：
对照上图，我们怎么样才能改变文本框与按钮的模样呢？那在下面我为大家提供两种文本框与按钮样式作为例子参考，第一种是文本框与按钮无立体感，只是有线条颜色与填充颜色的，这种效果大家可能在很多网站上都看见过，给人一种特别的感觉，很不错的，第二种效果就比较特殊了，是将文本框做成一种类似于下划线的效果并且是彩色的，同时按钮的背景色也不再是灰色，而是彩色的，可以说这是一种非常酷的效果，好了，下面我就来说说这两种效果实现的详细操作步骤吧。
第一种效果：无立体效果的文本框与按钮
　　那我们就通过在DW3中网页的编辑操作为例来进行说明，首先我们已经在网页中插入了相应的表单对象，比如插入一个文本框与一个按钮，此时，我们在按下[F10]键，显示出网页源代码编辑窗口，那我们在网页的〈head〉与〈/head〉标签之间插入这个样式表：
〈style type=&text/css&〉
input.smallInput{border:1FONT-SIZE: 9 FONT-STYLE: FONT-VARIANT: FONT-WEIGHT: HEIGHT: 18 LINE-HEIGHT: normal}
〈/style〉
好了第一步就完成了，下一步我们就分别在文本框与按钮的htm语句中加上这一句代码：
class=smallInput
比如在〈input type=&text& name=&textfield& class=smallInput〉与〈input type=&submit& name=&Submit& value=&平面按钮& class=smallInput〉这个文本框与按钮的htm语句中加入了这句代码。最后的效果如下图：
怎么样，比起前面那张图中的标准按钮来说是不是美观多了，要实现起来其实也不是太难吧。
第二种效果：带颜色的下划线式文本框与按钮效果
　　同样，我们也需要样式表的帮助来实现这个效果，和第一种效果的操作步骤一样在网页的〈head〉与〈/head〉标签之间插入样式表，
〈style type=&text/css&〉
input.smallInput{background:#border-bottom-color:#ff6633; border-bottom-width:1border-top-width:0border-left-width:0border-right-width:0 solid #ff6633; color: #000000; FONT-SIZE: 9 FONT-STYLE: FONT-VARIANT: FONT-WEIGHT: HEIGHT: 18 LINE-HEIGHT: normal}
input.buttonface{BACKGROUND: #ffcc00; border:1 solid #ff6633; COLOR: #ff0000; FONT-SIZE: 9 FONT-STYLE: FONT-VARIANT: FONT-WEIGHT: HEIGHT: 18 LINE-HEIGHT: normal}
〈/style〉
　　大家从上面的样式表中可以看出，这个效果的实现是通过两个样式来实现的，一个是文本框的，一个是按钮的，所以在文本框与按钮的htm语句中就需要插入两句不同的代码，在文本框中插入的是class=smallInput代码 如例子 〈input type=&text& name=&textfield& class=smallInput〉，在按钮语句中插入的是 class=&buttonface&代码如例子〈input type=&submit& name=&Submit& value=&彩色按钮& class=&buttonface&〉其实这就对应了样式表中文本框与按钮的样式，最后的效果如下图所示：
　　看看上面的效果，还会不会让您想起那单调的文本框与按钮呢？以上两种效果的方法都是通过样式表来实现的，使用方法也十分的简单，不要对我说这很难喔，最真心的希望能通过这篇文章介绍的方法能让你的主页多一点精彩。否则就对不起我这双为了研究它们而成的黑眼圈了。
初级工程师
感谢分享！！！《HTML+CSS网页设计与布局从入门到精通》扫描版[PDF]
下载地址：请先
或 ，再下载该资源
公司：上海育创网络科技有限公司
地址：上海浦东新区世纪大道1500号东方大厦1325室
电话：400-018-6216