这段代码的CSS定义是：

 

 

div#subnav ul {  } 
div#subnav ul li.subnavitem {  } 
div#subnav ul li.subnavitem a.subnavitem {  } 
div#subnav ul li.subnavitemselected {  } 
div#subnav ul li.subnavitemselected a.subnavitemselected {  } 

　　你可以用下面的方法替代上面的代码

 

<ul id=subnav> 

•   Item 1  
  <li class=sel>  Item 1  
•   Item 1  
   
   
  
  　　样式定义是:
  
   
  
  　　#subnav {  }
  　　#subnav li {  }
  　　#subnav a {  }
  　　#subnav .sel {  }
  　　#subnav .sel a {  }
   
  
  　　用子选择器可以使你的代码和CSS更加简洁、更加容易阅读。
  
  　　十.不需要给背景图片路径加引号
  
  　　为了节省字节，我建议不要给背景图片路径加引号，因为引号不是必须的。例如:
  
  　　background:url(images
  　　margin:0 auto;
  　　}
  
   
  
  　　但是IE5/Win不能正确显示这个定义，我们采用一个非常有用的技巧来解决:用text-align属性。就象这样:
  
   
  
  　　body {
  　　text-align:center;
  　　}
  　　#wrap {
  　　width:760px; 
  　　margin:0 auto;
  　　text-align:left;
  　　}
   
  
  　　第一个body的text-align:center; 规则定义IE5/Win中body的所有元素居中(其他浏览器只是将文字居中) ，第二个text-align:left;是将#warp中的文字居左。
  
  　　十五.导入(Import)和隐藏CSS
  
  　　因为老版本浏览器不支持CSS，一个通常的做法是使用@import技巧来把CSS隐藏起来。例如:
  
  　　@import url(main.css);
  
  　　然而，这个方法对IE4不起作用，这让我很是头疼了一阵子。后来我用这样的写法:
  
  　　@import main.css;
  
  　　这样就可以在IE4中也隐藏CSS了，呵呵，还节省了5个字节呢。想了解@import语法的详细说明，可以看这里《centricle’s css filter chart》
  
  　　十六.针对IE的优化
  
  　　有些时候，你需要对IE浏览器的bug定义一些特别的规则，这里有太多的CSS技巧(hacks)，我只使用其中的两种方法，不管微软在即将发布的IE7 beta版里是否更好的支持CSS，这两种方法都是最安全的。
  
  　　1.注释的方法
  
  　　(a)在IE中隐藏一个CSS定义，你可以使用子选择器(child selector):
  
   
  
  　　html>body p {
  　　
  　　}
   
  
  　　(b)下面这个写法只有IE浏览器可以理解(对其他浏览器都隐藏)
  
   
  
  　　* html p {
  　　
  　　}
   
  
  　　(c)还有些时候，你希望IE/Win有效而IE/Mac隐藏，你可以使用反斜线技巧:
  
   
  
  　　
  　　* html p {
  　　declarations
  　　}
  　　
   
  
  　　2.条件注释(conditional comments)的方法
  
  　　另外一种方法，我认为比CSS　Hacks更加经得起考验就是采用微软的私有属性条件注释(conditional comments)。用这个方法你可以给IE单独定义一些样式，而不影响主样式表的定义。
  
  　　十七.调试技巧:层有多大?
  
  　　当调试CSS发生错误，你就要象排版工人，逐行分析CSS代码。我通常在出问题的层上定义一个背景颜色，这样就能很明显看到层占据多大空间。有些人建议用border，一般情况也是可以的，但问题是，有时候border 会增加元素的尺寸，border-top和boeder-bottom会破坏纵向margin的值，所以使用background更加安全些。
  
  　　另外一个经常出问题的属性是outline。outline看起来象boeder，但不会影响元素的尺寸或者位置。只有少数浏览器支持outline属性，我所知道的只有Safari、OmniWeb、和Opera。
  
  　　十八.CSS代码书写样式
  
  　　在写CSS代码的时候，对于缩进、断行、空格，每个人有每个人的书写习惯。在经过不断实践后，我决定采用下面这样的书写样式:
  
   
  
  　　selector1,
  　　selector2 {
  　　property:value;
  　　}
   
  
  　　当使用联合定义时，我通常将每个选择器单独写一行，这样方便在CSS文件中找到它们。在最后一个选择器和大括号{之间加一个空格，每个定义也单独写一行，分号直接在属性值后，不要加空格。
  
  　　我习惯在每个属性值后面都加分号，虽然规则上允许最后一个属性值后面可以不写分号，但是如果你要加新样式时容易忘记补上分号而产生错误，所以还是都加比较好。
  
  　　最后，关闭的大括号}单独写一行。
  
  　　空格和换行有助与阅读。

　　这是一篇很久以前的文章了，现在看来，其中的思想很值得大家学习，在52CSS.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到网页中尽量使用外部样式表

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

　　虽然一直建议大家不用Dreamweaver可视化编辑的方式进行CSS网页布局，但依然很多朋友在使用。建立您可以使用DW的代码编辑器进行CSS代码的编写。今天向大家介绍Dreamweaver CS3网页制作中的CSS布局规则 。
　　CSS文件的链接方式 
　　·附加链接：外部CSS文件
　　·导入CSS：常用应用多个CSS文件时，将多个CSS导入一个CSS文件中 
　　CSS规则定义有三种 
　　·类比如“.RedText”、“.BlueText”和“.BigText”等等 
　　·标签针对原有HTML标签做的重新CSS定义 
　　·高级伪类、定义了ID的元素，以及综合性定义
　　CSS规则的应用
　　·只有“类”样式才需要应用，class=”xxxx”。任何元素都可以应用类。 
　　·class与id的区别
　　·标签应用一般对于“body”标签一次性使用，对于诸如“li”、“td”等在页面中重复性比较大的标签不推荐定义。
　　·高级多运用，定义“#id li”比定义“li”要好得多。
　　CSS规则的执行顺序
　　·按照CSS代码的执行先后顺序
　　·如果有重复的规则，按照后执行的定义
　　·最终规则是多个定义规则的综合
　　重点：高级规则定义
　　·对于不同表格的文字样式定义。（不同表格使用不同ID、使用类样式定义）
　　·一页中的多种超级链接样式定义
　　·多个相同规则不同对象的CSS共同定义
　　·对于同一对象定义的多种CSS方式考虑哪种更科学（扩展性和代码精简性）
　　

　　CSS3 仍遥遥无期，还是指日可待，这不是一个技术问题，而是人们什么时候可以彻底放弃那些不符合 W3C标准的旧浏览器的问题。CSS3 备受期待是肯定的，CSS Tricks 网站做了一次投票调查，票选备受期待的 CSS 功能，一共有7000人参与，结果如下。有趣的是结果的前三名非常的接近。

　　#1) 圆角 (22.0%, 1,541 票)
　　这个功能已经在诸如 Mozilla, Webkit 等浏览器广泛使用，对 Web 设计者来说无疑是最受期待的，然而 IE 仍然没有要支持这个功能的迹象。

　　#2) 多背景(22.0%, 1,523 票)
　　这个功能是我最期待的，但向后兼容会是一个很大的问题。

　　#3) @font-face (21.0%, 1,424 票)
　　Firefox 的最新版本将支持该功能，Safari，Opera 甚至 IE 也将支持或已经支持该功能，我们会看到该功能的广泛应用，只是字体的版权问题会很麻烦。

　　#4) 动画与渐变(12.0%, 818 票)
　　Webkit 在这方面是领头军，动画也是设计的一部分，也该属于 CSS。这些会慢慢实现，当 Webkit 之外的浏览器也开始支持这个功能，我们会看到很多令人惊讶的效果。

　　#5) 渐变色 (8.0%, 535 票)
　　定义一个固定色背景很简单，但渐变色就没有那么简单了，渐变色很适合通过代码实现，Webkit 又在这方面抢了先。

　　#6) Box 阴影(4.0%, 271 票)
　　阴影也是一种渐变色，以往是通过背景图片实现的，如果考虑到多方向的阴影，事情会变得更复杂，Box 阴影机制让一切问题迎刃而解。

　　#7) RGBa - 加入透明色 (3.0%, 234 票)
　　RGBa 中的 a  代表透明色，透明对设计者来说非常重要，目前除了 IE，这一功能正在被广泛采用。

　　#8) 文字阴影(2.0%, 140 票)
　　也属于渐变色的概念，让文字拥有阴影，以前甚至无法通过图片背景实现，因此这将为设计者带来前所未有的方便。