杂谈:编写网页样式CSS的一个小技巧

css|技巧|网页

很多朋友对我说,她/他有代码洁癖,即,让她/他写XHTML的话,从来不愿意加上额外的标签(tag)。举个简单的例子,相信很多人从很多地方都看到过的:

<div id="nav">
 <ul>
  <li></li>
  <li></li>
  ......
 </ul>
</div>

很多人,包括许多业界大牛,都建议你这样写即可:

<ul id="nav">
 <li></li>
 <li></li>
 ......
</ul>

  当然,我个人很欣赏第二种写法,没错,简洁明了,语义(semantic)确凿。但请等一等,如果需要样式化(stylish)它,哪一种可以提供更多的控制(controll)? 很明显,第一种。

  然后,这个问题就有点让人抓狂了。一句话:你是结构(markup)优先呢,还是表现(presentation)优先?我相信,在如今这个不美好的时代,表现优先是第一准则。很多有理想的人,包括我,最后为了实现表现上的需要,标签汤(tag soup)实际上难以避免。

  所以,这只能是个度的问题。别滥用。怎么不算滥用,也没有什么准则。我个人的准则是:如果要实现一个表现上的需要,你使用超过三层的外围标签(wrappers?),就应该停下来仔细想想了。尽管有点老,但我还是建议你看一看SimpleQuiz上面一些有趣的讨论。

  为什么会这样?因为一切都不完美。试想一下,如果CSS能够提供更多的规则来控制页面上的元素,或许就不会这么尴尬。比方说,background-image支持trlb(上右下左)四个方向不同的图片的话,我们就不必为处理圆角而绞尽脑汁;支持从页面上产生元素,如content的话,那么也可以大大减少tag的使用……

  XHTML?笑话。实际上目前为止没有多少人在用XHTML,一切都是自欺欺人。XHTML is Dead! XHTML是xml,具有xml的一切优越性,但是,我们现在看到的,都是text。如果把text当作xml来处理,这是有害的(Sending XHTML as text/html Considered Harmful)。

  尽管我们在Doctype上都标明了我们用的是XHTML,但是实际上我们都在用HTML。这是现实。要不那些错误百出的非良构的页面怎么可能在宽容的当代浏览器中显示呢……也难怪,XHTML 1只是HTML 4的改良而已。但是,未来的XHTML 2并不向后兼容,我不知道我们使用XHTML 1的必要性何在。另外,别拿accessibility来反驳我,分离结构与表现的HTML 4并没有跟XHTML 1有任何区别。

  因此,可能,使用XHTML 1的意义在于,宣称我们已经有了这样的思想,并且为未来的XHTML 2做好了准备。

  这也是我为什么,强烈建议使用HTML 4.01 Strict Doctype的原因。从公司/企业来说,要求整个团队都具有web standards的思想,并贯彻相关原则并非易事,各种上个世纪遗留的思想仍然负隅顽抗。如果真的使用XHTML 1,很多只能兼容html的JavaScript脚本会失效,编辑某个不经意的未转义的字符会导致整个页面出错(xml parsing error),等等。为了避免问题,或许,HTML 4.01 Strict Doctype是现在的最佳选择。

时间: 2024-08-29 10:41:53

杂谈:编写网页样式CSS的一个小技巧的相关文章

网页Flash播放代码的一个小技巧

flash播放|技巧|网页 网页Flash播放代码的一个小技巧 很多网页中都插有Flash播放代码,这不仅是为了页面元素的多样化,更是为了内容体现的需要.很多时候,我们会遇到这样的问题:根据需要使用Flash的script来读取不同的音频源或者视频源,那么如何实现这一功能呢?下面我们用改写<object>标签中的代码来实现. 一个典型的Flash播放器源代码中常常有这样的语句:<param name="movie" value="http://mydomin

网页样式CSS的选择符组合和嵌套的应用

css|网页 进阶学习网页样式CSS的选择符的组合和嵌套 组合 你不必重复有相同属性的多个选择符,你只要用英文逗号(,)隔开选择符就可以了.比如,你有如下的代码: h2 { color: red; } .thisOtherClass { color: red; } .yetAnotherClass { color: red; } 则你可以这样写: h2, .thisOtherClass, .yetAnotherClass { color: red; } 嵌套 CSS结构好的话,没有必要使用过多的

在网页上做出这样一个小程序,老鼠跟随鼠标移动的问题。

问题描述 在网页上做出这样一个小程序,老鼠跟随鼠标移动的问题. 就是一个小老鼠,它会跟着你的鼠标移动,左边有一个食物罐子,你单击,就会从中洒出一个圆点(食物), 当小老鼠靠近圆点时,它就会自动吃.右边是一个圆形的东西,你单击它,小老鼠就会 跑到里面,在其中不停地跑动,我需要具体怎么做.我是初学者,希望老师们能讲的详细一些.需要用什么语言,软件做..之类的,尽量详细一些,谢谢. 解决方案 直接上代码 <!DOCTYPE html> <html> <head> <sc

提高网页打开速度的一些小技巧

互联网带宽越来越宽,似乎让网页的加载速度得到了质的飞跃.其实不然,因为随着带宽的提高,网页上的对象也越来越多,因此加快网页打开速度还是一个重要的课题. 加快网页的打开速度,有三个路径,一是提高网络带宽,二是用户在本机做优化,三是网站设计者对网页做一定的优化.这篇文章站在一个网站设计者的角度,分享一些优化网页加载速度的小技巧. 一.优化图片 几乎没有哪个网页上是没有图片的.如果你经历过56K猫的年代,你一定不会很喜欢有大量图片的网站.因为加载那样一个网页会花费大量的时间. 即使在现在,网络带宽有了

解决网页右键不能用的小技巧

怎么解决网页右键不能用的小技巧:当你遇到喜欢的文章.图片,而希望复制下来时,右键却受到限制,此时,有如下方法可以破解,试一试管用. 第一种情况,出现版权信息类的破解方法如下: 在页面目标上按下鼠标右键,弹出限制窗口,这时不要松开右键,将鼠标指针移到窗口的"确定"按钮上,同时按下左键.现在松开鼠标左键,限制窗口被关闭了,再将鼠标移到目标上松开鼠标右键,弹出了鼠标右键菜单,限制取消了! 第二种情况,出现"添加到收藏夹"的破解方法如下: 在目标上点鼠标右键,出现添加到收藏

ASP编程的一个小技巧

编程|技巧 仅仅是一个方便编程的小技巧.该技巧可以让你在你的任何一个asp页面中都可以使用文件adovbs.inc中定义的常数变量,这样你写出来的程序更加易读和美观,注意,该方法只适应与IIS4.0以上版本.那就是在你的global.asa文件中加入这样一句代码即可.<!-- METADATA TYPE="typelib" UUID="00000200-0000-0010-8000-00AA006D2EA4" NAME="ADO Type Libra

一个小技巧,推广事半功倍

中介交易 http://www.aliyun.com/zixun/aggregation/6858.html">SEO诊断 淘宝客 云主机 技术大厅 网站推广是众多站长最为喜欢谈论的话题,也是网站成功与否的最关键的步骤!从苦力级别的论坛推广到白领级的软文推广,可以说为了推广网站站长们付出的努力是行外人不能理解的,也只有众多站长朋友们才了解推广人的心酸啊. 今天我来讲讲自己做推广的一个很小很小的技巧,别小看这个小技巧~我可以拍着胸脯保证只要你掌握了这个技巧的精髓,保证你的努力绝对事半功倍!

编写CSS时的小技巧

1.不要使用过小的图片做背景平铺.这就是为何很多人都不用 1px 的原因,这才知晓.宽高 1px 的图片平铺出一个宽高 200px 的区域,需要 200*200=40, 000 次,占用资源. 2.无边框.推荐的写法是 border:none;,哈哈,我一直在用这个. border:0; 只是定义边框宽度为零,但边框样式.颜色还是会被浏览器解析,占用资源. 3.慎用 * 通配符.所谓通配符,就是将 CSS 中的所有标签均初始化,不管用的不用的,过时的先进的,一视同仁,这样,大大的占用资源.要有选

入门:学习网页样式CSS选择符 、属性和值的应用

css|网页 HTML有标签,CSS有选择器.选择器是给内部和外部样式里面的样式命名. 每个选择器都有属性在{}里面,比如简单点像color,font-weight或background-color. 值在冒号(不是等号)后面,分号分离属性. body {    font-size: 0.8em;    color: navy;} 上面的意思是为body选择器设置font-size字体大小和color字体颜色. 所以基本的,当它作用与HTML页面时,在body标签(整个窗口中的内容)之间的文字颜