CSS学习总结

CSS学习总结
   CSS（Cascading Style Sheet，可译为“层叠样式表”或“级联样式表”）是一组格式设置规则，用于控制Web页面的外观。在百奇项目用到的和参考书上学到的，在这里给大家总结一下，由于时间原因，没有给大家截取一些页面实例。
   分5个角度给大家讲讲，美观角度，“面向对象”，网络速度，网络爬虫，需要注意角度，等几个方面。
从美观角度来讲（div和table）。
1．    调节布局padding, margin, (width, height)，(top， right，buttom, left), border。

注意：实际宽度=width+2*border宽度
2．    表格（table）一些属性运用规范。
必须指定（border，cellspacing，cellpadding），这里尤其要注意的是在写<table>互相嵌套时，严格按照的规范，对于单独的一个<table>来说，<table><tr>对齐，<td>缩进两个半角空格，<td>中如果还有嵌套的表格，<table>也缩进两个半角空格，如果<td>中没有任何嵌套的表格，</td>结束标记应该与<td>处于同一行，不要换行，做网页最好不要用自动格式化。
Width和height的写法也有统一的规范，一般情况下只有一列的表格，width写在<table>的标签内，只有一行的表格，height写在<table>的标签内，多行多列的表格，width和height写在第一行或者第一列的<td>标签内。在百奇项目里，一般表头属性行用<th>来控制。
表格尽量用绝对像素，以免浏览器分辨率不同时表格产生变形。
注意：在IE下<td>为空时，<td>属性设置不生效。应该尽量避免<colspan><rowspan>两个标记，经验表明，这两个标记会带来许多麻烦。
3．    4个伪类LoVe和 HAte . （用这两个单词方便大家记忆）
a:link、链接在鼠标点击前样式
a:visited、链接在鼠标点击后样式
a:hover、链接在鼠标点击时样式
a:actived 链接在鼠标移上时样式
这4个的排列顺序一定要严格照上面的样例代码，否则或多或少会出问题。另外我们规定重定义的最先，伪类其次，自定义最后，便于自己和他人阅读！百奇项目经验，先后顺序也会带来加载的顺序。
注意：在IE7及以上版本和FF是识别如：li:hover其他部门标签也识别和着4个伪类一起用，但是在IE6版本下不识别。
4．    Float属性，用完要clear掉。百奇经验，最好用好的样式设计来弥补float标签。
5．    原则上，我们禁止用<img width=? height=?>来人为干预图片显示的尺寸，而且建议<img>标签中不要带上width和height两个属性，这是因为制作过程中，图片往往需要反复的修改，这样可以避免人为干预图片显示的尺寸，尽可能的发挥浏览器自身的功能；但是这样的一个副作用是当网页还未加载图片时，不会留出图片的站位大小，可能会造成网页在加载过程中抖动（如果图片是插在一个固定大小的表格里的，不会有这个现象），尤其是当图片的 尺寸较大时，这种现象会很明显，所以当预料到这种会明显导致网页抖动的情况会发生时，请大家务必在最后给<img>附上width和height属性。在百奇项目经验，客户让提供一个模板，因为没有定义图片大小，结果在没有图片的时候，格式会跟预定义格式有出入。但是也不要所有图片都需要加宽度和高度，一般在稍大的图片地方才加，如果采用现在流行的大拼图，那需要每个图片加上宽度和高度，以免显示时发生不必要的错误。
6．    请不要在网页中连续出现多于一个的也尽量少使用全角空格（英文字符集下，全角空格会变成乱码）
7．    行距建议用百分比来定义，常用的两个行距的值是line-height:120%/150%。百奇网站很少用到，用的是margin和padding，结果在调试格式时就用了相对较多的时间。
8．    所有的字号都应该用样式表来实现，禁止在页面中出现<font size=?>标记。百奇项目由于客户要求字体大小格式太多，个别页面用到了这标签。

从“面向对象”角度来讲。
1．    CSS最好采用继承格式，来实现代码重用，这样的好处就是，简化代码、修改方便、浏览器解析CSS文件快。例如，百奇项目中product、cart、search…所有的列表采用统一格式，只要修改CSS一处，就能全部列表样式生效。
2．    网页中的javascript和css尽可能和网页分离，一方面提高代码重用度（也方便页面缓存），另外一方面，由于有效内容占网页长度的百分比高，也能提高相关关键词在页面中的比重也增加了。
从网络速度来讲。
1．    网页要尽量避免用整个一张大表格，所有的内容都嵌套在这个大表格之内，因为浏览器在解释页面的元素时，是以表格为单位逐一显示，如果一张网页是嵌套在一个大表格之内，那么很可能造成的后果就是，当浏览者敲入网址，他要先面对一片空白很长时间，然后所有的网页内容同时出现。如果必须这样做，请使用<tbody>标记，以便能够使这个大表格分块显示。实际上不加<tbody>标记，浏览器(FF)也会默认给加上,原因不清楚，但是为了培养好的习惯，希望用到时都加上。百奇项目采用的是div加table，这样能很好的避免这个问题。个人建议，只有在很格式和条例的时候用table，也可根据实际情况而定，最好不要整个页面就是在table里面。
2．    在排布表格之前，请大家一定要好好思考一个最佳的方案，表格的嵌套尽量控制在三层以内。整个页面不要都套在一个表格里，尽量拆分成多个表格;表格嵌套层次尽量要少.实验证明：越复杂，嵌套层次越多的表格下载速度越慢。百奇以前网站就有嵌套5层的table，不但修改麻烦，而且加载速度也会慢。
3．    图片采用gif,jpg压缩格式，原则上色调单一的图片存成GIF格式，色彩复杂、层次丰富的存在JPEG格式。以减小页面下载数据量。每幅图片要有本图片的说明文字(alt=””)，这样如果图片不能正常显示，也可知道图片处代表什么意思。这地方需要注意，以后也可以根据经验慢慢总结，在像素要求不高的情况下，选用gif的图片，在宣传网站形象或需要清晰照片的时候再采用jpg格式图片，一般不要用网络jpg格式图片，会有侵权风险。可以适当采用png格式图片，百奇项目就是。如果需要图片底色透明，一般采用gif格式图片。
   
这是百奇项目的一些图片，在第一次加载时可能速度会慢一点，但是以后会很快，具体优越速度参数可以参读《高性能网站》，运用的技巧就是1+1<2.
  4． 首页。一般关注网站速度的主要参考地方就是首页打开的速度，首页在必要时可以加入一些CSS文件，来提高加载速度。能用静态的数据最好采用静态数据。
从网络爬虫来讲。
1．     运用<title></title>标签和<h1></h1>标签。用<h1></h1>标题行突出内容主题，加强标题的效果，而不是通过改变字体的方式突出标题。因为在Google，百度等搜索时优先解析这俩标签里面的内容。所以以后不要再让<title></title>空闲，要运用<h1></h1>来代替CSS效果控制标题。百奇在这点不是很好，是用CSS控制每个页面的标题，但这样做的好处是美观。
2．    尽量使用静态网页，爬虫优先查找网站静态页面，所以网站不妨在静态页面多写一些本网站的关键词。在百奇项目，所有的静态页面都是采用富文本编辑器处理的，这点为后台人员添加页面方便了，但是不利于被搜索引擎搜到。
3．    站点地图，方便网页爬虫（spider）快速遍历网站所有需要发布的内容。可以借鉴百奇的站点地图看看。
4．    如果首页就是用Flash或图片进入的话，无异于将搜索引擎拒之门外。
其他注意方面。
1.    为了保证网站能够与下一代的web语言xml标准兼容，所有的HTML标签的属性都要用单引号或者双引号括起，即我们应该写<a href=”url”>而不是<a href=url>.
2.    图片的命名原则遵循以下几条规范：
名称分为头尾两两部分，用下划线隔开。
头部分表示此图片的大类性质，例如广告、标志、菜单、按钮等等。只要能做到见名知意就可以，百奇网站就是见名知意。
3.    首页和一级页面之间用星状链接结构，一级和二级页面之间用树状链接结构.(百奇网站样式，这样的优势时在用户访问时，便于用户浏览，而不至于“迷路”，但是部分静态页面这点做的不是很好。)
4.    要用相对路径，坚决禁止用绝对路径。
5.    不要开设不必要的session变量，以免浪费资源，同时，能一次性用sql语句解决的问题就用sql语句，避免多次进行数据库检索，反馈，再检索等等，以免影响速度，致使大量的时间浪费在网络连接上。百奇网站这点做的很好，具体地方可以询问海伟，他对SQL优化做了很大努力。
6.    该用js验证合法的就要验证，坚决避免服务器端进行验证，以免加大服务器负担，同时，影响网页反应的速度。百奇由于是购物网站，需要相对较强的安全措施，所以在前后台都添加了用户校验。
7.    排版中我们经常会遇到需要进行首行缩进的处理，不要使用或者全角空格来达到效果，规范的做法是在样式表中定义p{text-indent:2em;}然后给每一段加上<p>标记，注意，一般情况下，请不要省略</p>结束标记。
 总结：
      网站前台是以美观和性能为主，还要考虑被Google搜到。只要能实现这点那怕你不择手段，最让前台工程师头疼的莫过于浏览器兼容问题，在工作中慢慢总结经验就会写出高性能的前台界面，如果有兴趣可以相互学习交流。在这推荐几本书给你《CSS实战经验》《高性能网站》《jQuery应用技巧》。如有不足之处，希望指正并能相互交流学习。
QQ：122120138