星箭SEO博客 » css

CSS+DIV重构与SEO

星箭 — Tue, 03 Apr 2007 12:20:58 +0000

采用CSS+DIV对网站重构日趋被大家重视起来了，尤其是大型站点，就在今天下午，IT168首页改版就选择了这种做法。其实，早些时候像阿里巴巴、163等大型门户站点就已经完成了重构工作。Robin早在去年就已经有了使用CSS+DIV来编写网页源码的习惯了，个人感觉这种方法确实比传统的TABLE形式的源码架构强多了。

很多SEO技术爱好者不是很明白CSS+DIV与TABLE相比到底有什么好处而来向我咨询，今天我来统一回答:)

根据我个人将近一年的网页编写经验，采用CSS+DIV进行网页重构相对与传统的TABLE网页布局而具有以下4个显著优势：

1：表现和内容相分离

将设计部分剥离出来放在一个独立样式文件中，HTML文件中只存放文本信息。

2：提高搜索引擎对网页的索引效率

用只包含结构化内容的HTML代替嵌套的标签，搜索引擎将更有效地搜索到你的网页内容，并可能给你一个较高的评价。

3：提高页面浏览速度

对于同一个页面视觉效果，采用CSS+DIV重构的页面容量要比TABLE编码的页面文件容量小得多，前者一般只有后者的1/2大小。

4：易于维护和改版

你只要简单的修改几个CSS文件就可以重新设计整个网站的页面。

从以上的描述来看，采用CSS+DIV对网站重构可以大大提升网站用户与搜索引擎的友好度。既然是这样，那为什么不从现在开始就学习并掌握CSS+DIV的网站重构方法呢？

作者：robin
转载请注明出处

CSS如何定义横向居中，以及阴影效果等

星箭 — Thu, 28 Dec 2006 15:13:49 +0000

使用DIV+CSS的时候最常见的就是这个问题，DIV+CSS如何横向居中呢？这个问题在使用table布局网页的时候是非常容易实现的，可是使用DIV+CSS的时候就会出现问题了。当然，前提是指你的布局包含在一个层中。就如同这样：
wrap {
　　width:760px; /* 修改为你的层的宽度 */
　　margin:0 auto;
　　}[/code]
但是IE5是不支持这个定义的。解决的办法可以是这样：
[code]body {
　　text-align:center;
　　}
　　#wrap {
　　width:760px; /* 修改为你的层的宽度 */
　　margin:0 auto;
　　text-align:left;
　　}
第一个body的text-align:center; 是规则定义IE5/Win中body的所有元素居中，而其他的浏览器只是代表文字居中，然后再用第二个text-align:left;将#warp中的文字居左。

再附上IE滚动条的CSS代码：

或者把颜色改成16进制的SCROLLBAR-BASE-COLOR: #808080之类也可以。

下面是CSS的文字阴影效果。CSS中有两种阴影效果,一种是DropShadow(投影),另一种是Shadow(阴影).
1、DropShadow
语法：{FILTER:DropShadow(Color=color,OffX=offX,OffY=offY,Positive=positive)}
Color 代表投影的颜色，格式为“#RRGGBB”
OffX 和 OffY 代表x和y方向的投影偏移量。必须用整数值，正数代表x轴的右方向和y轴的下方向。负值相反。
Positive 参数是一个布尔值。值为true(非0),那么就为任何的非透明像素建立可见的投影。如果值为false(0)，那么就为透明的像素部分建立可见的投影。
2、Shadow
语法：
{FILTER:Shadow(Color=color,Direction=direction)}
Color 代表阴影的颜色，格式为“#RRGGBB”
Direction是设置投影的方向，按照顺时针方向进行，0度代表垂直向上，然后每45度为一个单位。默认值是向左的270度。共8个方向。
在CSS里定义类，第一种是投影，第二中是阴影。数值可以自己调整，上面有详细介绍
.dropshadow { filter: DropShadow(Color=green, OffX=5, OffY=5, Positive=1); position: absolute; font-size: 14pt; font-weight: bolder; top: 20px; clip: rect( ); left: 20px}
.shadow { filter: Shadow(Color=green, Direction=135); position: absolute; font-size: 14pt; font-weight: bolder ; left: 350px; top: 20px; clip: rect( )}[/code]

定义到字体：
< Div class=dropshadow>dropshadow - 用CSS做投影效果
< Div class=shadow>shadow - 用CSS做阴影效果

常用的CSS简写方法

星箭 — Tue, 14 Nov 2006 13:39:45 +0000

前两天我写的一篇文章里说过，要提高网站执行效率，就要从各种细节入手。其中，CSS的简写在节省代码方面虽然没有table布局改为div那么客观，不过也是一个不能忽略的方面。下面总结一下CSS的一些简写方法：

外补丁(margin)的简写：
比如：margin-top:10px;margin-left:20px;margin-right:20px;margin-bottom:10px;
可以写成：margin:10px 20px;
或者：margin:10px 20px 10px 20px;
再或者：margin:10px 20px 10px;
注意：简写后的顺序是“上-左右-下”，“上-右-下-左”，“上下-左右”

内补丁(padding)的简写：同上

颜色的简写：
比如：color:#FFFFFF
可以写成：color:#FFF
或者：color:white

边框的简写：
比如：border-width:1px; border-style:solid; border-color:#FFFFFF;
可以写成：border:1px solid :#FFFFFF;
或者写成：border:1px solid :#FFF;

背景的简写：background-color:#FFFFFF; background-image:url(background.gif); background-repeat:no-repeat; background-attachment:fixed; background-position:0 0;
可以写成：background:#FFF url(background.gif) no-repeat fixed 0 0;

字体的简写：
font-style:normal; font-weight:bold; font-size:12px; line-height:120%; font-family:"宋体","Arial";
可以写成：font:normal bold 12px/120% "宋体","Arial";

链接统一定义：
为了避免每个链接都要给出css来定义，可以用这样的伪类来定义：
a:link {color:#666666; text-decoration:none;}
a:visited{color:#666666; text-decoration:none;}
a:hover{color:#000099; text-decoration:underline;}
a:active{color:#000000; text-decoration:none;}

用body来定义网页：
body{
margin:0 auto;
padding:0; border:0;
font-size:12px; text-align:center;
font-family: "宋体","Arial","Lucida Grande","Lucida Sans Unicode","Verdana","sans-serif";
}
margin:0 auto;的意思就是网页居中，很多初学者都不知道div+css如何使网页居中，其实就这么简单。
padding:0; border:0;是定义所有的内补丁和边框为0，当然你特殊声明的除外。
font-family: "宋体","Arial","Lucida Grande","Lucida Sans Unicode","Verdana","sans-serif";是定义网页文字的字体，默认会按照这个顺序来显示。如果出现英文的话，英文的默认字体是Arial。

不要忽视这么一点代码，如果你不注意的话，会使css文件大很多。。比如没经过简写的css有15K，那么通过简写后的CSS文件可能只有13K了。可千万别小看这2K，记住~