其他分享
首页 > 其他分享> > 一、（7）CSS常用样式

一、（7）CSS常用样式

作者：互联网

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，即兼容模式。
说明：在标准模式中

实例：

    <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。

常见：

常用CSS样式

CSS常见事项

代码：

.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

命名注意事项

标签：IE9,常用,样式,IE6,color,background,hack,CSS
来源： https://www.cnblogs.com/qcdxw/p/14156699.html