css笔记

背景图片满屏显示：
.mainbody{position:absolute; top:0; left:0; height:100%; width:100%; background-image:url(images/bj.jpg); background-position:top  center; background-repeat: no-repeat; background-attachment:fixed; background-size: cover; -webkit-background-size: cover;-o-background-size: cover;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/bj.jpg',sizingMethod='scale');zoom: 1;}
_background:none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="图片路径");

white-space:nowrap;同以超链接不换行

word-wrap:break-word ;英文数字换行虚加属性

<table width="100%" border="0" cellspacing="1" cellpadding="0">table样式 

（ie6 max-height解决方案）
.divcss5{height: expression(this.height> 500 ? 500 : true); max-height: 500px;} 

针对低版本chrome谷歌浏览器设置一个校准字体大小样式：
-webkit-text-size-adjust:none*:focus { outline: none; }
input框去掉焦点  border-color: transparent;边框颜色透明

(1)透明度兼容性：
  filter:alpha(opacity=90);
 -moz-opacity:0.9;(火狐)
 -khtml-opacity: 0.9;opacity: 0.9;

(2)字体兼容性（设置成英文或unicode编码可兼容ie9等）：“黑体”对应英文名为“SimHei”“宋体”对应英文名为“SimSun”“仿宋”对应英文名为“FangSong”“微软雅黑”对应英文名为“Microsoft YaHei”

(3)hover兼容解决办法（ie6下不兼容a标签以外的hover属性）：    
  body { behavior:url("csshover.htc"); }
  /* css注释：别忘记csshover.htc，使用时候注意路径 */    
  img{width:165px; height:60px; background:#090;}
  /* 原本图片宽度和高度背景颜色 */     
  img:hover{width:200px; height:200px; padding:3px; border:2px solid #00F; cursor:pointer}     
  /* hover鼠标经过赋予让图片变宽 高，设置padding和2px蓝色边框、css cursor为鼠标指针样式  */     
  li:hover{ border:1px solid #000}
  /* li列表标签鼠标经过出现黑色边框 */     
  .abc:hover{ color:#F00}
  /* 对象.abc鼠标经过其内容css字体颜色变红色 */ 

(4)CSS hack之特殊符号的应用大全：
  1.适用浏览器：IE/Mac：    
    /* CSS注释：在IE Mac上忽略下面的语句 \*/ 
    selector { ...styles... } 
    /* 忽略结束 */ 反斜线（\）hack利用了IE/Mac的一个bug。以\*/结束的css 注释在IE/Mac上是不正确关闭的，所以那些需要在IE/Mac上被忽略的语句可以放在这种注释后面。

  2.适用浏览器：IE6及其以下版本：width: [W3C Model Width]; _width: [BorderBox Model];  IE 6 及以下的版本可以识别带有下划线前缀的属性，而其它浏览器会忽略它。因此，一个属性前面加上下划线或者连字符，就成为了IE6及以下版本浏览器的专有属性。

  3.适用浏览器：IE7以下版本：width: [W3C Model Width]; *width: [BorderBox Model]; 除了下划线和连字符，版本7及以下的IE可以识别以非字母字符为前缀的属性，而其它浏览器会忽略。

  4.适用浏览器：IE4-6：* html p {font-size: 5em; } HTML元素是W3C标准DOM的根元素，但是IE 4至6的版本中还有一个神秘的父元素。完全兼容的浏览器会忽略这个* html选择器，但IE4-6却会对它正常处理。这个HACK使用了完全有效的CSS。

  5.适用浏览器：IE7：    *+html p { font-size: 5em; } 只在IE7标准模型里工作正常，在怪异模式下不能用。同时，也被IE8的兼容模式（相当于IE7的标准模式）所支持。它也使用了有效的CSS。

  6.适用浏览器： IE6以上版本及非IE浏览器：html > body p { color: blue; } IE6和早期的版本不支持“子选择器”(>)，我们可以利用这个为其它浏览器指定特别的规则。

  7.适用浏览器： IE7以上版本及非IE浏览器    html >/**/ body p { color: blue; } 虽然IE7支持对子选择器，但通过以下hack方法也可以把IE7也排除。当一个空的注释紧跟在子选择器的后面重复的时候，IE7会不识别后面的规则，就和较早版本的浏览器一样。

(5)IE6 png图片透明的解决方法教程1、需要DD_belatedPNG.js和DD_belatedPNG_0.0.8a.js文件，下面我们会提供打包下载2、需要在需要支持png图片html页面引入这2个JS文件（2个js文件我们放入到js文件夹里为例）因为是针对IE6的，其它更高版本浏览器不需要使用此特效，所以我们使用注解式if条件让IE6读取JS文件，代码如下：    
  <!--[if IE 6]>     
        <script src="js/DD_belatedPNG_0.0.8a.js" type="text/javascript" ></script>
        <script type="text/javascript">     DD_belatedPNG.fix(' ');     </script>      
  <![endif]--> 

(6)IE6、IE7、IE8、Firefox兼容性CSS HACK代码+示例 
  #divcss5{
    background:blue; /*Firefox 背景变蓝*/
    background:red \9; /*IE8 背景变红色*/
    background:black; /*IE7 背景变黑色*/
    _background:orange; /*IE6 背景变橘色*/
  }

(7)CSS Hack汇总快查(CSS兼容代码演示)
  1、屏蔽IE浏览器（也就是IE下不显示） 
    *:lang(zh) select {font:12px !important;} /*FF的专用
    */select:empty {font:12px !important;} /*safari可见*/这里select是选择符，根据情况更换。第二句是MAC上safari浏览器独有的。 

  2、仅IE7识别hack  *+html {…}当面临需要只针对IE7做样式的时候就可以采用这个HACK。 

  3、IE6及IE6以下识别CSS HACK * html {…}这个地方要特别注意很多地主都写了是IE6的HACK其实IE5.x同样可以识别这个HACK。其它浏览器不识别。html/**/ >body select {……}这句与上一句的作用相同。 

  4、仅IE6不识别div hack     select { display /*IE6不识别*/:none;}这里主要是通过CSS注释分开一个属性与值，流释在冒号前。 

  5、仅IE6识别支持    _yangshi{_height:20px;}这里IE6支持识别CSS属性前“_”短下划线。

  6、仅IE6与IE5不识别     select/**/ { display /*IE6,IE5不识别*/:none;}这里与上面一句不同的是在选择符与花括号之间多了一个CSS注释。 

  7、仅IE5不识别     select/*IE5不识别*/ { display:none;}这一句是在上一句中去掉了属性区的注释。只有IE5不识别 

  8、盒模型解决方法     selct {width:IE5.x宽度; voice-family :"\"}\""; voice-family:inherit; width:正确宽度;}盒模型的清除方法不是通过!important来处理的。这点要明确。 

  9、清除浮动 
    select:after {content:"."; display:block; height:0; clear:both; visibility:hidden;}在Firefox中，当子级都为浮动时，那么父级的高度就无法完全的包住整个子级，那么这时用这个清除浮动的HACK来对父级做一次定义，那么就可以解决这个问题 。
 
  10、截字省略号  select { -o-text-overflow:ellipsis; text-overflow:ellipsis; white-space:nowrap; overflow:hidden; }这个是在越出长度后会自行的截掉多出部分的文字，并以省略号结尾，很好的一个技术。只是目前Firefox并不支持。
 
  11、只有Opera识别  
    @media all and (min-width: 0px){ select {……} }针对Opera浏览器做单独的设定。 以上都是写CSS中的一些HACK，这些都是用来解决局部的兼容性问题，如果希望把兼容性的内容也分离出来，不妨试一下下面的几种过滤器。这些过滤器有的是写在CSS中通过过滤器导入特别的样式，也有的是写在HTML中的通过条件来链接或是导入需要的补丁样式。

  12、IE的if条件Hack    
    <!--[if IE]> Only IE <![endif]-->所有的IE可识别
    <!--[if IE 5.0]> Only IE 5.0 <![endif]-->只有IE5.0可以识别
    <!--[if gt IE 5.0]> Only IE 5.0+ <![endif]-->IE5.0包换IE5.5都可以识别
    <!--[if lt IE 6]> Only IE 6- <![endif]-->仅IE6可识别
    <!--[if gte IE 6]> Only IE 6/+ <![endif]-->IE6以及IE6以下的IE5.x都可识别
    <!--[if lte IE 7]> Only IE 7/- <![endif]-->仅IE7可识别 

  13、仅IE8兼容识别div{height:20px\9;}这里的“\9”仅IE8支持识别

(8)删除点击后链接产生的虚线框  
  一、使用CSS解决法，CSS代码：
    a {blr:expression(this.onFocus=this.blur())}
  二、直接在超链接标签内加属性代码如下：
    <a href="[http://www.divcss5.com/](http://www.divcss5.com/)" onFocus="this.blur()">css</a>

(9)不使用hover外部CSS样式实现hover鼠标悬停改变样式
  <a href="[http://www.divcss5.com/](http://www.divcss5.com/)" style="color:#00F; text-decoration:none"     onMouseOver="this.style.color='#F00';this.style.textDecoration='underline'" onMouseOut="this.style.color='#00F';this.style.textDecoration='none'">DIVCSS5</a>

(10)CSS判断不同分辨率显示不同宽度布局CSS3技术支持IE6到IE8 
  .abc{ height:300px; border:1px solid #000; margin:0 auto}     

  @media screen and (min-width: 1201px) {     .abc {width: 1200px}      }     
  /* css注释：设置了浏览器宽度不小于1201px时 abc 显示1200px宽度 */        
  
  @media screen and (max-width: 1200px) {     .abc {width: 900px}      }     
  /* 设置了浏览器宽度不大于1200px时 abc 显示900px宽度 */  
        
  @media screen and (max-width: 901px) {     .abc {width: 200px;}      }     
  /* 设置了浏览器宽度不大于901px时 abc 显示200px宽度 */     
     
  @media screen and (max-width: 500px) {     .abc {width: 100px;}      }     
  /* 设置了浏览器宽度不大于500px时 abc 显示100px宽度 */ 

(11)文件命名参考表，DIV CSS命名集合：
CSS样式命名     
说明网页公共命名
#wrapper    页面外围控制整体布局宽度
#container或#content     容器,用于最外层
#layout     布局
#head, #header  页头部分
#foot, #footer  页脚部分
#nav    主导航
#subnav     二级导航
#menu   菜单
#submenu    子菜单
#sideBar    侧栏
#sidebar_a, #sidebar_b  左边栏或右边栏
#main   页面主体#tag    标签
#msg #message   提示信息
#tips   小技巧
#vote   投票
#friendlink     友情连接
#title  标题
#summary    摘要
#loginbar   登录条
#searchInput    搜索输入框
#hot    热门热点
#search     搜索
#search_output  搜索输出和搜索结果相似
#searchBar  搜索条
#search_results     搜索结果
#copyright  版权信息
#branding   商标
#logo   网站LOGO标志
#siteinfo   网站信息
#siteinfoLegal  法律声明
#siteinfoCredits    信誉
#joinus     加入我们
#partner    合作伙伴
#service    服务
#regsiter   注册
#arr,  #arrow   箭头
#guild  指南
#sitemap    网站地图
#list   列表
#homepage   首页
#subpage    二级页面子页面
#tool, #toolbar     工具条
#drop   下拉
#dorpmenu   下拉菜单
#status     状态
#scroll     滚动

.tab    标签页
.left .right .center    居左、中、右
.news   新闻
.download   下载
.banner     广告条(顶部广告条)电子贸易相关
.products   产品
.products_prices    产品价格
.products_description   产品描述
.products_review    产品评论
.editor_review  编辑评论
.news_release   最新产品
.publisher  生产商
.screenshot     缩略图
.faqs   常见问题
.keyword    关键词
.blog   博客
.forum  论坛

CSS文件命名     说明
master.css,style.css    主要的
module.css  模块
base.css    基本共用
layout.css  布局，版面
themes.css  主题
columns.css     专栏
font.css    文字、字体
forms.css   表单
mend.css    补丁
print.css   打印```