前端知识：css hack,sprites雪碧图,meta,css选择器优先级介绍

1、css hackCSS hackCSS hack简介简介由于不同的浏览器，比如IE6、IE7、Firefox等，对CSS的解析认识不一样，因此会导致生成的页面效果不一样，得不到我们所需要的页面效果。 这个时候我们就需要针对不同的浏览器去写不同的CSS，让它能够同时兼容不同的浏览器，能在不同的浏览器中也能得到我们想要的页面效果。这个针对不同的浏览器写不同的CSS code的过程，就叫CSS hack.CSS HackCSS Hack表现形式表现形式CSS Hack大致有3种表现形式，CSS类内部Hack、选择器Hack以及HTML头部引用(if IE)Hack.1.CSS Hack主要针对类内部

2、Hack：比如 IE6能识别 “_”和 “ * ”，IE7能识别 “ * ”，但不能识别 “_”，而firefox两个都不能认识（例*background:green;_background:blue; )2.选择器Hack：比如 IE6能识别*html .class，IE7能识别*+html .class或者*:first-child+html .class。等等(例：* html .nav width:120px; )3.HTML头部引用(if IE)Hack：针对所有IE：，针对IE6及以下版本：，这类Hack不仅对CSS生效，对写在判断语句里面的所有代码都会生效。HTMLHTML头部引

3、用头部引用(if IE)Hack(if IE)Hack除IE外都可识别 所有的IE可识别 仅IE6可识别 IE6以及IE6以下版本可识别 IE6以及IE6以上版本可识别 仅IE7可识别 IE7以及IE7以下版本可识别 IE7以及IE7以上版本可识别 仅IE8可识别 IE8以及IE8以下版本可识别 IE8以及IE8以上版本可识别 例:比如要分辨IE6和firefox两种浏览器，可以这样写： divbackground:green; /* for firefox */*background:red; /* for IE6 */ (both IE6 & IE7) 结果：在IE6中看到是红色的

4、，在firefox中看到是绿色的 IE6能识别*和_,不能完全识别 !important;IE7能识别*，能识别!important;FF不能识别*，但能识别!important;9：选择IE6+。如(color:#00F9); 0：选择IE8+和Opera。如(color:#00F0; )书写顺序，一般是将识别能力强的浏览器的CSS写在前面。书写顺序一般为FireFox IE7 IE6 !important是CSS1就定义的语法，作用是提高指定样式规则的应用优先权。语法格式 cssRule !important ，即写在定义的最后面，例如：boxcolor:red !important;,加

5、上一个“!important”就优先于正常的CSS规则.!important ie7,ie8,firefox,chrome等浏览器下，已经可以识别 !important属性， 但是IE 6.0仍然不能完全识别. IE 6.0不能完全识别：当!important的样式属性和覆盖它的样式属性单独使用时(不在一个里)，IE 6.0认为! important优先级较高，否则当含! important的样式属性被同一个里的样式覆盖时，IE 6.0认为! important较低! 例如：IE支持重定义中的!important.yuanxin color:#e00!important;.yuanxin co

6、lor:#000;你将会发现定义了样式class=yuanxin时，在IE下，字体显示为红色（#e00）。但不支持同一定义中的!important.yuanxin color:#e00!important;color:#000;此时在IE6下不支持，你将会发现定义了样式class=yuanxin时，字体显示为黑色（#000）。CSS hack:CSS hack:区分区分IE6IE6，IE7IE7，firefoxfirefox区别IE6与FF：background:orange;*background:blue;区别IE6与IE7：background:green !important;back

7、ground:blue;区别IE7与FF：background:orange; *background:green;区别FF，IE7，IE6：1.background:orange;*background:green;_background:blue;2.background:orange;*background:green !important;*background:blue;例子：如想同一段文字在IE6,7,8显示为不同颜色.testcolor:#000; /* 正常写法普遍支持 */color:#00F9; /* 所有IE浏览器(ie6+)支持 */color:#00F0; /* IE

8、8支持*/*color:#FF0; /* IE7支持 */_color:#F00; /* IE6支持 */CSS Sprites CSS SpritesCSS Sprites简介简介CSS Sprites在国内很多人叫CSS精灵，是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去，这样一来，当访问该页面时，载入的图片就不会像以前那样一幅一幅地慢慢显示出来了。对于当前网络流行的速度而言，不高于200KB的单张图片的所需载入时间基本是差不多的，所以无需顾忌这个问题。加速的关键，不是降低质量，而是减少个数。客户端每显示一张图片都会向服务器发送一次请求。所以，图片越

9、多请求次数越多，造成延迟的可能性也就越大。CSS SpritesCSS Sprites原理原理CSS Sprites就是把网页中一些背景图片整合到一张图片文件中，再利用CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位，background-position可以用数字精确的定位出背景图片的位置。CSS Sprites优缺点优缺点优点：优点：l利用CSS Sprites能很好地减少网页的http请求，从而大大的提高页面的性能，这也是CSS Sprites最大的优点，也是其被广泛传播和应用的主要原因；

10、lCSS Sprites能减少图片的字节，3张图片合并成1张图片的字节总是小于这3张图片的字节总和。l解决了网页设计在图片命名上的困扰，只需对一张集合的图片上命名就可以了，不需要对每一个小元素进行命名，从而提高了网页的制作效率。l更换风格方便，只需要在一张或少张图片上修改图片的颜色或样式，整个网页的风格就可以改变。维护起来更加方便。缺点：缺点：lCSS Sprites在开发的时候比较麻烦，需要通过photoshop或其他工具测量计算每一个背景单元的精确位置，这是针线活，没什么难度，但是很繁琐；lCSS Sprites在维护的时候比较麻烦，如果页面背景有少许改动，一般就要改这张合并的图片，无需改

11、的地方最好不要动，这样避免改动更多的css。metametametameta是用来在HTML文档中模拟HTTP协议的响应头报文。meta 标签用于网页的与中。meta 的属性有两种：name和属性主要用于描述网页，对应于content（网页内容），以便于搜索引擎机器人查找、分类（目前几乎所有的搜索引擎都使用网上机器人自动查找meta值来给网页分类）。这其中最重要的是description（站点在搜索引擎上的描述）和keywords（分类关键词）。 namename属性属性name属性主要用于描述网页，与之对应的属性值为content，content中的内容主要是便

12、于搜索引擎机器人查找信息和分类信息用的。meta标签的name属性语法格式是：；。keywordskeywords（关键字）（关键字） 向搜索引擎说明你的网页的关键词；举例：descriptiondescription（网站内容描述）（网站内容描述） 告诉搜索引擎你的站点的主要内容；举例： http-equivhttp-equiv属性属性http-equiv，相当于http的文件头作用，它可以向浏览器传回一些有用的信息，以帮助正确和精确地显示网页内容，与之对应的属性值为content，content中的内容其实就是各个参数的变量值。meta标签的http-equiv属性语法格式是： ；其中ht

13、tp-equiv属性主要有以下几种参数：http-equiv属性参数属性参数A、Expires（期限）说明：可以用于设定网页的到期时间。一旦网页过期，必须到服务器上重新传输。用法：注意：必须使用GMT的时间格式。B、Pragma(cache模式）说明：禁止浏览器从本地计算机的缓存中访问页面内容。用法：注意：这样设定，访问者将无法脱机浏览。C、Refresh（刷新）说明：自动刷新并指向新页面。用法：；（注意后面的引号，分别在秒数的前面和网址的后面）注意：其中的2是指停留2秒钟后自动刷新到URL网址。D、Set-Cookie(cookie设定）说明：如果网页过期，那么存盘的cookie将被删除。用

14、法：注意：必须使用GMT的时间格式。E、Window-target（显示窗口的设定）说明：强制页面在当前窗口以独立页面显示。用法：注意：用来防止别人在框架里调用自己的页面。F、content-Type（显示字符集的设定）说明：设定页面使用的字符集。用法：G、content-Language（显示语言的设定）用法：charsetcharset信息参数信息参数meta标签的charset的信息参数如GB2312时，代表说明网站是采用的编码是简体中文；meta标签的charset的信息参数如BIG5时，代表说明网站是采用的编码是繁体中文；meta标签的charset的信息参数如iso-2022-jp

15、时，代表说明网站是采用的编码是日文；meta标签的charset的信息参数如ks_c_5601时，代表说明网站是采用的编码是韩文；meta标签的charset的信息参数如ISO-8859-1时，代表说明网站是采用的编码是英文；meta标签的charset的信息参数如UTF-8时，代表世界通用的语言编码；CSS选择器的优先级例子：idteam idteam 如果已经把. xinguan下面span内的字体设置成红色：. xinguan span color:red; 这时，如果要改变. idteam的颜色为蓝色，用下面的命令是不能实现的：. idteam color:blue; 出现这种情况就是

16、因为后一个命令的优先级不够，两条相互冲突的样式设置，浏览器只会执行优先级较高的那个。CSS样式选择器等级样式选择器等级CSS样式选择器分为4个等级，a、b、c、d，可以以这四种等级为依据确定CSS选择器的优先级。1.如果样式是行内样式（通过Style=”定义），那么a=12.b为ID选择器的总数3.c为Class类选择器的数量。4.d为标签选择器的数量5.属性选择器，伪类选择器和class类选择器优先级一样，伪元素选择器和类型选择器一样6.!important 权重最高，比行内样式还要高 CSS 伪类伪类提示：提示：最常见的错误是认为 p:first-child 之类的选择器会选择 p 元素的

17、第一个子元素。 (选的是p而不是p的第一个子元素)CSS 伪元素伪元素CSS样式选择器等级样式选择器等级CSS样式选择器分为4个等级，a、b、c、d，可以以这四种等级为依据确定CSS选择器的优先级。1.如果样式是行内样式（通过Style=”定义），那么a=12.b为ID选择器的总数3.c为Class类选择器的数量。4.d为标签选择器的数量5.属性选择器，伪类选择器和class类选择器优先级一样，伪元素选择器和类型选择器一样6.!important 权重最高，比行内样式还要高 一般而言，选择器越特殊，它的优先级越高。也就是选择器指向的越准确，它的优先级就越高。通常我们用1表示标签名选择器的优先级

18、，用10表示类选择器的优先级，用100标示ID选择器的优先级，用1000表示内联样式的优先级。例如：选择器特殊性为0,2,0,2，那么选择器的优先级是 200 + 2 也就是202 例子： idteam idteam . xinguan span color:red; (0,0,1,1). idteam color:blue; (0,0,1,0)注：优先级高的会覆盖优先级较低的，优先级相等的时候，样式定义时位置靠后的覆盖位置靠前的。例：p.class1attr=value /*A*/p.class1 /*B*/p.class2 /*C*/p /*D*/p property: value !important; /*E*/后代选择器的定位原则后代选择器的定位原则 浏览器CSS匹配不是从左到右进行查找，而是从右到左进行查找。比如DIV#divBox p span.redcolor:red;，浏览器的查找顺序如下：先查找html中所有class=red的span元素，找到后，再查找其父辈元素中是否有p元素，再判断p的父元素中是否有id为divBox的div元素，如果都存在则匹配上。浏览器从右到左进行查找的好处是为了尽早过滤掉一些无关的样式规则和元素。后代选择器的定位原则后代选择器的定位原则比如