当前位置: 首页 > 图文教程 > 网页制作 > CSS样式表 > 学习Xhtml+CSS2的一些心得体会

CSS样式表
CSS 表单元素不继承body的字体属性
网页制作学习教程 CSS Position
网页设计学习教程 CSS盒模型
vertical-align 表单元素垂直对齐的解决方法
不用Cookie的仿刷新二级高亮菜单
CSS3 优势以及网页设计师如何使用CSS3技术
CSS 网页制作 提高CSS可阅读性
CSS 样式表中引用图片地址在各浏览器中的差异
CSS Sprite优化 减少HTTP链接数
网页制作中应用的50个CSS技巧(国外)
CSS 英文教程 CSS语法
CSS 网页文字渐变效果
纯css 圆角实现代码
CSS 新的图像替换方法
不必需的样式脚本文件导致页面不能及时更新
CSS 约定写法 利用扩展
最全的CSS浏览器兼容问题小结
CSS 网页图文混排的10个技巧
IE的CSS制作网页技巧3则
创造100% 自适应css布局的行之有效的方法

CSS样式表 中的 学习Xhtml+CSS2的一些心得体会


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

自从W3C搞了一个Xhtml1.0的标准之后,很多网站都开始用之将站点重构,像yahoo,163,CSDN等,近来一段时间Xhtml+CSS2的热潮更是一浪高过一浪,所以偶也开始学起了,慢慢的就爱上他们了,现在谈一谈最近一段时间来的学习体会。
为什么要学Xhtml+CSS2
首先,规范的代码能在各种浏览器中顺利显示。
一些不规范代码的网页在IE下能正常显示的,在Firefox和Opera上可能就无法正常显示。虽然现在浏览器的主流是IE以及以IE为内核的各种浏览器,但不排除Firefox以及Opera等浏览器等逐渐增大的用户群,而这些人群多是对计算机较为精通的老鸟,被他们骂自己网站太垃圾的话我想滋味应该不好受,呵呵。
当然这也不是说使用table等做的网页就不符合标准,只是当前不少人习惯用Forntpage或是Dreamweaver来做设计,这些可视化的软件固然方便,但由此带来的问题也是多多,这些软件多多少少会自动增减一些代码,如果没有查看代码的习惯的话,很容易致使产生一下不规范代码。
其次,DIV + CSS2使页面布局更加简单
说是Xhtml+CSS2,其实更多的时候是DIV+CSS2来构建网站。之前对页面进行布局或设置一下不错的效果的话,多采用大量的表格嵌套,通常对一个页面进行划分,多用单元格来描述区域,这样在WYSIWYG等软件中倒是比较直观,但这样影响的有几个方面,首先可能影响下载速度,其次对于手写代码来讲,这样的结构非常不直观,另外,牵扯到一个地方就是单元格的合并,假如你不小心搞错了一个colspan="?",那么整个页面的布局将面目全非。
而用CSS做布局,就像是在PS中对图层进行操作一样,因为CSS中有相对和绝对的概念,呵呵,这样对页面的布局就更加轻松和方便了。
另外,Xhtml可以减小文件体积
虽说现在网速越来越大了,但谁不想自己的站点速度更快呢,有人还曾经说“世上最远的距离不是地球到太阳,而是中国电信到中国网通”,如果你在电信服务器上的站点被网通线路的用户浏览,网页文件大小势必也会影响浏览者的感受。而采用Xhtml则利于你解决这个问题,呵呵。
鉴于以上几点,我开始逐渐习惯使用Xhtml+CSS2来构建网站。
学习中的心得体会
代码编写工具:由于现在还没有可视化的工具来编写Xhtml+CSS2页面,所以找到一个适合自己的代码书写工具是必须的,我一直在用Editplus,也像你推荐它,关于Editplus的一些使用技巧,可以看这里:
http://www.ifess.com/?p=23
页面布局结构:对一个页面首先要有一个整体的布局,比如,header,menu,sidebar,content,footer等,通过定义这些元素的CSS属性给页面一个整体的划分,之后在这些元素中再写具体的内容,这样就不会让页面看起来很乱。
CSS写法:一个项目中,定义内容属性和结构布局属性的属性值可以分开写,这样方便查找和修改。尽量减少重复定义,能继承的属性就不要再重复编写了。尽量使用兼容IE和Firefox的CSS属性值,因为有些属性写出来之后无法正常显示就等于做了无用功。
Xhtml文件:尽量采用外挂链接来调用CSS文件,对于只出现一次的CSS属性也可以采用文件内部书写的方式。书写代码时最好写注释,同时一定要注意对齐的格式,这样便于查错。
暂时想起来这么些,欢迎大家来一起讨论。
下面附一些常用的资源及链接:
CSS2.0中文手册,韩国商业网站设计分析,色标2004,JS手册:
http://www.im286.com/viewthread.php?tid=875287
Xhtml1.0校验页面:
http://validator.w3.org/checklink
CSS校验页面:
http://jigsaw.w3.org/css-validator/
CSS在线优化:
http://flumpcakes.co.uk/css/optimiser/

文章出处:http://www.ifess.com/?p=70 作者:落伍 Ipv6,转载请注明。