几个月没有接触css了，现在有点需要又开始了css的学习之路。主要还是研究禅意花园，每次看禅意花园网站都有不小的收获，禅意花园的强大让我不得不佩服。学习seo之后不知不觉间就会把网站优化，制作与seo联系在一起，css也不列外。
1、正确合理的使用html语义标记。
表现样式和正确的语义编码原理上说有一定的差别的。可能为了实现一种效果可以有很多的方法，但是从seo和css布局设计方便性的角度而言，我们应该采用正确的形式来编写。不合理的如下：
<b><font size=”2″>css Zen Garden</font></b>
<br /><br />
<font size=”1″>A demonstration of what can be accomplished visually through <acronym title=”Cascading Style Sheets”>CSS</acronym>-based design. Select any style sheet from the list to load it into this page</font>
下面这是正确的语义编写：
<div id=”garden”>
<h3>css Zen Garden</h3>
<p>A demonstration of what can be accomplished visually through <acronym title=”Cascading Style Sheets”>CSS</acronym>-based design. Select any style sheet from the list to load it into this page</p>
</div>
2、避免过度使用div和span。
css布局div必不可少，行内元素span也需要，虽然他们很好用，但是我们经常会犯的错误就是过度使用div和span。这样可能会导致html文档结构的不清晰，少量合理的使用div和span，很多时候应该多考虑应用html元素是否有更好的选择。因为把内容隐藏在深深的div容器之下不利于搜索引擎的抓取，影响网页的信噪比。正确的使用他们可以使html文档仅仅有条，搜索引擎索引更加的简单，蜘蛛爬行更容易。
3、利用css布局网站内容。
利用css可以使网站内容到导航有左上角到右下角的形式显示。利用css设计符合seo的网页，避免了搜索引擎每次首先爬行的都是一层不变的导航，栏目。搜索引擎可以第一时间抓取新的内容。
4、做适当的css优化。
css代码优化减肥和采用链接形式使用css，可以更好的较少网页的大小，最有利于seo的网页大小在30k一下，如果很合理的使用css布局和设计页面，页面文件大小可以得到很好的减肥，同时服务器负担也将大大减小，网页打开速度也可以得到一定的提高。 无论是用户体验还是seo都是非常有好处的。
禅意花园最让我敬佩的就是html结构不变的情况下，可以设计出各式各样精美充满艺术气息的网页。如果你的网站也是这样的，那么你在怎么该版，对网站seo也没有什么影响。这个实在是让人不得不佩服！
随着网络的普及，网站竞争也是如火如荼，要在网络中能够比其他网站更加的获得青睐，更有竞争力方法很多，在网站建设中时刻要用的css的优化也就非常的有必要。特别是大型网站的css代码优化。
当然要说说css优化的意义：
1、减少占用网页字节。在同等条件下缩短浏览器下载css代码时间，相当于加快网页打开速度
2、便于维护。简化和标准化css代码让css代码减少，便于日后维护
3、让自己写的css代码更加专业。
在这里总结下css优化方法：
1、css样式尽量合并成一个外部文件，采用link方式导入到网页中来，可以减少不少内嵌在网页中的css代码。
2、多用全局样式，比如网页中只有一个h1标签，那么直接在css文件中定义h1的样式，如h1{……}，而不要给h1标签加class或者id来定义样式，这样一来就可以省略class=”"或id=”"，整个网页精简下来就可以简洁不少代码。
3、多采用父级继承样式控制，在div中尽量使用不同标签来控制网页表现形式，比如一个div中需要有3个不同颜色的文字，这样做同样可以减少不少的class和id。
<div>
<p>
<span>文字</span>
段落内容
</p>
</div>
css样式可以这样写：
div { color: #000}
div p { color: #0f0}
div span { color: #f00}
4、使用css缩写形式，促进CSS代码精简、优化（有背景，边框，list，font等属性的缩写这里就不详述，网站列子很多）
5、很多人在设置css样式时，很多时候都是一个属性设置就是一行，这样将占css文件很多的空格和回车位空间（虽然看上去会比较整齐，但是为了增加速度和减少占用空间）这样将节约空格和回车位，及css文件行数，从而节约代码文件字节（特别是大站）
6、对于同属性的id或者同属性的选择器，可以将其进行提取。如：
.gongyong{font-size:12px;border:1px solid #000000;padding:5px;}
.ys1{ width:25px;}
.ys2{width:50px;}
引入样式时就可以这样写：
<div>div css样式</div>
<div class=”gongyong ys2″>div css样式2</div>
id属性值相同时：可以合并一起写如：
#id1，#id2{color:#ccc, width:100px;}
7、对css代码条理化排列:
比如：可以将导航，内容，底部的css代码分类，用注释进行分隔，而共用部分也可以单独列出来。
这一点，其实也是主要根据个人习惯，笔者本人就是比较习惯 这样写。
所谓任意选择器就是通用选择器，它可以用来对所有的元素设置某种属性，虽然这种情况并不多见，但是在某些情况下它是相当好用的。它还可以和子选择器组合使用来对祖先元素计数。例如：
*{cursor:auto}
这个规则将鼠标指针的形状重置为浏览器的默认形状。此规则可以迅速的取消对鼠标指针的所有改动。
另外一般情况下，在ff等浏览器下，元素的外边距默认情况下一般是不为零的，这时就可以利用任意选择器来设置默认值比如：
如同右侧的图为在默认情况下，div的外边距是不为零的，则与浏览器就有一定的距离。左侧的则为利用的*{margin:0px;}规则，那么div就会紧贴浏览器。当然这并不是唯一方法，还有其他的很多方法都可以做到。
可以方便使用“任意选择器”的另一个地方是在这样一类选择器中，它们必须尽在文档中的某个深度进行匹配。例如，为了选择出body元素中的所有段落的设置，可以采用如下规则：
body*p{font:medium “gill sans”,serif}
虽然通用选择器的使用并不广泛，但是在某些场合是可以适当的运用，这里举的例子只是简单的介绍其使用方法。
最近在编写博客页面时候，遇到一个浮动自适应高度问题：显示的最外层并不能和内层的div高度自动适应。
如下图：
总结下三点解决办法：
一、使用after对象：
效果如下图：
二、使用overflow：
三、使用空标签clear清除属性：
其中空标签可以为div 、 p等，我个人认用p会比较好。
