HTML+CSS编码的一些经验

1.为body标签赋予id：

　　同一个网站的不同页面，虽然HTML代码相同，但是可以通过CSS来取得不同的表现效果。如果这些页面用的是同一个CSS文件，怎样精确的定义相同内容的不同表现呢？通过给body标签赋予id以区别不同的页面，然后使用CSS后代选择器可以精确的选择目标。例如：首页的body赋予id="home", 内页的body赋予id="inner",如果选取首页文章标题的话，可以用：“#home #main h1”,而要选取内页中的标题的话就可以用：“#inner #main h1”。这样的话，同一个网站中不容的页面，HTML代码相同的也可以有同的表现效果了。

2.相对长度em与段落首行缩进两个汉字的空格：

　　相对长度单位em根据元素的不同而不同，相对，顾名思义，是根据其他事物的关系来度量。如果一个div中文字的大小为12px, 再设置其外边距为3em, 则这个外边距的值就是12*3=36px,如果将文字大小改为15px, 那么这个外边距的值就成了15*3=45px 了。

　　汉字书写都有首行空两格的习惯，相当于插入了两个汉字宽度的空格，如果用  显然无法达到令人满意的效果。这时候我们就可以用CSS来实现两个汉字的缩进，如果文字的大小为12px; 那我们缩进24px就可以了，但是在同一个页面不可能所有的文字大小都是12px, 这里我们就可以通过相对长度单位em来设置文本缩进2em，这样的话，不管文字多大，始终都会保持两个汉字宽度的随进。

3.id与class命名需要注意技巧：

　　在HTML编码中，对id与class的命名需要注意技巧，尽可能以区域所在的含义命名，如header、footer等，不要以表现或所在的位置命名，如width500、left、right。左边的侧边栏可以用side，如果你用left命名的话，后面的内容如果重构，这个侧边栏放到了右边，那么显然此时的left不适合了。

4.关于通配选择器“*”(Universal Selector)：

　　通配选择器可以对一些CSS属性进行全局设置，也就是全局默认样式的定义。这样做可以提高CSS编码效率，缩减代码，这样声明了，就不必在后面编码中再进行单独的定义。例如全局定义文字大小为12px, 而导航栏、侧边栏、内容区域中的文字正好也是12px, 有了这全局定义，那这3块儿区域就不用再单独设置了。

　　如果出现与全局定义冲突的定义，在后面的编码中直接再定义新的样式，CSS的继承和层叠经以新的样式作用于选择的对象。例如，外边距*{margin:0;}， 这里把外边距都设置为0，在后面的编码中单独定义某一元素的外边距为auto，如h3{margin:auto;}即可实现水平居中对齐。

5.关于position定位:

　　top、righ、bottom和left这4个CSS属性，都是配合position属性使用的，表示的是块的各边界离页面边框（当position为absolute时）的距离，或各个边界离原来位置（position为relative时）的距离。也就是说只有当position属性的值设置为absolute或relative时才有效，如果position属性设置为static，则子块不会有任何变化。

6.选择合适的标签：

　　什么是时候用<div>，什么时候用<span>呢，这样根据实际情况来定，通常情况下，对于页面中大的区块儿使用<div>标签， 而<span>标签仅仅用于需要单独设置样式风格的小元素，比如说一个单词，一个图片或是一个超链接等等。

7.关于盒子模型：

　　一个盒子的实际宽度（高度）是由 content + padding + border + margin组成的。在浏览器中（无论是IE还是FireFox），width和height的值都指的是width + padding和heigh + padding的值，在实际制作网页的时候需要特别注意。 

8.关于表单的id与name：

　　表单中id与name都是为了标记对象名称。id是后来引入的，在这之前Netscape用name属性来实现这样的功能。目前还有很多网站后台程序都是用name属性来获取表单元素的值，所以有必要同时为元素设定id与name属性，这样不但可以通过id选择器为元素定义CSS样式，还可以兼顾到表单接受页面能正确获取表单元素的值（通过name属性获取表单数据）。

9.维护CSS样式表时需要注意的事项：

　　在进行重构的编码修改时要注意合理的调整。有些不再使用的代码要坚决的删掉；对于新增加的代码根据CSS规则进行添加。在调整前要对将要修改的代码进行详细的阅读，避免重复定义。在调整的时候注意保存备份代码，当调整出问题的时候，可以查看原来的代码进行对比。

10.将多个图片组合至一个图片文件：

　　目前大型网站基本都是采取这样的做法：一些尺寸相同但内容不同的图片，这些图片可能是页面上的图标、栏目标题或是导航栏的背景图片。这样的图片尺寸往往不大但是数目众多，这时候我们就可以把这些图片组合至一个图片文件，比如说一个网页有六个图标，但我们打开网站的时候需要加载6个图片才能将网页显示出来，而组合至一个图片后，只需要加载一个图片就可以了。而且组合以后的图片文件体积与未组合之前的图片体积相当，甚至还会变小而不增加字节数，最经典的应用是链接背景图片交互效果制作，也可以将网站所有的icon图标集中在一个图片上。当然，这种方法不能滥用。