css 使用技巧

对于通用选择器还有一个不得不提的用法，就是为了保证作出的页面能够兼容多种浏览器，所以要对HTML 内的所有的标签进行重置，会将下面的代码加到CSS 文件的最顶端1. *{margin:0; padding:0;}为什么要这么用呢，因为每种浏览器都自带有CSS 文件，如果一个页面在浏览器加载页面后，发现没有CSS 文件，那么浏览器就会自动调用它本身自带的CSS 文件，但是不同的浏览器自带的CSS 文件又都不一样，对不同标签定义的样式不一样，如果我们想让做出的页面能够在不同的浏览器显示出来的效果都是一样的，那么我们就需要对对HTML
标签重置，就是上面的代码了，但是这样也有不好的地方，因为HTML4.01 中有89 个标签，所以相当于在页面加载CSS 的时候，先对这89 个标签都加上了{margin:0; padding:0;}，在这里我不建议大家这么做，因为89 个标签中需要重置的标签是很少数，没有必要将所有的标签都重置，需要哪些标签重置就让哪些标签重置就可以了，如下1. body,div,p,a,ul,li{margin:0; padding:0;}如果还需要dl、dt、dd 标签重置，那就在上面加上就可以了，如下1. body,div,p,a,ul,li,dl,dt,dd{margin:0;
padding:0;}用到那些就写些，这点也可以看做衡量页面重构师***页面水平的高低，以及是否专业的一个方面到这里大家更应该明白这句话“通用选择器是功能最强大但是用的最少的选择器”了吧~^_^

头：header

内容：content/container

尾：footer

导航：nav

侧栏：sidebar

栏目：column

页面外围控制整体布局宽度：wrapper

左右中：left right center

登录条：loginbar

标志：logo

广告：banner

页面主体：main

热点：hot

新闻：news

下载：download

子导航：subnav

菜单：menu

子菜单：submenu

搜索：search

友情链接：friendlink

页脚：footer

版权：copyright

滚动：scroll

内容：content

块元素

h·address - 地址

·blockquote - 块引用

·center - 举中对齐块

·dir - 目录列表

·div - 常用块级容易，也是css layout 的主要标签

·dl - 定义列表

·fieldset - form 控制组

·form - 交互表单

·h1 - 大标题

·h2 - 副标题

·h3 - 3 级标题

·h4 - 4 级标题

·h5 - 5 级标题

·h6 - 6 级标题

·hr - 水平分隔线

·isindex - input prompt

·menu - 菜单列表

·noframes - frames 可选内容，（对于不支持frame 的浏览器显示此区块内容）

·noscript - 可选脚本内容（对于不支持script 的浏览器显示此内容）

·ol - 排序表单

·p - 段落

·pre - 格式化文本

·table - 表格

·ul - 非排序列表

内联元素

·a - 锚点

·abbr - 缩写

·acronym - 首字

·b - 粗体(不推荐)

·bdo - bidi override

·big - 大字体

·br - 换行

·cite - 引用

·code - 计算机代码(在引用源码的时候需要)

·dfn - 定义字段

·em - 强调

·font - 字体设定(不推荐)

·i - 斜体

·img - 图片

·input - 输入框

·kbd - 定义键盘文本

·label - 表格标签

·q - 短引用

·s - 中划线(不推荐)

·samp - 定义范例计算机代码

·select - 项目选择

·small - 小字体文本

·span - 常用内联容器，定义文本内区块

·strike - 中划线

·strong - 粗体强调

·sub - 下标

·sup - 上标

·textarea - 多行文本输入框

·tt - 电传文本

·u - 下划线

·var - 定义变量

当内联元素，在CSS 中定义下列属性中的一种，便具有块元素的特征

1）display:block;

2）float:left; （不但具有块元素的特征，同时像左侧浮动）

但是这时候的内联元素，虽然具有块状元素的特征，但是这两种有一点区别，第一种，彻头

彻尾和块元素一模一样，都要单独占一行，从左至右，前提没有width 和height 属性，严

格遵循流动布局模型块状元素的流动方式，自上至下流动，第二种，大小是恰好能将内容包

含，并且右侧浮动，可以多个在一行。

当加上 position:absolute/relative的时候，块状元素和内联元素，就不受父级区域的限

制了，可以移动到任何位置，此时如果加上width 和height 属性，那么就具有层的特征了。（加上width 和height 还有一点好处，就是可以兼容IE 浏览器了，所有的浏览器现实效果

都一样了）

一、用class_name方式写类名

　　以前喜欢用class-name写，不过好像两样也没什么差别。但我比较反对用className写类名，因为始终对浏览器大小写敏感的问题抱有怀疑态度。但是id我会写成驼峰式，理由见下一条。

　　二、样式都用class而不用id

　　有三个理由，一，id不可以重复，所以用class的话，可以肆无忌惮的用无数次。二，id的优先级太高，若是写了一个#page_contenta {color:#f60}，那你完蛋了，里面要改链接颜色，都必须加上#page_content才能越过这个优先级。三，id专门留给JS用，这样才符合表现与行为分离的原则。所以id我用驼峰式，也是为了体现这一点。

　　三、margin和padding，尽量省略最后一个值

　　比如margin: 20px 10px 5px 10px; ，左右值是一样的，就应该省略掉最后一个值，写成margin: 20px 10px5px; 这样到时候要改左右间距，改一个就好，免得改漏了。其实这个问题虽然很细小，但是可以看得出对margin四个值省略规则的熟练程度。对于有的浏览器如果把margin:20px 10px 5px; ,这样浏览器会解析成上下间距为20px跟5px; 左右间距均为10px;。

　　四、按标准写CSS，再针对特定浏览器作hack

　　比如，通常我们会遇到如下的写法：

　　.side_col {

　　float:left;

　　display: inline;

　　margin-left: 20px;

　　}

　　而我的写法会是：

　　.side_col {

　　float: left;

　　margin-left: 20px;

　　}

　　* .side_col {

　　_display:inline; /*hacked for IE 6*/

　　}

　　看明白了么?不应该把hack混在一起，也不应该用一种侥幸的心态，觉得float:left与display:inline写在一起没事。嗯，它们俩确实没事儿，但是其他的hack就不一定了。而且这里写display:inline纯粹就是为了解决IE6的bug，所以前面加上下划线，以明确的表达你的目的。

　　另外不要以为凡是hack都是为IE准备的。其实有些hack是针对其他浏览器的，比如FF。这就要求你对CSS标准的熟练掌握，能够自信的判断哪些渲染是遵守标准，哪些违反标准的。

　　此外，我喜欢在hack前面加上星号，其实这纯粹是个人习惯了。可能过段时间我就不这么用了，呵呵。

　　五、记得加空格。

　　.class_name { property: value; }。我个人觉得合理的空格是优秀代码的一个指标。按英文的习惯，标点后面都应该带空格(如果你写This is a pen.That’s apencil.句点后面不加空格， word里面会有错误提示)。所以既然CSS是外国人发明的，应该按他们的格式来写。类似的，在JS里var a= b + c;里面的空格也应该都要加。

　　六、适当的层叠(Cascading)或缩进以定义CSS的“作用域”。

　　啥叫“CSS的作用域”?其实并不是所有的样式都在所有的地方使用。有的样式只用在某一块里面，比如“导航栏”里的“搜索框”，可能应该写成：

　　.nav .search {}

　　而有时候用层叠会增加代码优先级，所以也可以用缩进来“象征性的”体现作用域。像这样：

　　.login_box {}

　　.forgot_pwd{}

　　缩进，是为了表示它们对应的标签具有父子关系。但这样只能起到一个提醒的作用。

　　七、颜色代码的缩写

　　例如：

　　.top{ width:104px; height:96px; background:#FF0099; }

　　可以写成：

　　.top{ width:104px; height:96px; background:#F09; }

　　所写 代码必须是 AABBCC 形式的 缩写成 ABC。

　　这样写加快处理效率，又简单方便。