CSS常用样式
CSS hack
由于不同厂商的流览器或某浏览器的不同版本，对CSS的支持、解析不一样，导致在不同浏览器的环境中呈现出不一致的页面展现效果。这时，我们为了获得统一的页面效果，就需要针对不同的浏览器或不同版本写特定的CSS样式，我们把这个针对不同的浏览器/不同版本写相应的CSS code的过程，叫做CSS hack。
CSS hack的原理
由于不同的浏览器和浏览器各版本对CSS的支持及解析结果不一样，以及CSS优先级对浏览器展现效果的影响，我们可以据此针对不同的浏览器情景来应用不同的CSS。
CSS hack分类
属性前缀法（即类内部Hack）：例如 IE6能识别下划线"_"和星号" * "，IE7能识别星号" * "，但不能识别下划线"_"，IE6~IE10都认识"\9"，但firefox前述三个都不能认识。
选择器前缀法（即选择器Hack）：例如 IE6能识别*html .class{}，IE7能识别*+html .class{}或者*:first-child+html .class{}。
IE条件注释法（即HTML条件注释Hack）：针对所有IE(注：IE10+已经不再支持条件注释)： <!--[if IE]>IE浏览器显示的内容 <![endif]-->，针对IE6及以下版本： <!--[if lt IE 6]>只在IE6-显示的内容 <![endif]-->。这类Hack不仅对CSS生效，对写在判断语句里面的所有代码都会生效。
CSS hack的实现
CSS hack方式一：条件注释法
举例：
只在IE下生效 <!--[if IE]> 这段文字只在IE浏览器显示 <![endif]--> 只在IE6下生效 <!--[if IE 6]> 这段文字只在IE6浏览器显示 <![endif]--> 只在IE6以上版本生效 <!--[if gte IE 6]> 这段文字只在IE6以上(包括)版本IE浏览器显示 <![endif]--> 只在IE8上不生效 <!--[if ! IE 8]> 这段文字在非IE8浏览器显示 <![endif]-->
CSS hack方式二：CSS属性前缀法
属性前缀法是在CSS样式属性名前加上一些只有特定浏览器才能识别的hack前缀，以达到预期的页面展现效果。
IE浏览器各版本 CSS hack 对照表
其中，S表示Standards Mode，即标准模式；Q表示Quirks Mode，即兼容模式。
说明：在标准模式中
- “-″减号是IE6专有的hack
- “\9″ IE6/IE7/IE8/IE9/IE10都生效
- “\0″ IE8/IE9/IE10都生效，是IE8/9/10的hack
- “\9\0″ 只对IE9/IE10生效，是IE9/10的hack
实例：
<style type="text/css">
body:nth-of-type(1) .iehack{
color: #F00;/* 对Windows IE9/Firefox 7+/Opera 10+/所有Chrome/Safari的CSS hack ，选择器也适用几乎全部Mobile/Linux/Mac browser*/
}
.demo1,.demo2,.demo3,.demo4{
width:100px;
height:100px;
}
.hack{
/*demo1 注意顺序，否则IE6/7下可能无法正确显示，导致结果显示为白色背景*/
background-color:red; /* All browsers */
background-color:blue !important;/* All browsers but IE6 */
*background-color:black; /* IE6, IE7 */
+background-color:yellow;/* IE6, IE7*/
background-color:gray\9; /* IE6, IE7, IE8, IE9, IE10 */
background-color:purple\0; /* IE8, IE9, IE10 */
background-color:orange\9\0;/*IE9, IE10*/
_background-color:green; /* Only works in IE6 */
*+background-color:pink;
}
/*可以通过javascript检测IE10，然后给IE10的<html>标签加上class=”ie10″ 这个类 */
.ie10 #hack{
color:red; /* Only works in IE10 */
}
/*demo2*/
.iehack{
/*该demo实例是用于区分标准模式下ie6~ie9和Firefox/Chrome的hack，注意顺序
IE6显示为：绿色，
IE7显示为：黑色，
IE8显示为：红色，
IE9显示为：蓝色，
Firefox/Chrome显示为：橘色，
（本例IE10效果同IE9,Opera最新版效果同IE8）
*/
background-color:orange; /* all - for Firefox/Chrome */
background-color:red\0; /* ie 8/9/10/Opera - for ie8/ie10/Opera */
background-color:blue\9\0; /* ie 9/10 - for ie9/10 */
*background-color:black; /* ie 6/7 - for ie7 */
_background-color:green; /* ie 6 - for ie6 */
}
/*demo3
实例是用于区分标准模式下ie6~ie9和Firefox/Chrome的hack，注意顺序
IE6显示为：红色，
IE7显示为：蓝色，
IE8显示为：绿色，
IE9显示为：粉色，
Firefox/Chrome显示为：橘色，
（本例IE10效果同IE9，Opera最新版效果也同IE9为粉色）
*/
.element {
background-color:orange; /* all IE/FF/CH/OP*/
}
.element {
*background-color: blue; /* IE6+7, doesn't work in IE8/9 as IE7 */
}
.element {
_background-color: red; /* IE6 */
}
.element {
background-color: green\0; /* IE8+9+10 */
}
:root .element { background-color:pink\0; } /* IE9+10 */
/*demo4*/
/*
该实例是用于区分标准模式下ie6~ie10和Opera/Firefox/Chrome的hack，本例特别要注意顺序
IE6显示为：橘色，
IE7显示为：粉色，
IE8显示为：黄色，
IE9显示为：紫色，
IE10显示为：绿色，
Firefox显示为：蓝色，
Opera显示为：黑色，
Safari/Chrome显示为：灰色，
*/
.hacktest{
background-color:blue; /* 都识别，此处针对firefox */
background-color:red\9; /*all ie*/
background-color:yellow\0; /*for IE8/IE9/10 最新版opera也认识*/
+background-color:pink; /*for ie6/7*/
_background-color:orange; /*for ie6*/
}
@media screen and (min-width:0){
.hacktest {background-color:black\0;} /*opera*/
}
@media screen and (min-width:0) { .hacktest { background-color:purple\9; }/* for IE9/IE10 PS:国外有些习惯常写作\0，根本没考虑Opera也认识\0的实际 */
}
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
.hacktest { background-color:green; } /* for IE10+ 此写法可以适配到高对比度和默认模式，故可覆盖所有ie10的模式 */
}
@media screen and (-webkit-min-device-pixel-ratio:0){ .hacktest {background-color:gray;} } /*for Chrome/Safari*/
/* #963棕色 :root is for IE9/IE10, 优先级高于@media, 慎用！如果二者合用，必要时在@media样式加入 !important 才能区分IE9和IE10 */
/*
:root .hacktest { background-color:#963\9; }
*/
</style>
CSS hack方式三：选择器前缀法
选择器前缀法是针对一些页面表现不一致或者需要特殊对待的浏览器，在CSS选择器前加上一些只有某些特定浏览器才能识别的前缀进行hack。
常见：
- *html *前缀只对IE6生效
- *+html *+前缀只对IE7生效
- @media screen\9{...}只对IE6/7生效
- @media \0screen {body { background: red; }}只对IE8有效
- @media \0screen\,screen\9{body { background: blue; }}只对IE6/7/8有效
- @media screen\0 {body { background: green; }} 只对IE8/9/10有效
- @media screen and (min-width:0\0) {body { background: gray; }} 只对IE9/10有效
- @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {body { background: orange; }}
常用CSS样式
- 1. CSS制作三角符号
- 2. CSS 精灵（sprites）
- 3. CSS制作弹出提示框及背景遮罩层
- 4. CSS的定位技巧（子绝父相）
- 5. CSS布局（两列，三列）
- 6. CSS2实现圆角矩形
CSS常见事项
- 1) ul 标签在 Mozilla 中默认是有 padding 值的，而在 IE 中只有 margin 值。
- 2) 同一个的 class 选择符可以在一个文档中重复出现，而 id 选择符却只能出现一次；对一个标签同时使用 class和 id 进行 CSS 定义，如果定义有重复，id 选择符做的定义有效。
- 3) 如果一组要嵌套的标签之间需要些间距的话，那就外面标签的 padding 属性，而不要去定义位于里面的标签的 margin
- 4) li 标签前面的图标推荐使用 background-image 而不是 list-style-image
- 5) 在给你的标签疯狂加选择符的时候，别忘了在 CSS 里给选择符加上注释。 等你以后修改你的 CSS 的时候才知道每个选择符代表的意思。
- 6) 如果你给一个标签设置了一个深色调的背景图片和亮色调的文字效果。建议这个时候给你的标签再设置一个深色调的背景颜色。
- 7) 定义链接的四种状态要注意先后顺序： Link Visited Hover Active
- 8) 与内容无关的图片请使用 background
- 9) 定义颜色可以缩写 #8899FF = #89F
- 10) table 在某些方面比其它标签表现的要好的多。通常在需要列对齐的地方用它。
- 11) 完美的单象素外框线表格 table {border-collapse:collapse;} td {border:#000 solid 1px;}
- 12) margin 取负值可以在标签使用绝对定位的时候起到相对定位的作用，在页面居中显示时，使用绝对定位的层可使用 left:50% 这个属性。 再使用 margin 的负值来实现。
- 13) 固定宽度汉字截断：overflow:hidden;text-overflow:ellipsis;white-space:nowrap;（不过只能处理文字在一行上的截断，不能处理多行。）
- 14) 固定宽度汉字（词）折行：table-layout:fixed; word-break:break-all;
- 15) <div style="cursor: help" title="输入要提示的文字">文字</div> 用鼠标放在前面的文字上看效果。这个效果在国外的很多网站都可以看到，而国内的少又少。
- 16) 图片设为半透明：.halfalpha { background:rgba(0,0,0,0.5); filter: Alpha(Opacity=50); opacity:0.5;}
- 17) FLASH透明： 在 <object>标签结束前输入 <param name="wmode" value="transparent">
- 18) 我们在做网页时常用到把鼠标放在图片上会出现图片变亮的效果，可以用图片替换的技巧，也可以用如下的滤镜。
代码：
.pictures img { filter: alpha(opacity=50); opacity:0.5;}
.pictures img:hover { filter: alpha(opacity=100); opacity:1;}
CSS常用命名
| css常用命名 | 页面结构常用命名 | 导航命名 | 功能命名 |
| 头部：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 标签页：tab 文章列表：list 提示信息：msg 小技巧：tips 栏目标题：title 加入：joinus 指南：guild 服务：service 注册：regsiter 状态态：status 投票：vote 合作伙伴：partner |
容器: container 页头：header 内容：content/container 页面主体：main 页尾：footer 导航：nav 侧栏：sidebar 栏目：column 页面外围控制整体布局宽度：wrapper 左右中：left right center |
导航：nav 主导航：mainbav 子导航：subnav 顶导航：topnav 边导航：sidebar 左导航：leftsidebar 右导航：rightsidebar 菜单：menu 子菜单：submenu 标题: title 摘要: summary |
标志：logo 广告：banner 登陆：login 登录条：loginbar 注册：regsiter 搜索：search 功能区：shop 标题：title 加入：joinus 关于我们：aboutus 状态：status 按钮：btn 滚动：scroll 标签页：tab 文章列表：list 提示信息：msg 当前的: current 小技巧：tips 图标: icon 注释：note 指南：guild 服务：service 热点：hot 新闻：news 下载：download 投票：vote 合作伙伴：partner 友情链接：link 版权：copyright |
命名注意事项
- 1）一律小写;
- 2）尽量用英文;
- 3）不加中杠和下划线;
- 4）尽量不缩写，除非一看就明白的单词。