电脑学习 Win8知识 黑云ROM 投稿

当前位置:首页 >> 站长天地 >> 网页制作 >> 内容

70位专家谈CSS设计

时间:2008-10-6 10:50:00 栏目:网页制作 点击: 来源:不详

 [网页制作]-本文简要:原文取自css-coding/'>smashing magazine 下面我对原文大致翻译一下, 以便大家阅读. CSS 并不总是很好对付. 这取决于你的技巧和经验. CSS编码有时会成为一场噩梦, 特别是当你还不知道文件中的元素应该适用哪些选项的时候. 一个减少代码复杂性的简易法门, 就是利用哪些...
D6电脑网 (d6pc.com): 70位专家谈CSS设计-网页制作

原文取自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. # */


  • 给 RSS-feeds附加样式. “用 XSL stylesheet (turn links into clickable links, etc)格式化, CSS让非技术人员更能接受. [Pete Freitag]
  1. <?xml version="1.0" ?>
  2. <?xml-stylesheet type="text/css" href="http://you.com/rss.css" ?>
  3. ...
  • 在老的浏览器中隐藏CSS . “最基本的办法就是利用@import 方法,解决隐藏问题."   [Roger Johansson]
  1. @import "main.css";
  • 在块级的元素定义中, 必须声明外间距和内间距Always declare margin and padding in block-level elements. [10 CSS Tips]
  • 要么设定宽度, 要么设定内间距和外间距 “我的一个重要原则是, 如果我设定了宽度,就不必要设定间距, 同理, 如果设定了间距, 就不必要设定宽度. 在盒状显示模块中, 特别你你用百分比处理的情况下, 我才用设定容器宽度, 里面的元素使用间距设定, 这样一切就会变得游刃有余. ” [Jonathan Snook]
  • 避免使用内间距/边框 和固定的宽度同时定义一个元素. “IE5 会让这样的定义出错, 一切变得一团糟. 为修订宽度的错误, 在父对象中设置内间距,取代子元素固定宽度的方法. [CSS Crib Sheet]
  • 提供打印样式.
  1. <link rel="stylesheet" type="text/css" href="print.css" media="print">
  2. or
  3. <style type=”text/css” media=”print”> @import url(print.css); </style>
  • This ensures that the CSS will only apply to printed output and not affect how the page looks on screen. With your new printed stylesheet you can ensure you have solid black text on a white background and remove extraneous features to maximise readability. More about CSS-based print-Layouts. [20 pro tips]

2.5. 技术窍门: IE 改进

  • 强制 IE 透明化处理 PNG图像. “理论上, PNG 文件支持不同的透明度; 但是. 一个Explorer 6 缺陷让这种方法很难跨浏览器使用” [CSS Tips, Outer-Court.com]
  1. #regular_logo
  2. {
  3. background:url('test.png'); width:150px; height:55px;
  4. }
  5. /* / */
  6. * html #regular_logo
  7. {
  8. background:none;
  9. float:left;
  10. width:150px;
  11. filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='test.png', sizingMethod='scale');
  12. }
  13. /* */
  1. #container
  2. {
  3. min-width: 600px;
  4. max-width: 1200px;
  5. width:expression(document.body.clientWidth < 600? "600px" : document.body.clientWidth > 1200? "1200px" : "auto");
  6. }
  • 在IE中使用条件说明 “在IE/WIN中,最安全的方式是使用条件说明 conditional comments. 这比使用修正点更有效. 利用这种方法, 可以让IE 使用自己的样式, ” [Roger Johansson]
  1. <!--[if IE]>
  2. <link rel="stylesheet" type="text/css" href="ie.css" />
  3. <![endif]-->

Workflow: 获得灵感

参考和推荐内容:




D6电脑网|电脑学习,电脑维修,电脑技术网;
设电脑学习,电脑入门,电脑技术,电脑教程,电脑维修,硬件知识,
网页设计建站,桌面壁纸,主题下载,WIN7下载,常用软件下载等栏目。感谢您的支持!
栏目:网页制作 作者:佚名 来源:不详
相关文章
  • 没有相关文章
共有评论 0相关评论
发表我的评论
  • 大名:
  • 内容:
本类推荐
  • 没有
本类固顶
  • 没有
网友推荐
链接申请
  • D6电脑网(www.d6pc.com) © 2020 版权所有 All Rights Reserved.
  • 本站为纯技术学习交流型网站,部分资源来源网络,仅供学习交流,版权归原作者,本站仅为转载,如有侵犯您的利益请联系我们删除.谢谢!
    关于D6电脑学习网 广告合作 419807867@QQ.COM 联系站长 网站地图| 粤ICP备09035016号
  • 摆脱浅薄和低俗的最好办法就是学习,我们加油!D6PC! V3.0