Dangbao's Blog - 重构资源

浏览器优先级实例之--!important

dangyifan@163.com(dangbao) — Mon,25 Jan 2010 14:54:46 +0800

看到这样的页面效果你是作何感想？我们的编辑为了防止长时间的盯着屏幕而造成对眼睛的伤害，毅然选择将Windows主题外观里的窗口设置为暗色调，以求更小的颜色刺激。可怜的小编们的眼中的网页变了颜色。没有设置背景颜色的body、div、input都成了这种暗色。哈哈，一旦被老板看到后，可怜的csser就要后悔没有给任何一个元素加上背景色了。不说闲话了，祭出重点，更改了系统默认主题后，一些编辑器会自动给textarea里内容加上这里是内容……，如果我们显示正文内容的页面刚好又不是白色的,我们无辜的页面就出现了文字带白色背景的现象。该怎么办呢？改编辑器，去除默认白背景？写JS代码，遍历所有FONT，删除STYLE？此刻我们想的是页面的行内style应该是最优先的。问了下群内神人，查了查资料，才发现另有优先级高的“大爷”呢！

Code
font{background:none!important}

哈哈，真是没想到，再温习下优先级的概念：

Code
叠重要性指数的次序依次为： 
标记为!important的用户样式 
标记为!important的作者样式 
作者样式 
用户样式 
浏览器/用户代理的默认样式

为了计算规则的优先级，每种类型的选择符都有一个相应的数值，由于每个选择器都由若干选择符组成，所以选择器的优先指数由选择符对应的数值相加而成，数值越高，优先级越高。CSS中的选择符有四类： 
行内样式为：1000 
ID选择符为：0100 
类选择符为：0010 
元素样式为：0001 

平常只顾着兼容浏览器的同志们，看来咱还真该回头认真的学习下理论知识咯！

PS:通过以上的应用，同理我们可以在一些时候限制用户随意更改字体大小而产生的行距不够美观的问题，一行font{font-size:16px!important}解决问题！

站在前端看静态网页

dangyifan@163.com(dangbao) — Wed,09 Dec 2009 16:29:23 +0800

之所以这么写，是一直想写一个能完全实施和实现自己想法的一个站或者是一套页面。当然这个实现起来对于我来说确实有一定的难度，也需要网站各个职能的人员去集思广议，而且也需要很大的精力去弄。我也只能是站在前端人员的角度谈谈，下面我具体来说说。
1.策划设计。
一个好的策划方案是一个完美网页的根基。这个就不多说了，就按一般网页可体现的内容和形式来吧。先抛开设计的水平和效果不谈，光以写静态的角度来分析。
首先网页的图片要达到个性和共性并存，尽量用少的图片达到整体网页效果变化和统一。呵，这话意思有点模糊，比方说标题条是一个背景，那么所有的标题条背景都可以用这个背景，而变化就可以在标题上做图片装饰变化。
然后是合理利用图片表现文字，大家都知道网页的字体太大就不圆滑了，而想实现圆润绚丽或突出的字必须用图片。以前我们遇到这样的情况就直接切下来图片嵌到页面里去。现在大部分同仁开始重视页面代码的质量，这种情况一般都是把图片用背景来显示，而页面代码里则是图片上的文字，然后做了隐藏，这样在网页上显示是没问题的。所以，网页上显示的字用图片还是字符显示，这是一个值得探讨的话题，这就好象冬天时候女人是要身材还是要温暖，男人是要风度还是温度一样。只能是根据实际情况和策划需求来定。
还有一点就是内容块的间距margin和填充padding。个人认为，在大部分的时候要使用统一的尺寸来定义，这样的好处一是有了统一感，二是省了一些CSS代码，三是修改和维护方便，改一处则全局适用。以上几点做为一个有制作经验的设计师肯定是会考虑到的，这里想引申的就是事先综合的考虑和有效的沟通，避免页面已经设计好又去修改的返工。
2.静态页制作。
这个可谈的就太多了，只能是把一些大的方面拿出来说说，毕竟真正去写一个页面的时候遇到的情况是不一样的。我还是说一点共性的东西。
图片的合理切片。切图的时候注意图片的优化，在质量和文件体积之间找到平衡点。合理使用css spirit。尤其是涉及到垂直和水平重复平铺图片的时候，更应该考虑各个小图的摆放位置及生成的图片大小体积。
标签的合理运用。什么时候该用H1、H2，什么时候该用div和span，都要在充分了解页面内容和标签意义下使用。同时我们也要考虑在页面裸奔（网页没有加载CSS）的情况下的显示情况。而这一切，都需要你有扎实的HTML功底。
结构-行为-表现的分离。虽然我们谈这个话题很久了，虽然我们已经在绝大部分时候已经做到这一点了，但是，我想要的是真正的分离。不要告诉我你页面里有onmouseover和onmouseout就是纯CSS制作。即使禁了JS，页面还是那个样子的页面。而这是我要努力和方向。目前来说，jQuery会帮很大的忙。

广大的WEB团队在开发过程总是会遇到这样那样的不统一和理解错误而造成工作效率低下，而绝大部分中小型团队因为自身水平和其它客观因素，不能制订一套自己的页面规范，只能靠相互的默契或牺牲时间去弥补，导致做出来的东西完全不是自己想的那样，而网站本身就是一个团队配合的事情，如果能够更好的更有效率的完成项目，这真是个课题。希望我们能够在工作和学习中开发出自己心中的完美网页。

以上的想法纯属是个人愚见，太理想化了，对则勉，错请责：）

css+xhtml页面构建的心得总结

dangyifan@163.com(dangbao) — Fri,04 Dec 2009 11:49:24 +0800

写了这么长时间的静态页面了，有必要来整理一下网页代码的书写心得，也许会对读者您有所帮助。我按照一般页面构成来说吧。
login:
头部一般会有登陆条。写用户名密码的地方，建议字和input分别用单独类的margin来控制。大家都知道文字和input在一起的时候用line-height并不会起什么效果。记得用户名和密码的文字用label标签。
logo:
这个可能有值得商榷的地方。有人喜欢把LOGO用H1来显示，有人喜欢背景显示LOGO而代码隐藏文字。具体对SEO的影响自己去体会吧，不妨都试试，不过LOGO上总要带链接的。
nav:
导行菜单一般都用LI来做，不过最好带上浮动float:left，而不仅仅是display:inline,这样控制起来可能更精确一点。至于象门户那样复杂的菜单就可以自由发挥，比如我之前写的一个菜单。.
search:
搜索的输入框和按纽用padding值来控制里面字的显示吧，用height和line-height的效果可能在各个浏览器里不尽相同。按纽如果都用系统默认的样式就别清除默认的border值，如果用图片就必须清除.line-height的值比height大点可能效果会好点，不过要溢出剪切哦。
banner:
这个其实没什么可说的，但是针对一行多个广告条，我还要补充一句，banner既可能是图片也可能是FLASH，写的时候套个DIV写个宽度和溢出剪切没坏处。
list:
列表是出现最多的。控制内容和边框的间距最好给ul用padding,并且加宽度和剪切。至于li就要用height和line-height来控制了,如果回行也要剪，保证标题内容代码的完整而又不破坏页面美观。前面加点那肯定是用背景图片来控制了，默认的项目符号真的不好用。
titleBar:
标题行一般就是单独居左出现，或者右面是more和tags。这个写法也是根据每个人习惯不同而有变化的。我最近试着标题用H3，more或tags用H4来写。以后关注一下效果如何。毕竟这样的话，在没有加载样式的情况下，某块内容的标题会突出显示。当然more和tags用span写也可以，这样看具体显示的内容而定了。
pictureWrap:
图文混排的表现形式比较多，语言描述也太麻烦就不说太多了。想说的就是图片配标题的时候，给标题加个class，定义一下宽高和行高，然后溢出剪切，这样标题太长也不会挤乱页面了。而且写动态程序的时候也不用去数截取多少个字了。毕竟，我们想留给读我们代码的爬虫一个完整的标题。
footer:
这个也没多少可说的，该怎么写就这么写，能用A标签的就不用li了。记得统计代码放在最后，而且最好给他一个dispaly:none的样式。

好了，就写这么多吧，虽然很多代码可能是需要重复敲打好多遍的，可是如何写出既让人又让机器读的舒服的代码，是我们需要逐步总结和研究的，而这更是我们努力的方向。

PS：以上纯粹是本人一个时期内的心得总结，如有不妥之处还请您不吝赐教，共同进步！

css控制打印网页

dangyifan@163.com(dangbao) — Fri,13 Nov 2009 10:38:10 +0800

这个话题想谈很长时间了，之前做一个栏目需要让用户打印页面标题和正文的，而正文之外的东西都不需要打印。这个时候就用到了控制打印的样式表了。

Code

正因为xhtml和css是分离的，所以我们可以在print.css里自由书写需要打印显示的内容和表现形式。那么这也要求我们在书写xhtml的时候更多考虑到打印显示效果的需求，良好的扩展标记和结构嵌套，使得我们轻松的使用display:none将内容设置为不显示。然后就是去书写print.css内容的时候了，你象设置word一样去写你想打印的页面吧。

需要注意的是，在打印样式表中，字体大小是以点(pt)来计的。

Dangbao的CSS共用代码

dangyifan@163.com(dangbao) — Thu,05 Nov 2009 13:59:50 +0800

写了这么长时间的CSS，总归有一部分共用样式是重复出现机率最高的，花时间总结了一下，方便自己，也方便要学习的同志们，希望对大家有用。

Code
@charset"utf-8";
div,form,input,select,img,ul,ol,li,dl,dt,dd,h1,h2,h3,h4,h5,h6{margin:0;padding:0;border:0;font-size:12px;}
body{font-family:"宋体", Verdana, Arial;margin:0;padding:0;background:#fff;font-size:12px;color:#333;}
li{list-style-type:none;}
/*link*/
a{color:#333;text-decoration:none;}
a:hover{color:#cc0000;text-decoration:underline;}
/*public*/
.left{float:left;}
.right{float:right;}
.clear{clear:both;height:0;overflow:hidden;display:block;}
.clearfix:after{clear:both;height:0;overflow:hidden;display:block;visibility:hidden;content:".";}
.mt{margin-top:6px;}
.blank{height:6px;display:block;overflow:hidden;}/*空白div*/
.all{color:#cc0000;padding-left:3px;}/*全文*/
.more{float:right;color:#cc0000;padding-right:10px;}/*标题右侧更多*/
.pic{padding:1px;border:1px solid #ccc;}

10大排行列表的OL默认项目符号

dangyifan@163.com(dangbao) — Wed,14 Oct 2009 11:37:02 +0800

昨天在写页面的时候碰到了一个排行榜的列表，从1排到10.我看设计是普通样子来显示的，就想起来用OL吧，也不经常用，正好试试。

Code
.topBar ol li{margin:0 0 0 8px;height:23px;line-height:23px;list-style-type:decimal;list-style-position:inside;display:list-item;}

写好以后看了一下还行，我又看了一下设计图，前面的项目符号是粗体的，那我就给ol加了个font-weight:bold,然后给ol li加了font-weight:normal,没想到居然不管用，哈，有点意思，看来项目符号是算在li内的。在群里朋友的提醒下，我改给li加粗体，然后给li a设置正常状态，HOHO，成功了。可唯一郁闷的是，项目符号10.的.居然和li里内容的第一个字紧贴着，很不舒服，于是只好再给li a加个padding-left值.IE下算是正常了。可是又放到非IE浏览器一看，项目符号的占用宽度好宽，真是没脾气。看来这种列表不用背景图片来做还真是不够精确啊。

谈页面重构的团队协作和后期维护

dangyifan@163.com(dangbao) — Wed,27 May 2009 10:17:56 +0800

为什么写这篇文章？因为我看到越来越多的公司重构职位要求注重这方面。一个公司的网站一旦成型以后，就很少去做大的调整和改版。剩下的就是缝缝补补、改改换换。恰恰是这些看似是小问题的问题，前端人员发愁了。在原有结构上替换某一处的内容还可以，但是一旦涉及到新需求必须改变原有页面结构的时候，矛盾出现了。原来的结构是深思熟虑、精心编排的，而如果确定需要改动的话，很可能影响甚至破坏页面其他区域。而且，这个时候的页面的静态动态已经成型，更改只能是页面和程序一起来协作进行，使得工作效率变的很低，测试也有点麻烦。改的时间也不一定是你刚写完就改，也许是放下好几个月后又来，又怕写的样式和别的地方冲突，又担心写的东西不兼容，结果可能是越改越乱，虽然页面表现上没什么问题，但是从代码上讲，已经打破了原来那么规整严谨的书写。对于一个专业的页面重构人员，这么情况实在是很难受啊。那么，如何尽量避免后期维护出现的不利因素呢？现在我就来谈谈我自己的感受：

1.初次重构页面需要考虑良好的兼容性、扩展性。
这点可能是最重要的，首页的各个元素必须有明确的标识规范，避免以后维护样式重复。各个容器相对独立，尽量少出现模糊定义（如.wrap div{}等）。规划足够公共属性（如.none{display:none}），必要时候方便调用。
2.提高手动书写代码能力。
这个不用多说，此技能必须提高，很多的时候就需要你记住属性的，忙的时候你大概也没时间去DW查某个属性怎么拼写。
3.丰富经验，有联想性，预先阻止出现的BUG。
经验丰富的CSSER更改起来总是能用最小的改动获得最佳的效果。就是要在不断更改中增加经验值。有联想性就是没法测试的时候，会联想页面可能出现的样子，有可能出现浏览器BUG的地方预先写好阻止情况出现的代码。这个有点抽象，经验越深，体会越明显，不能强求。
4.提高团队协作能力。
这个是针对整体的，个人带动整体。更改内容前互相沟通，找出最有效而且各个岗位修改顺手的更改方式。避免因为实现某一效果而导致一系列工作效率降低。
5.说服BOSS不改大的结构。
这点貌似有点困难，不过也不是没有可能的。毕竟要改动大的东西一般是首页，如果你能说服改动可能出现的问题，懂行的也许为了追求唯美可能放弃，当然也有可能BOSS觉得你能力不行，此招慎用！

系统自带网页字体分析和效果

dangyifan@163.com(dangbao) — Wed,08 Apr 2009 15:50:08 +0800

网页字体显示一直是中文的硬伤，默认的中文字体只有少的可怜的几种。而且字体太大了会有明显的锯齿，严重影响了网页整体效果。正式网页中我们能用的也就是宋体和黑体两种。而且黑体的使用一般也只用在标题或者导航中。所以一直以来，我们想要绚丽的中文字体，只能通过图片来表现。当然也可以用@font-face来显示我们需要的字体，但是对于网络及带宽来讲，字体的体积也太庞大了。如果连英文操作系统的中文显示效果也考虑到，那么我们还是乖乖的用默认的字体吧。定制字体语法：

Code
@font-face{font-family:Mistral;src:url(字体文件地址);}

既然中文字体很难做文章，那么就让我们来看看英文字体的变换吧。下面是本博整理的系统英文字体实际效果对比。

Html

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>系统自带常用网页字体效果</title>
<style>
body{background:#000}
p{width:500px;margin:10px 100px;font-size:16px;color:#aaa;background:#000;}
span{float:right;color:#fff;font-size:12px}
</style>
</head>

<body>
字体：效果：
Trebuchet MS1.Dangbao blog css+xhtml 2009
Lucida Sans Unicode2.Dangbao blog css+xhtml 2009
Geneva3.Dangbao blog css+xhtml 2009
sans-serif4.Dangbao blog css+xhtml 2009
cursive5.Dangbao blog css+xhtml 2009
Georgia6.Dangbao blog css+xhtml 2009
Courier New7.Dangbao blog css+xhtml 2009
Courier8.Dangbao blog css+xhtml 2009
monospace9.Dangbao blog css+xhtml 2009
Tahoma10.Dangbao blog css+xhtml 2009
Arial Black11.Dangbao blog css+xhtml 2009
Gadget12.Dangbao blog css+xhtml 2009
Palatino Linotype13.Dangbao blog css+xhtml 2009
Lucida Grande14.Dangbao blog css+xhtml 2009
Lucida Console15.Dangbao blog css+xhtml 2009
</body>

web标准推荐的字体定义方法：

Code
body { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; }

字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体，文档将被指定为Lucida Grande。没有的话，就被指定为Verdana字体，如果也没有Verdana，就指定为Lucida字体，依此类推。
Lucida Grande字体适合Mac OS X；
Verdana字体适合所有的Windows系统；
Lucida适合UNIX用户

CSS Sprites之宽度自适应菜单

dangyifan@163.com(dangbao) — Mon,16 Mar 2009 09:33:40 +0800

CSS Sprites的应用已经非常广泛，初衷是为了减少对服务器的请求数，将图片拼合在一张图上，不同Class通过不同的坐标值来显示需要的图片块。下面是某大型网站的Menu,图片设置宽一点，为分类名的宽度预留足够的宽度。然后我们的不管分类名多少，宽度始终是自适应的。li左浮动显示居左的图，Span左浮动显示居右的图，所有我们始终都会看到完整的背景左右边。当然，一般的分类名都不会很长，所有我们只要预留大约10个字左右的宽度足矣。点击查看CSS Sprites之宽度自适应菜单

JavaScript中的CSS属性及命名规范

dangyifan@163.com(dangbao) — Thu,12 Mar 2009 22:15:35 +0800

许多CSS样式属性的名字中都有连字符，在JavaScript中，连字符被解释为减号，因此，CSS2Properties对象的属性名和真正的CSS属性名有点不同。如果一个CSS属性名含有一个或多个连字符，在JS中则需要删除了连字符，并且原来紧接在连字符后的字母改为大写。要注意的是float是JS的关键字，所以在JS中float被写作cssFloat与或floatStyle。下面是CSS自身属性与JavaScript中CSS编码对照表:
盒子标签和属性对照:

Code
CSS语法 (不区分大小写) 　　JavaScript语法 (区分大小写) 
border 　　border 
border-bottom 　　borderBottom 
border-bottom-color 　　borderBottomColor 
border-bottom-style　　 borderBottomStyle 
border-bottom-width 　　borderBottomWidth 
border-color 　　borderColor 
border-left 　　borderLeft 
border-left-color 　　borderLeftColor 
border-left-style 　　borderLeftStyle 
border-left-width 　　borderLeftWidth 
border-right 　　borderRight 
border-right-color 　　borderRightColor 
border-right-style 　　borderRightStyle 
border-right-width 　　borderRightWidth 
border-style 　　borderStyle 
border-top 　　borderTop 
border-top-color 　　borderTopColor 
border-top-style 　　borderTopStyle 
border-top-width 　　borderTopWidth 
border-width 　　borderWidth 
clear 　　clear 
float　　 floatStyle(ie) cssFloat(FF)   /*important*/
margin 　　margin 
margin-bottom 　　marginBottom 
margin-left 　　marginLeft 
margin-right 　　marginRight 
margin-top 　　marginTop 
padding 　　padding 
padding-bottom 　　paddingBottom 
padding-left 　　paddingLeft 
padding-right 　　paddingRight 
padding-top　　 paddingTop

颜色和背景标签和属性对照:

Code
CSS语法 (不区分大小写) 　　JavaScript语法 (区分大小写) 
background 　　background 
background-attachment 　　backgroundAttachment 
background-color　　 backgroundColor 
background-image 　　backgroundImage 
background-position　　 backgroundPosition 
background-repeat 　　backgroundRepeat 
color 　　color  

样式标签和属性对照:

Code
CSS语法 (不区分大小写) 　　JavaScript语法 (区分大小写) 
display 　　display 
list-style-type　　 listStyleType 
list-style-image 　　listStyleImage 
list-style-position　　 listStylePosition 
list-style　　 listStyle 
white-space　　 whiteSpace  

文字样式标签和属性对照:

Code
CSS语法 (不区分大小写) 　　JavaScript语法 (区分大小写) 
font　　 font 
font-family　　 fontFamily 
font-size　　 fontSize 
font-style　　 fontStyle 
font-variant　　 fontVariant 
font-weight 　　fontWeight 

文本标签和属性对照:

Code
CSS语法 (不区分大小写) 　　JavaScript语法 (区分大小写) 
letter-spacing　　 letterSpacing 
line-break　　 lineBreak 
line-height　　 lineHeight 
text-align　　 textAlign 
text-decoration 　　textDecoration 
text-indent 　　textIndent 
text-justify　　 textJustify 
text-transform 　　textTransform 
vertical-align　　 verticalAlign