漂亮样式表在XHTML+CSS网页制作中的应用

所属分类: 网页制作 / HTML/Xhtml 阅读数: 977
收藏 0 赞 0 分享
这是一篇很久以前的文章了,现在看来,其中的思想很值得大家学习,在jb51.net学习案例的同时,不仿学习一些理论的知识,对您知识的突破会很有帮助。大家加油!

  自从看了Zeldman先生的力作“Designing with Web Standards”中文版为《网站重构》(第2版)一书,感受颇深,坚定了我用web标准的思想,去开发实践我们的项目。但是仅知道一些什么是web标准以及如何应用到实际项目中,还是远远不够的。必须对web标准中的每个组成部分,逐一学习应用,各个击破,方能发现它们的本质!对于像我这样的web开发设计人员,懂得这个道理,进行针对性的学习与实践,我相信我们一定会收获的更多,同时也算是为web标准在中国的应用做一点贡献!(呵呵,这个可能有些吹牛,但是的确是我们大多数软件从业人员的理想。)

  现在是web2.0乃至3.0的时代,是XHTML,XML,CSS,ECMAScript和DOM的时代。虽然它们不是最终的技术,但它们组合起来就成为一个解决方案——我们规划建立一个向后兼容的网站的基础,同时也是做符合web标准的网站的必要的技术基础。我们不仅要做到希望获得更多的用户支持与访问,更要建立长久的,漂亮的网站长时间吸引他们的注意力。我相信学会使用CSS来改善我们的网站,是吸引他们注意力的好办法,也是在web2.0时代中时髦的发展趋势。下面我仅就CSS技术谈一下我从中获得到的经验。

  想成为一名CSS专家,仅仅熟练使用CSS选择符(selectors)是远远不够的。还在于对工作的整体规划,工作流程的掌握以及提高样式表的可维护性和效率。用CSS可以创建出我们想要的美妙绝伦的网站,而写CSS本身就是一种享受。 那么我们应该如何创建更具吸引力的样式表?你的样式表应该具有哪些特性呢?通过学习并结合我自己的工作经验,总结出一套制作精美样式表的好方法。

  一、不要让CSS有过多的标记

  链接或者导入样式表听起来好像是一种无头绪的工作。我看过很多的网站开发都有着整洁的、组织严密的css文档,但是慢慢的,由于可能达不到在短期内快速更新,或者懒得再去管理,这使得先前创建的精致的样式表变成了垃圾。如果我们工作在需要发布上百条内容的庞大网站上面。因为时间有限,所以你需要通过嵌套或者排列css来进行快速修改或更新。随着时间的推移,这种习惯维持着,直到有一天你被告知这个网站要完全推翻重新设计(但是内容还是一样)而且你只有一周的时间去创建(包括测试)。一般来说,更新样式表还算是一个非常简单的方法,除非你长时间对网站零散的区域做修改,你就不能对网站样式表结构有一个整体的把握。

  链接或者导入你的样式表不是随意的事情。创建干净整洁的样式表并保持下去,工作就会更开心。注意:如果你试图在每次更新或者添加新内容的时候创建新的样式表,那你肯定是自找麻烦。过多的链接和导入样式表会使消除bug变得异常困难,让样式表很难维持。大一点的网站分别建立不同部分的样式表这是可以理解的。就是小心不要走极端。添加很多的样式表,会增加更多的http请求,可能还会影响到后面的工作。

  二、语义定义明确易懂

  除了选择最合适的,最有意义的元素来表述外,还要确定选择class 和id属性值。定义明确可以让维护变得简单,小组里的成员都会看懂。看这个定义:

  .l10k { color: #369; } ,.left-blue { color: #369; } ,如果是我做的我可能知道是啥意思,但是比人不一定就懂了。即使今天知道它的意思,但是能保证很多年后还知道它的意思吗? 最好不要在类属性里面去加入颜色或者长宽的尺寸。更恰当的命名规范:. work-description { color: #369; }

  三、知道什么时候添加有条件的注释和运用技巧

  很多文章写过一些关于问题解决的技巧,有条件的注释是控制IE发布的一个好方法。我同意有条件的注释比在你的css文档里乱写要好得多,但是最近我开始慢慢意识到,很多证据表明,这并不是最好的解决办法。想在一个元素中设置它的最低高度,但是IE6浏览器却不执行它,所以你知道自己能够使用的高度,也同样会被同样的处理。重新建一个样式表,然后把有条件的注释加入到你的标识中,你所有的需要都是要遵循这个规定?保持最低的高度和高度的规则在一起,选择一个小技巧在同样的css文档里,这样会更好吗?在这种情况下,我觉得用这种方法很难奏效。

  四、应用CSS到网页中尽量使用外部样式表

  好处吗?大家都比较清楚,当然有一点是不可否认的,可以最大限度的实现代码的重用及最优化配置网站文件。
  好了,以上就是我的一些个人见解,希望各位朋友们多给提意见,您的建议是我挑战困难的动力!谢谢!
更多精彩内容其他人还在看

Table相关整理及Javascript操作table,tr,td

很多人都有这种经历:当某个td中没有内容或者没有可见元素时,td的border也会消失。本文将给出解决方案,感兴趣的朋友可以了解下,或许本文对你有所帮助
收藏 0 赞 0 分享

td 内容自动换行 table表格td设置宽度后文字太多自动换行

table表格td设置宽度后文字太多导致自动换行,这是一个很常见的问题,或许很多的网友已经有了好的解决方法,如果依然有童鞋们不会的,可以参考下本文,可能会有意外的收获
收藏 0 赞 0 分享

html4和html5区别之如何在一个input上添加焦点实现代码

如何在一个input上添加焦点,有很多的实现方法,本文分别用html4和html5做了下演示,感兴趣的朋友可以参考下,或许本文对你有所帮助
收藏 0 赞 0 分享

纯css为select添加样式(无脚本)实现

改变select默认的样式,一般情路情况下通过ul,li来模拟来实现;Jquery插件也是这样,接下来介绍一种不写脚本,只用单纯的css来实现。在IE系列下,选中某个选项的时候会有背景色块,IE7-IE10都有此bug,感兴趣的朋友可以参考下啊
收藏 0 赞 0 分享

iframe的src赋值问题(服务器端)

frame的src赋值的问题,本文将进行详细探讨:服务器端的iframe重新src重新赋值,给iframe加一个ID,再加上runat=server,感兴趣的你可不要错过了哈
收藏 0 赞 0 分享

iframe的src设置为about:blank之后细节探讨

不设置为about:blank,内存不会释放掉。还必须用 iframe.document.write(''); 这样才能将内容清空,本文将详细探讨一下iframe的src设置为about:blank之后细节,感兴趣的你可不要错过了哈
收藏 0 赞 0 分享

无法定义IE6字体:13px大小无效,IE6自动显示更大的字体的解决方法

前些天调整网页一个模块的时候将页面字体的大小设置为13px大小了,由于当时用的是Chrome浏览器以及IE8,并没有发现原来font-size:13px在IE6下居然不听使唤总是自动显示为一个更大的大小,变现上又及其难看
收藏 0 赞 0 分享

为何html中嵌入mp4格式视频播放不了

只是在页面中加载了一个播放器的样子,各个按钮都不管用,不知道是哪个地方出了问题,很是郁闷,于是搜集整理下,拿出来和大家分享,希望可以帮助你们
收藏 0 赞 0 分享

如何把select下拉框的值传到id中实现代码

把select下拉框的值传到id中,是网友们比较在意的问题,本人搜索整理下,晒出来和大家分享
收藏 0 赞 0 分享

怎么把select下拉菜单里的文字设置成左右滚动效果

希望用marquee标签来设置字体滚动,代码是下面这样写的,但是没有效果,字体还是不会滚动,应该怎么来写,才会实现这个效果呢
收藏 0 赞 0 分享
查看更多