2007-05-30[原]关于"display:none"对SEO不友好的说法
TAG：SEO 原创 经验之谈对于"display:none"对SEO不友好的说法，在今天得到了一个事实的证明，看下下边的截图：
（可在google搜索“CSS森林">CSS森林”或“cssforest”找到以上内容）
画红线的部分是使用了"display:none"隐藏的内容，但google的搜索引擎是可以收录的，也就是说之前所说的"display:none"对SEO不友好的说法并不正确。:P
2007-05-15[原]CSS书写顺序
TAG：CSS 原创 经验之谈整理了一下自己写CSS时的顺序，跟大家分享下。
下表顺序为从上到下，从左到右：
============================
display || visibility
list-style : list-style-type || list-style-position || list-style-image
position
top || right || bottom || left
z-index
clear
float
width
max-width || min-width
height
max-height || min-height
overflow || clip
margin : margin-top || margin-right || margin-bottom || margin-left
padding : padding-top || padding-right || padding-bottom || padding-left
outline : outline-color || outline-style || outline-width
border
background : background-color || background-image || background-repeat || background-attachment || background-position
color
font : font-style || font-variant || font-weight || font-size || line-height || font-family
font : caption | icon | menu | message-box | small-caption | status-bar
text-overflow
text-align
text-indent
line-height
white-space
vertical-align
cursor
============================
2006-11-15[原]边框样式的写法总结
TAG：原创 CSS 经验之谈今天在群（CSS森林:30247792）里讨论了border的样式写法，发现border的写法还真是灵活，做了一下总结，希望对大家有用：
border : border-width || border-style || border-color
border是一个复合的属性，它可以同时定义上右下左四个边框，当四个边都是同个样式时可以使用，如：
=================CSS=================
border:1px solid #FF00FF。
=====================================
这是最简单的应用，如果四个边的样式不是相同的怎办？一般会有下面几种情况，写法差不多：
===============CSS===================
/*边框样式、宽度、颜色都不同*/
.div1{
border-top:1px solid #FF00FF;
border-right:2px solid #0000FF;
border-bottom:1px double #FF00FF;
border-left:1px solid #FF0000;
}
.div2{
border-width:1px 2px 1px 1px;
border-style:solid solid double solid;
border-color:#FF00FF #0000FF #FF00FF #FF0000;
}
/*边框样式不同*/
.div1{
border-top:1px solid #FF00FF;
border-right:1px solid #FF00FF;
border-bottom:1px double #FF00FF;
border-left:1px solid #FF00FF;
}
.div2{
border:1px #FF00FF;
border-style:solid solid double solid;
}
/*边框宽度不同*/
.div1{
border-top:1px solid #FF00FF;
border-right:2px solid #FF00FF;
border-bottom:1px solid #FF00FF;
border-left:1px solid #FF00FF;
}
.div2{
border-width:1px 2px 1px 1px;
border:solid #FF00FF;
}
/*边框颜色不同*/
.div1{
border-top:1px solid #FF00FF;
border-right:1px solid #0000FF;
border-bottom:1px solid #FF00FF;
border-left:1px solid #FF0000;
}
.div2{
border:1px solid;
border-color:#FF00FF #0000FF #FF00FF #FF0000;
}
=====================================
还有就是有些边框是没有的，比如只有底边：
================CSS==================
.div1{
/*错误的*/
border:none;
border-bottom:1px solids #FF00FF;
}
.div2{
border:1px #FF00FF;
border-style:none none solid;
}
=====================================
注意：
如果提供全部四个参数值，将按上－右－下－左的顺序作用于四边。
如果只提供一个，将用于全部的四条边。
如果提供两个，第一个用于上－下，第二个用于左－右。
如果提供三个，第一个用于上，第二个用于左－右，第三个用于下。
2006-09-12[原]8月工作总结
TAG：原创 WEB标准 经验之谈忙了一个月，终于也有点东东出来了，算是我较为满意的一个作品，不算最好，但足以见到自己的进步。这个月里也体会到一些蛮重要的东西，像样式的书写顺序、文件的结构、兼容性的问题等等。
这个月有蛮多东东可以跟大家分享的，不过因为时间太少，没能一个个的给出例子。就说说在写样式文件的时候要注意的地方吧：
一、编码问题
有些时候你可能会发现网页加了样式表文件后显示不正常，而且样式表文件也并没有错，这时就得找找编码的问题的，因为如果用UE等文本编辑器保存文件的时候，有时会不小心存成UTF-8编码的文件，而网页如果使用的是GB-3212编码，就会出现网页显示不正常的问题。
二、书写顺序
很多人不注意样式属性的书写顺序，想到什么写什么，虽然这个影响小到你查觉不到，但在带宽很小的时候，这个影响就会被放大了。因为样式表文件也是按文件的读取顺序去执行的，将属性分类并以一定的顺序书写，不但可以提高可读性，对于文件执行的优化是有帮助的。
当然这顺序不是你想怎么写就怎么写，也得有些依据才行。我们可以把属性分成两大类，布局属性和表现属性。很容易理解，布局属性就是用于布局的属性，表现属性就是用于显示效果方面的。先执行布局再执行表现属性，可以让页面先把布局显示完整。按《Mozilla建议的CSS书写顺序 》中所提到的“显示属性”、“自身属性”、“文本属性”的顺序，我觉得是很不错的，你会发现这个顺序是布局的属性在上方，表现的属性在下面。我是把“自身属性”中的“border”之上的部分分为布局属性，其它的分为表现属性。从大的角度上，你可以把布局属性和表现属性分开，为“换肤”提供方便。
三、兼容问题
这个问题也是最让人头大的问题，为不同的浏览器写hack，已经成为很多用CSS布局的页面仔常做的事，但很少会有人去想怎么做hack才是“正确”的，我并不是说做“hack”是正确的，能不用还是不能的好。还是推荐使用IE条件注解。这里有个技巧，虽然不是我发现的，但的确是很有用：在网页代码的第一行加上
<?xml version="1.0" encoding="UTF-8"?>
让IE7以下的IE版本使用旧的盒模型，先对FF、IE7和OP写样式，再对IE7以下的版本做hack，这个hack可以放在IE条件注解里：<!--[if lte IE 7]>样式文件<![endif]-->
<!--[if lt IE 7]>样式文件<![endif]-->
这样就只有IE7及以下的IE版本才会用到hack了。同时也是使用了正确的XHTML文件格式。
其它的一些目前还没有成功的、有效的实现，在这里就不多说了。
停了这么长的时间没有更新BLOG，但还能看到每天都会有固定的一些访问，真的很高兴，是你们的支持让我有动力去写BLOG，真的很感谢你们。(*~-~*)
2006-08-04[原]7月工作小结
TAG：CSS 原创 经验之谈终于也算是结束了一个项目，对我来说，这是我进TC后的第一个项目。没有什么新鲜感，写出的代码还是一样垃圾，一直自己提倡的东西自己却做不好，不过我相信，现在“丑”只是为了更快的看到进步。OK，牢骚发完，还是说点有用的吧。
一，宽度的问题。
auto 默认值。无特殊定位，根据HTML定位规则分配。 length 由浮点数字和单位标识符组成的长度值 | 百分数。百分数是基于父对象的宽度。
二，浮动的问题。
当该属性不等于 none 引起对象浮动时，对象将被视作块对象，即 display 属性等于 block 。也就是说，浮动对象的 display 属性将被忽略。
跟随浮动对象的对象将移动到浮动对象的位置。浮动对象会向左或向右移动直到遇到边框、内补丁、外补丁或者另一个块对象为止。 div 和 span 对象假如没有指定宽度会被分配默认的宽度，在IE5之前的浏览器版本中则必须指定宽度值才可以呈递此属性。
三，样式的重用问题。
样式的名称真是个头大的问题，太多了也不好维护，虽然可以使用包含选择符，但同时也会带来继承的问题。
一直都知道样式有继承的特点，可什么时候会继承，怎么继承就不得而知了，还好在《HTML与XHTML权威指南》里发现了这么一段“类继承了它们的一般基本标签的样式属性……”、“类无法继承其他类的属性，只能从它们代表的标签的未分类版本中继承。”也就是说类之间没有继承的关系，只有当它代表了某个标签后才会继承那个标签的样式。基本标签样式会继承它的“父元素”的样式。
四，边界的auto问题。
对于盒模型，只有宽与左右边界可以使用auto，表示让浏览器自动确定宽度。此外，如果宽和左右边界都定义了宽度，而且它们之和小于父元素的宽，会向左对齐；如果左右边界为auto，会居中；都为auto时会向左对齐。
以上只是把这段时间里想到的做了下总结，会在以后再分别展开讨论。
