70位专家谈CSS设计

时间:2008-10-06 10:50:33  来源:第二电脑网上收集  作者:

  第二电脑网导读: 并不总是很好对付. 这取决于你的技巧和经验. CSS编码有时会成为一场噩梦, 特别是当你还不知道文件中的元素应该适用哪些选项的时候. 一个减少代码复杂性的简易法门, 就是利用哪些鲜为人知的CSS属性来创建适用性比较强的正确标注. 下面引用的70个专家技巧,附加了他们的相关文章地址.如果感兴趣你还可以阅读
  正文:

原文取自smashing magazine 下面我对原文大致翻译一下, 以便大家阅读.

CSS 并不总是很好对付. 这取决于你的技巧和经验. CSS编码有时会成为一场噩梦, 特别是当你还不知道文件中的元素应该适用哪些选项的时候. 一个减少代码复杂性的简易法门, 就是利用哪些鲜为人知的CSS属性来创建适用性比较强的正确标注.

下面引用的70个专家技巧,附加了他们的相关文章地址.


1.1. Workflow: 上路

  • 当你确定了设计思路, 请用一个空白页面展开设计. “包括页头 , 导航条, 内容样例 和页脚  之后添加HTML标记, CSS控制,这样会让事情简单清晰起来.” [CSSing]
  • 务必要重置CSS样式表 “你可能会经常删除哪些不必要的特殊设置, 而充分利用每个特性的缺省值. 而另一些人则倾向于做全局重置 Global white space reset , 就是在样式表的开头把所有要素的边据(margin)和空距(padding)全部归零. Eric Meyer’s Global Reset(全局重置), Christian Montoya’s initial CSS file(初始化CSS文件), Mike Rundle’s initial CSS file, Ping Mag’s initial CSS file. [Roger Johansson]
  • 使用主样式表master stylesheet. “一个常见的错误就是, 我看到很多初学者和中级玩家, 在使用样式表的时候, 由于不同的浏览器对一些样式有不同的缺省设置, 再没有统一化的情况下, 就会导致在不同浏览器中显示效果不一致. 而招致程序员抱怨调试困难. 其实, 你只要重置这些设置, 很多问题都可以得到避免. ” [Master Stylesheet: The Most Useful CSS Technique(主样式表: 最有用的CSS技术)], [Ryan Parr]
  1. master.css
  2. @import url("reset.css");
  3. @import url("global.css");
  4. @import url("flash.css");
  5. @import url("structure.css");
  1. <style type="text/css" media="Screen">
  2. /*/*/@import url("css/master.css");/**/
  3. </style>
  • 保持一个有用的CSS对象库. 这对调试很有用, 但应该避免出现在发布的版本中.  因为你可以同时使用多个类名称用来调试你的一个标记(i.e. <p class="floatLeft alignLeft width75">...</p>用了三个类名称来标记<p/>). [Richard K. Miller]
  1. CSS:
  2. .width100 { width: 100%; }
  3. .width75 { width: 75%; }
  4. .width50 { width: 50%; }
  5. .floatLeft { float: left; }
  6. .floatRight { float: right; }
  7. .alignLeft { text-align: left; }
  8. .alignRight { text-align: right; }

1.2. 组织化CSS编码

  • 使用主样式表组织化CSS “用主样式表组织化的样式非常有利于网站维护 . 在这个样式表中输入 reset.css, global.css, flash.css (如果需要) 和 structure.css 以及间歇使用的拓扑样式, 这里是一个如何使用这些技术的样例”
  1. h2 { }
  2. #snapshot_box h2 {
  3. padding: 0 0 6px 0;
  4. font: bold 14px/14px "Verdana", sans-serif; }
  5. #main_side h2 {
  6. color: #444;
  7. font: bold 14px/14px "Verdana", sans-serif; }
  8. .sidetagselection h2 {
  9. color: #fff;
  10. font: bold 14px/14px "Verdana", sans-serif; }
  1. /* -----------------------------------*/
  2. /* ---------->>> GLOBAL <<<-----------*/
  3. /* -----------------------------------*/
  • 用一个内容表来组织样式表. 在你的CSS文件头, 画一个内容表, 例如, 你可以勾画出CSS控制的不同区域, 用醒目的分割来划分他们.  [5 Steps to CSS Heaven(5步跨进CSS天国)]
  • 用字母次序表规划样式表. “我不知道怎么想到这个主意的, 反正用了几个月, 发现找到这些样式很容易.(译者注: 对于中文用户, 除非每个样式的名称很准确,并能被大家理解, 否则可用性会很差.)” [Christian Montoya]
  1. body {
  2. background:#fdfdfd;
  3. color:#333;
  4. font-size:1em;
  5. line-height:1.4;
  6. margin:0;
  7. padding:0;
  8. }
  • 把代码分成不同的块.. “很多人直觉上都会这么做, 只要变成习惯, 经年累月的实践, 这应该是最好的办法. 例如:: /* Structure */, /* Typography */ etc.” [CSS Tips and Tricks(CSS窍门和魔法)]
  • 钩子, 线, 和铅坠Hook, line, and sinker. 一旦你的CSS文档已经分成了不同的区块, 你就应该思考, 如何让这些小节点上的钩子结构化, 这将给你节省大量的时间, 并让文档更有说服力.” [Ryan Parr]
  • 把样式表分成不同的块. “我通常把自己的样式表分成三个块. 第一部分是元素直白定义, 变换文体, 页头风格, 重置表单的间距, 一些链接的风格, 等等. 接下来, 我会定义一些类, 例如提示框, 警告框,  等等, 我倾向于先定义主容器, 然后定义这个主容器中的元素, 这样扫一眼,就可以看到文档的规划结构, 对于哪些没有约束的容器, 我一般也要给他们一个名字." [Jonathan Snook]

1.3. Workflow: 控项编号, 类, 同类项, 属性 Handling IDs, Classes, Selectors, Properties

  • 让容器最小化. “结构化灌装文档. 新手会使用很多像表格一样的单元去构建一个文档. 而用结构化的要素构建文档才是最有效的. 要做到这点, 必须开始之前统盘考虑所有要素, 争取用通用的结构获得相同的效果, 而不是不断定义哪些小巧的DIV单元. ” [Ryan Parr]
  • 属性最小化. “善用CSS. 这个大原则可以派生很多小原则: 如果没有一个点来增加属性, 就不要增加, 如果你不确定该属性的用途, 就不要增加, 如果相同的属性被赋予很多地方, 争取在一个地方定义它.” [CSSing]
  • 同类项最小化. “避免不必要的同类项, 同类项越少, 问题就越容易处理.” [Jonathan Snook]
  • CSS 修复点(hack)最小化. “除非是公认的或文档化的缺陷, 尽量不要使用修复点. 我常常看到的情况是, 修复点本身变成了问题. 最好找到问题的根源, 从根本上解决或避免, 而不是滥用修复点.[10 Quick Tips for an easier CSS life(10个让CSS更简单的窍门)]
  • 使用CSS常量开发. “所谓常量 – 就是在很多地方使用的固定数值. 在CSS文档前面创建这些常量的说明, 颜色对照表, 利用替换的方式, 可以减少修订中的错误.” [Rachel Andrew]
  1. # /*
  2. # Dark grey (text): #333333
  3. # Dark Blue (headings, links) #000066
  4. # Mid Blue (header) #333399
  5. # Light blue (top navigation) #CCCCFF
  6. # Mid grey: #666666
  7. # */


"70位专家谈CSS设计"由第二电脑网原创提供,转载请注明:http://www.002pc.com/master/College/Page/css/2008-10-06/2065.html

 1/4    1 2 3 4 下一页 尾页


关键字:

关于《70位专家谈CSS设计》文章的评论

站内搜索: 高级搜索

热门搜索: Windows style 系统 tr IP QQ CPU 安装 function 注册 if td