当前位置: 首页 > 图文教程 > 网页制作 > HTML/XHTML教程 > 漂亮样式表在XHTML+CSS网页制作中的应用

HTML/XHTML教程
一些不太常用的XHTML标签用法以及实例
网页中图片的设置涉及的三个问题
商业HTML邮件的制作建议
HTML Marquee 字符片段滚动
DOCTYPE 文档类型声明(网页爱好者必看)
纯HTML标签你熟悉多少?
HTML元素的ID和Name属性的区别
HTML meta的大作用
HTML标签tbody的用法与说明
HTML 特殊字符转换表
HTML基础 HTML的组成结构
HTML基础之HTML内容细则
Shtml 精简教程
浅谈html table 标签
html Frame、Iframe、Frameset 的区别
HTML 网页页面切换的各种变换效果
HTML的10个表格相关标记
让IE8启动IE7兼容模式的代码
HTML 结构化实现方法
xhtml的块级标记小结

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


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-09-11   浏览: 51 ::
收藏到网摘: n/a

这是一篇很久以前的文章了,现在看来,其中的思想很值得大家学习,在ruanchen.com学习案例的同时,不仿学习一些理论的知识,对您知识的突破会很有帮助。大家加油!

  自从看了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到网页中尽量使用外部样式表

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