clear 属性规定元素的哪一侧不允许其他浮动元素。 clear: both;
float 属性定义元素在哪个方向靠. float:right;
padding 简写属性在一个声明中设置所有内边距属性。 padding: 0 3px;
margin 简写属性在一个声明中设置所有外边距属性。margin: 0 auto; 【auto 浏览器计算外边距。】
outline (轮廓)是绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用。 outline: 0;
border-bottom-left-radius 向 div 元素的左下角添加圆角边框:
border-bottom-right-radius 将边框右下角变为圆角
【
/* Gecko browsers */
-moz-border-radius-topleft: 20px;
-moz-border-radius-topright: 0;
-moz-border-radius-bottomleft: 0;
-moz-border-radius-bottomright: 20px;
/* Webkit browsers */
-webkit-border-top-left-radius: 20px;
-webkit-border-top-right-radius: 0;
-webkit-border-bottom-left-radius: 0;
-webkit-border-bottom-right-radius: 20px;
/* W3C syntax */
border-top-left-radius: 20px;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
border-bottom-left-radius: 20px;
】
font-weight 属性设置文本的粗细
text-decoration 这个属性允许对文本设置某种效果,如加下划线。
【
underline 定义文本下的一条线。
overline 定义文本上的一条线。
line-through 定义穿过文本下的一条线。
blink 定义闪烁的文本。
inherit 规定应该从父元素继承 text-decoration 属性的值。
】
word-wrap 允许长单词换行到下一行: word-wrap: break-word;
display 属性规定元素应该生成的框的类型 display: inline-block;
【
block 此元素将显示为块级元素,此元素前后会带有换行符。
inline 默认。此元素会被显示为内联元素,元素前后没有换行符。
inline-block 行内块元素。(CSS2.1 新增的值)
list-item 此元素会作为列表显示。
run-in 此元素会根据上下文作为块级元素或内联元素显示。
table 此元素会作为块级表格来显示(类似 <table>),表格前后带有换行符。
inline-table 此元素会作为内联表格来显示(类似 <table>),表格前后没有换行符。
table-row-group 此元素会作为一个或多个行的分组来显示(类似 <tbody>)。
table-header-group 此元素会作为一个或多个行的分组来显示(类似 <thead>)。
table-footer-group 此元素会作为一个或多个行的分组来显示(类似 <tfoot>)。
table-row 此元素会作为一个表格行显示(类似 <tr>)。
table-column-group 此元素会作为一个或多个列的分组来显示(类似 <colgroup>)。
table-column 此元素会作为一个单元格列显示(类似 <col>)
table-cell 此元素会作为一个表格单元格显示(类似 <td> 和 <th>)
table-caption 此元素会作为一个表格标题显示(类似 <caption>)
inherit 规定应该从父元素继承 display 属性的值。
这里的 display:inline 可以让块级元素,变为行内元素,且元素前后没有换行符;比如:
<div> DIV1 </div>
<div> DIV2 </div>
默认情况下,这2个div各占一行,也就是显示为上下两行,当加上样式后:
<div style= "display:inline "> DIV1 </div>
<div style= "display:inline "> DIV2 </div>
这样2个div就能显示在同一行了
】
repeat-x 是横向铺满,就是在#header .nav-box中,图片nav-box-bg.gif会横向重复,直到铺满;
repeat-y 是纵向,就这么回事,如果不想重复,no-repeat.
opacity 不透明度
vertical-align 属性设置元素的垂直对齐方式
【
baseline 默认。元素放置在父元素的基线上。
sub 垂直对齐文本的下标。
super 垂直对齐文本的上标
top 把元素的顶端与行中最高元素的顶端对齐
text-top 把元素的顶端与父元素字体的顶端对齐
middle 把此元素放置在父元素的中部。
bottom 把元素的顶端与行中最低的元素的顶端对齐。
text-bottom 把元素的底端与父元素字体的底端对齐。
length
% 使用 "line-height" 属性的百分比值来排列此元素。允许使用负值。
inherit 规定应该从父元素继承 vertical-align 属性的值。
】
属性选择器 :
[title] {color:red;} 所有具有标题元素的元素,变红色
//支持正则
[abc^="def"] 选择 abc 属性值以 "def" 开头的所有元素
[abc$="def"] 选择 abc 属性值以 "def" 结尾的所有元素
[abc*="def"] 选择 abc 属性值中包含子串 "def" 的所有元素
[attribute] 用于选取带有指定属性的元素。
[attribute=value] 用于选取带有指定属性和值的元素。
[attribute~=value] 用于选取属性值中包含指定词汇的元素。
[attribute|=value] 用于选取带有以指定值开头的属性值的元素,该值必须是整个单词。
[attribute^=value] 匹配属性值以指定值开头的每个元素。
[attribute$=value] 匹配属性值以指定值结尾的每个元素。
[attribute*=value] 匹配属性值中包含指定值的每个元素。
后代选择器
例#header_body2 .right .nav
子元素选择器
例.nav-pills > .active > a > [class^="icon-"]
相邻兄弟选择器
如果需要选择紧接在另一个元素后的元素,而且二者有相同的父元素,可以使用相邻兄弟选择器(Adjacent sibling selector)。
例如,如果要增加紧接在 h1 元素后出现的段落的上边距,可以这样写:
h1 + p {margin-top:50px;}
这个选择器读作:“选择紧接在 h1 元素后出现的段落,h1 和 p 元素拥有共同的父元素”。
用一个结合符只能选择两个相邻兄弟中的第二个元素
##########################
CSS的前缀符号hack
下划线hack
(适用于IE6及其以下版本)
IE 6 及以下的版本可以识别带有下划线前缀的属性,而其它的浏览器会忽略它。因此,一个属性前面加上下划线或者连字符,就成为了IE6及以下版本浏览器的专有属性。
#elem {
width: [W3C Model Width];
_width: [BorderBox Model];
}
这个hack使用了无效的CSS,利用了一个浏览器的bug,但是我们有有效的CSS语句可以完成这样的事情,所以这个HACK不推荐使用。
星号hack
(适用于IE7以下版本)
除了下划线和连字符,版本7及以下的IE可以识别以非字母字符为前缀的属性,而其它浏览器会忽略。
#elem {
width: [W3C Model Width];
*width: [BorderBox Model];
}
这个HACK不推荐使用,原因同上面的下划线HACK一样。
星号 HTML hack
(适用于IE4-6)
HTML元素是W3C标准DOM (Document Object Model)的根元素,但是IE 4至6的版本中还有一个神秘的父元素。完全兼容的浏览器会忽略这个* html选择器,但IE4-6却会对它正常处理。这样就可以为这些版本的浏览器指定特别的规则。比如,这个规则可以特别指定IE4-6中的文字大小,但对 其它浏览器不起作用。
* html p {font-size: 5em; }
这个HACK使用了完全有效的CSS。
星号加号HACK
(适用于IE7)
虽然IE7不再识别以前的* html hack,但它使用了一个相似的新的hack。
*:first-child+html p { font-size: 5em; }
或者:
*+html p { font-size: 5em; }
此代码只适用于IE7,不适用于其它任何浏览器。注意这个HACK只在IE7标准模型里工作正常,在怪异模式下不能用。这个hack也被IE8的兼容模式(相当于IE7的标准模式)所支持。和星号HTML hack一样,它也使用了有效的CSS。
子选择器hack
(适用于IE6及以下版本)
IE6和早期的版本不支持“子选择器”(>),利用这个我们可以为其它浏览器指定特别的规则。举例来说,这个规则可以让段落文字在firefox 变成蓝色,但在IE7之前的版本里却不能。
html > body p { color: blue; }
虽然IE7增加了对子选择器的支持,但人们发现了新的hack可以把IE7也排除。当一个空的注释紧跟在子选择器的后面重复的时候,IE7会不识别后面的规则,就和较早版本的浏览器一样。
html >/**/ body p { color: blue; }
否定伪类HACK
(可区分IE和非IE)
IE的所有版本都不支持CSS3 : not() 伪类。有一种变异的HACK使用 : root 伪类,此伪类也同样不被IE识别。
.yourSelector {
color: black;
} /* IE中的值 */
html:not([dummy]) .yourSelector {
color: red;
} /* Safari, Opera and Firefox中的值 */
这种否定选择器接受任何类型作为参数,属性,通用,类或ID选择器,或者伪类。然后它会把后面的属性应用于所有不匹配此语法的元素上。
Body:empty hack
(适用于Firefox 2.0及以下版本)
:empty 伪类,在CSS3中介绍过的,用于选择不含任何内容的元素。然而,Geck0 1.8.1 和之后版本(应用在Firefox2.0.x 及之后的版本)错误地选择了body:empty 即使body元素包含有内容(一般情况都如此)。这样我们可以向Firefox 2.0x及以下版本提供专用的CSS规则。
/* 让 p 元素在 Firefox 2.0.x 及以下的版本中不显示 */
body:empty p {
display:none;
}
此HACK使用有效的CSS.
!Important 怪僻
(适用于IE8以下版本)
IE8及以下版本有一些和!imporant有关的怪僻,它允许一个赋值优先级更高。IE7及更早版本接受任意字符串替代important,并且会正常处理该值,而其它浏览器则会忽略。
/* 在IE8及以下版本下设文字为蓝色,其它浏览器中为黑色 */
body {
color: black;
color: blue !ie;
}
相似地,IE8及更早版本接受在!important声明后面的非字母符号,而其它浏览器会忽略它。
body {
color: black;
color: blue !important!;
}
IE6及以下版本有一个!important带来的问题,当在同一段代码块中同一元素的同一属性有了不同的值,本应结果是第二个值被第一个取代,但IE6及更低版本并不这么做。
/* 在IE6及更低版本中设文字为蓝色 */
body {
color: black !important;
color: blue;
}
所有这些HACK使用的是有效的CSS。
动态属性
在版本5至7,IE曾支持过一种语法适用于动态变化的CSS属性,有时被称为CSS表达式。动态属性通常混合其它HACK以补偿更早版IE中不支持的属性。
div {
min-height: 300px;
/* 在IE6中模拟 min-height */
_height: expression(document.body.clientHeight < 300 ? "300px" : "auto");
}
有条件的注释
有条件的注释只在Windows平台的IE上被识别,并从IE5起开始支持,它甚至可以区分版本5.0,5.5和6.0。
代码:
下面是一些“有条件的注释”,可以显示你正在使用的IE版本。如果你看不到,那么你用的不是IE:
<p><!--[if IE]>
According to the conditional comment this is Internet Explorer<br />
<![endif]-->
<!--[if IE 5]>
According to the conditional comment this is Internet Explorer 5<br />
<![endif]-->
<!--[if IE 5.0]>
According to the conditional comment this is Internet Explorer 5.0<br />
<![endif]-->
<!--[if IE 5.5]>
According to the conditional comment this is Internet Explorer 5.5<br />
<![endif]-->
<!--[if IE 6]>
According to the conditional comment this is Internet Explorer 6<br />
<![endif]-->
<!--[if IE 7]>
According to the conditional comment this is Internet Explorer 7<br />
<![endif]-->
<!--[if gte IE 5]>
According to the conditional comment this is Internet Explorer 5 and up<br />
<![endif]-->
<!--[if lt IE 6]>
According to the conditional comment this is Internet Explorer lower than 6<br />
<![endif]-->
<!--[if lte IE 5.5]>
According to the conditional comment this is Internet Explorer lower or equal to 5.5<br />
<![endif]-->
<!--[if gt IE 6]>
According to the conditional comment this is Internet Explorer greater than 6<br />
<![endif]-->
</p>
注意它的语法:
- gt: 高于
- lte:低于或相当
说明:
1.它们的基本结构和HTML注释一样(<!-- -->)。因此其它所有浏览器会把它们当作正常的注释忽略掉。
2.Windows IE里的程序可以识别这个特殊的<!--[if IE]>语法,处理if并解析此注释中的内容,就当作是正常的网页内容一样。
3.既然“有条件的注释”使用了HTML注释的结构,它们就只能被包含在HTML文件里,而不是CSS文件里。你可以把整个<link>标签放在“有条件的注释”里,指向一个指定的样式表。如下所示:
<link href="all_browsers.css" rel="stylesheet" type="text/css">
<!--[if IE]> <link href="ie_only.css" rel="stylesheet" type="text/css"> <![endif]-->
<!--[if lt IE 7]> <link href="ie_6_and_below.css" rel="stylesheet" type="text/css"> <![endif]-->
<!--[if !lt IE 7]><![IGNORE[--><![IGNORE[]]> <link href="recent.css" rel="stylesheet" type="text/css"> <!--<![endif]-->
<!--[if !IE]>--> <link href="not_ie.css" rel="stylesheet" type="text/css"> <!--<![endif]-->
IE8 hack
IE8不能识别“*”和“_”的css hack,所以我们可以使用"\9"来区分IE的各个版本。
color:#0000FF\9; ; /*ie6,ie7,ie8*/
*color:#FFFF00; /*ie7*/
_color:#FF0000; /*ie6*/
小结
使用HACK隐藏代码在浏览器更新时经常会导致页面不正常显示。许多HACK曾用于在IE6及更低版本中隐藏CSS,但在版本7下不再工作,因为IE改进了对CSS 标准的支持。微软的IE开发小组曾要求人们使用有条件的注释,代替使用hack。
##########################
滤镜
例子
<style>
.btn-danger {
color: #ffffff;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
background-color: #da4f49;
*background-color: #bd362f;
background-image: -moz-linear-gradient(top, #ee5f5b, #bd362f);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ee5f5b), to(#bd362f));
background-image: -webkit-linear-gradient(top, #ee5f5b, #bd362f);
background-image: -o-linear-gradient(top, #ee5f5b, #bd362f);
background-image: linear-gradient(to bottom, #ee5f5b, #bd362f);
background-repeat: repeat-x;
border-color: #bd362f #bd362f #802420;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffee5f5b', endColorstr='#ffbd362f', GradientType=0);
filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
}
</style>
<input type=button class="btn-danger" value="ddddddddd">
filter : progid:DXImageTransform.Microsoft.AlphaImageLoader
说明:
在对象容器边界内,在对象的背景和内容之间显示一张图片。并提供对此图片的剪切和改变尺寸的操作。如果载入的是PNG(Portable Network Graphics)格式,则0%-100%的透明度也被提供。
语法:
filter : progid:DXImageTransform.Microsoft.AlphaImageLoader ( enabled=bEnabled , sizingMethod=sSize , src=sURL )
enabled: 可选项。布尔值(Boolean)。设置或检索滤镜是否激活。
true:默认值。滤镜激活。
false:滤镜被禁止。
sizingMethod: 可选项。字符串(String)。设置或检索滤镜作用的对象的图片在对象容器边界内的显示方式。
crop:剪切图片以适应对象尺寸。
image:默认值。增大或减小对象的尺寸边界以适应图片的尺寸。
scale:缩放图片以适应对象的尺寸边界。
IE4.0以上支持的滤镜属性表
滤镜效果 描述 :
Alpha 设置透明度
Blru 建立模糊效果
Chroma 把指定的颜色设置为透明
DropShadow 建立一种偏移的影象轮廓,即投射阴影
FlipH 水平反转
FlipV 垂直反转
Glow 为对象的外边界增加光效
Grayscale 降低图片的彩色度
Invert 将色彩、饱和度以及亮度值完全反转建立底片效果
Light 在一个对象上进行灯光投影
Mask 为一个对象建立透明膜
Shadow 建立一个对象的固体轮廓,即阴影效果
Wave 在X轴和Y轴方向利用正弦波纹打乱图片
Xray 只显示对象的轮廓
滤镜实用:
滤镜实用:
哀悼日,各网站页面全部用黑白色,用以下滤镜!!
为方便站点哀悼,特提供css滤镜代码,以表哀悼。以下为全站CSS代码。
html { filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); }
使用方法:这段代码可以变网页为黑白,将代码加到CSS最顶端就可以实现素装
如果网站没有使用CSS,可以在网页/模板的HTML代码和 之间插入:
html{filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);}
<>
有一些站长的网站可能使用这个css 不能生效,是因为网站没有使用最新的网页标准协议
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
http://www.w3.org/1999/xhtml">
请将网页最头部的替换为以上代码。
有一些网站FLASH动画的颜色不能被CSS滤镜控制,可以在FLASH代码的和之间插入:
最简单的把页面变成灰色的代码是在head 之间加
html {
FILTER: gray
}
##############################################
float 属性定义元素在哪个方向靠. float:right;
padding 简写属性在一个声明中设置所有内边距属性。 padding: 0 3px;
margin 简写属性在一个声明中设置所有外边距属性。margin: 0 auto; 【auto 浏览器计算外边距。】
outline (轮廓)是绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用。 outline: 0;
border-bottom-left-radius 向 div 元素的左下角添加圆角边框:
border-bottom-right-radius 将边框右下角变为圆角
【
/* Gecko browsers */
-moz-border-radius-topleft: 20px;
-moz-border-radius-topright: 0;
-moz-border-radius-bottomleft: 0;
-moz-border-radius-bottomright: 20px;
/* Webkit browsers */
-webkit-border-top-left-radius: 20px;
-webkit-border-top-right-radius: 0;
-webkit-border-bottom-left-radius: 0;
-webkit-border-bottom-right-radius: 20px;
/* W3C syntax */
border-top-left-radius: 20px;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
border-bottom-left-radius: 20px;
】
font-weight 属性设置文本的粗细
text-decoration 这个属性允许对文本设置某种效果,如加下划线。
【
underline 定义文本下的一条线。
overline 定义文本上的一条线。
line-through 定义穿过文本下的一条线。
blink 定义闪烁的文本。
inherit 规定应该从父元素继承 text-decoration 属性的值。
】
word-wrap 允许长单词换行到下一行: word-wrap: break-word;
display 属性规定元素应该生成的框的类型 display: inline-block;
【
block 此元素将显示为块级元素,此元素前后会带有换行符。
inline 默认。此元素会被显示为内联元素,元素前后没有换行符。
inline-block 行内块元素。(CSS2.1 新增的值)
list-item 此元素会作为列表显示。
run-in 此元素会根据上下文作为块级元素或内联元素显示。
table 此元素会作为块级表格来显示(类似 <table>),表格前后带有换行符。
inline-table 此元素会作为内联表格来显示(类似 <table>),表格前后没有换行符。
table-row-group 此元素会作为一个或多个行的分组来显示(类似 <tbody>)。
table-header-group 此元素会作为一个或多个行的分组来显示(类似 <thead>)。
table-footer-group 此元素会作为一个或多个行的分组来显示(类似 <tfoot>)。
table-row 此元素会作为一个表格行显示(类似 <tr>)。
table-column-group 此元素会作为一个或多个列的分组来显示(类似 <colgroup>)。
table-column 此元素会作为一个单元格列显示(类似 <col>)
table-cell 此元素会作为一个表格单元格显示(类似 <td> 和 <th>)
table-caption 此元素会作为一个表格标题显示(类似 <caption>)
inherit 规定应该从父元素继承 display 属性的值。
这里的 display:inline 可以让块级元素,变为行内元素,且元素前后没有换行符;比如:
<div> DIV1 </div>
<div> DIV2 </div>
默认情况下,这2个div各占一行,也就是显示为上下两行,当加上样式后:
<div style= "display:inline "> DIV1 </div>
<div style= "display:inline "> DIV2 </div>
这样2个div就能显示在同一行了
】
repeat-x 是横向铺满,就是在#header .nav-box中,图片nav-box-bg.gif会横向重复,直到铺满;
repeat-y 是纵向,就这么回事,如果不想重复,no-repeat.
opacity 不透明度
vertical-align 属性设置元素的垂直对齐方式
【
baseline 默认。元素放置在父元素的基线上。
sub 垂直对齐文本的下标。
super 垂直对齐文本的上标
top 把元素的顶端与行中最高元素的顶端对齐
text-top 把元素的顶端与父元素字体的顶端对齐
middle 把此元素放置在父元素的中部。
bottom 把元素的顶端与行中最低的元素的顶端对齐。
text-bottom 把元素的底端与父元素字体的底端对齐。
length
% 使用 "line-height" 属性的百分比值来排列此元素。允许使用负值。
inherit 规定应该从父元素继承 vertical-align 属性的值。
】
属性选择器 :
[title] {color:red;} 所有具有标题元素的元素,变红色
//支持正则
[abc^="def"] 选择 abc 属性值以 "def" 开头的所有元素
[abc$="def"] 选择 abc 属性值以 "def" 结尾的所有元素
[abc*="def"] 选择 abc 属性值中包含子串 "def" 的所有元素
[attribute] 用于选取带有指定属性的元素。
[attribute=value] 用于选取带有指定属性和值的元素。
[attribute~=value] 用于选取属性值中包含指定词汇的元素。
[attribute|=value] 用于选取带有以指定值开头的属性值的元素,该值必须是整个单词。
[attribute^=value] 匹配属性值以指定值开头的每个元素。
[attribute$=value] 匹配属性值以指定值结尾的每个元素。
[attribute*=value] 匹配属性值中包含指定值的每个元素。
后代选择器
例#header_body2 .right .nav
子元素选择器
例.nav-pills > .active > a > [class^="icon-"]
相邻兄弟选择器
如果需要选择紧接在另一个元素后的元素,而且二者有相同的父元素,可以使用相邻兄弟选择器(Adjacent sibling selector)。
例如,如果要增加紧接在 h1 元素后出现的段落的上边距,可以这样写:
h1 + p {margin-top:50px;}
这个选择器读作:“选择紧接在 h1 元素后出现的段落,h1 和 p 元素拥有共同的父元素”。
用一个结合符只能选择两个相邻兄弟中的第二个元素
##########################
CSS的前缀符号hack
下划线hack
(适用于IE6及其以下版本)
IE 6 及以下的版本可以识别带有下划线前缀的属性,而其它的浏览器会忽略它。因此,一个属性前面加上下划线或者连字符,就成为了IE6及以下版本浏览器的专有属性。
#elem {
width: [W3C Model Width];
_width: [BorderBox Model];
}
这个hack使用了无效的CSS,利用了一个浏览器的bug,但是我们有有效的CSS语句可以完成这样的事情,所以这个HACK不推荐使用。
星号hack
(适用于IE7以下版本)
除了下划线和连字符,版本7及以下的IE可以识别以非字母字符为前缀的属性,而其它浏览器会忽略。
#elem {
width: [W3C Model Width];
*width: [BorderBox Model];
}
这个HACK不推荐使用,原因同上面的下划线HACK一样。
星号 HTML hack
(适用于IE4-6)
HTML元素是W3C标准DOM (Document Object Model)的根元素,但是IE 4至6的版本中还有一个神秘的父元素。完全兼容的浏览器会忽略这个* html选择器,但IE4-6却会对它正常处理。这样就可以为这些版本的浏览器指定特别的规则。比如,这个规则可以特别指定IE4-6中的文字大小,但对 其它浏览器不起作用。
* html p {font-size: 5em; }
这个HACK使用了完全有效的CSS。
星号加号HACK
(适用于IE7)
虽然IE7不再识别以前的* html hack,但它使用了一个相似的新的hack。
*:first-child+html p { font-size: 5em; }
或者:
*+html p { font-size: 5em; }
此代码只适用于IE7,不适用于其它任何浏览器。注意这个HACK只在IE7标准模型里工作正常,在怪异模式下不能用。这个hack也被IE8的兼容模式(相当于IE7的标准模式)所支持。和星号HTML hack一样,它也使用了有效的CSS。
子选择器hack
(适用于IE6及以下版本)
IE6和早期的版本不支持“子选择器”(>),利用这个我们可以为其它浏览器指定特别的规则。举例来说,这个规则可以让段落文字在firefox 变成蓝色,但在IE7之前的版本里却不能。
html > body p { color: blue; }
虽然IE7增加了对子选择器的支持,但人们发现了新的hack可以把IE7也排除。当一个空的注释紧跟在子选择器的后面重复的时候,IE7会不识别后面的规则,就和较早版本的浏览器一样。
html >/**/ body p { color: blue; }
否定伪类HACK
(可区分IE和非IE)
IE的所有版本都不支持CSS3 : not() 伪类。有一种变异的HACK使用 : root 伪类,此伪类也同样不被IE识别。
.yourSelector {
color: black;
} /* IE中的值 */
html:not([dummy]) .yourSelector {
color: red;
} /* Safari, Opera and Firefox中的值 */
这种否定选择器接受任何类型作为参数,属性,通用,类或ID选择器,或者伪类。然后它会把后面的属性应用于所有不匹配此语法的元素上。
Body:empty hack
(适用于Firefox 2.0及以下版本)
:empty 伪类,在CSS3中介绍过的,用于选择不含任何内容的元素。然而,Geck0 1.8.1 和之后版本(应用在Firefox2.0.x 及之后的版本)错误地选择了body:empty 即使body元素包含有内容(一般情况都如此)。这样我们可以向Firefox 2.0x及以下版本提供专用的CSS规则。
/* 让 p 元素在 Firefox 2.0.x 及以下的版本中不显示 */
body:empty p {
display:none;
}
此HACK使用有效的CSS.
!Important 怪僻
(适用于IE8以下版本)
IE8及以下版本有一些和!imporant有关的怪僻,它允许一个赋值优先级更高。IE7及更早版本接受任意字符串替代important,并且会正常处理该值,而其它浏览器则会忽略。
/* 在IE8及以下版本下设文字为蓝色,其它浏览器中为黑色 */
body {
color: black;
color: blue !ie;
}
相似地,IE8及更早版本接受在!important声明后面的非字母符号,而其它浏览器会忽略它。
body {
color: black;
color: blue !important!;
}
IE6及以下版本有一个!important带来的问题,当在同一段代码块中同一元素的同一属性有了不同的值,本应结果是第二个值被第一个取代,但IE6及更低版本并不这么做。
/* 在IE6及更低版本中设文字为蓝色 */
body {
color: black !important;
color: blue;
}
所有这些HACK使用的是有效的CSS。
动态属性
在版本5至7,IE曾支持过一种语法适用于动态变化的CSS属性,有时被称为CSS表达式。动态属性通常混合其它HACK以补偿更早版IE中不支持的属性。
div {
min-height: 300px;
/* 在IE6中模拟 min-height */
_height: expression(document.body.clientHeight < 300 ? "300px" : "auto");
}
有条件的注释
有条件的注释只在Windows平台的IE上被识别,并从IE5起开始支持,它甚至可以区分版本5.0,5.5和6.0。
代码:
下面是一些“有条件的注释”,可以显示你正在使用的IE版本。如果你看不到,那么你用的不是IE:
<p><!--[if IE]>
According to the conditional comment this is Internet Explorer<br />
<![endif]-->
<!--[if IE 5]>
According to the conditional comment this is Internet Explorer 5<br />
<![endif]-->
<!--[if IE 5.0]>
According to the conditional comment this is Internet Explorer 5.0<br />
<![endif]-->
<!--[if IE 5.5]>
According to the conditional comment this is Internet Explorer 5.5<br />
<![endif]-->
<!--[if IE 6]>
According to the conditional comment this is Internet Explorer 6<br />
<![endif]-->
<!--[if IE 7]>
According to the conditional comment this is Internet Explorer 7<br />
<![endif]-->
<!--[if gte IE 5]>
According to the conditional comment this is Internet Explorer 5 and up<br />
<![endif]-->
<!--[if lt IE 6]>
According to the conditional comment this is Internet Explorer lower than 6<br />
<![endif]-->
<!--[if lte IE 5.5]>
According to the conditional comment this is Internet Explorer lower or equal to 5.5<br />
<![endif]-->
<!--[if gt IE 6]>
According to the conditional comment this is Internet Explorer greater than 6<br />
<![endif]-->
</p>
注意它的语法:
- gt: 高于
- lte:低于或相当
说明:
1.它们的基本结构和HTML注释一样(<!-- -->)。因此其它所有浏览器会把它们当作正常的注释忽略掉。
2.Windows IE里的程序可以识别这个特殊的<!--[if IE]>语法,处理if并解析此注释中的内容,就当作是正常的网页内容一样。
3.既然“有条件的注释”使用了HTML注释的结构,它们就只能被包含在HTML文件里,而不是CSS文件里。你可以把整个<link>标签放在“有条件的注释”里,指向一个指定的样式表。如下所示:
<link href="all_browsers.css" rel="stylesheet" type="text/css">
<!--[if IE]> <link href="ie_only.css" rel="stylesheet" type="text/css"> <![endif]-->
<!--[if lt IE 7]> <link href="ie_6_and_below.css" rel="stylesheet" type="text/css"> <![endif]-->
<!--[if !lt IE 7]><![IGNORE[--><![IGNORE[]]> <link href="recent.css" rel="stylesheet" type="text/css"> <!--<![endif]-->
<!--[if !IE]>--> <link href="not_ie.css" rel="stylesheet" type="text/css"> <!--<![endif]-->
IE8 hack
IE8不能识别“*”和“_”的css hack,所以我们可以使用"\9"来区分IE的各个版本。
color:#0000FF\9; ; /*ie6,ie7,ie8*/
*color:#FFFF00; /*ie7*/
_color:#FF0000; /*ie6*/
小结
使用HACK隐藏代码在浏览器更新时经常会导致页面不正常显示。许多HACK曾用于在IE6及更低版本中隐藏CSS,但在版本7下不再工作,因为IE改进了对CSS 标准的支持。微软的IE开发小组曾要求人们使用有条件的注释,代替使用hack。
##########################
滤镜
例子
<style>
.btn-danger {
color: #ffffff;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
background-color: #da4f49;
*background-color: #bd362f;
background-image: -moz-linear-gradient(top, #ee5f5b, #bd362f);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ee5f5b), to(#bd362f));
background-image: -webkit-linear-gradient(top, #ee5f5b, #bd362f);
background-image: -o-linear-gradient(top, #ee5f5b, #bd362f);
background-image: linear-gradient(to bottom, #ee5f5b, #bd362f);
background-repeat: repeat-x;
border-color: #bd362f #bd362f #802420;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffee5f5b', endColorstr='#ffbd362f', GradientType=0);
filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
}
</style>
<input type=button class="btn-danger" value="ddddddddd">
filter : progid:DXImageTransform.Microsoft.AlphaImageLoader
说明:
在对象容器边界内,在对象的背景和内容之间显示一张图片。并提供对此图片的剪切和改变尺寸的操作。如果载入的是PNG(Portable Network Graphics)格式,则0%-100%的透明度也被提供。
语法:
filter : progid:DXImageTransform.Microsoft.AlphaImageLoader ( enabled=bEnabled , sizingMethod=sSize , src=sURL )
enabled: 可选项。布尔值(Boolean)。设置或检索滤镜是否激活。
true:默认值。滤镜激活。
false:滤镜被禁止。
sizingMethod: 可选项。字符串(String)。设置或检索滤镜作用的对象的图片在对象容器边界内的显示方式。
crop:剪切图片以适应对象尺寸。
image:默认值。增大或减小对象的尺寸边界以适应图片的尺寸。
scale:缩放图片以适应对象的尺寸边界。
IE4.0以上支持的滤镜属性表
滤镜效果 描述 :
Alpha 设置透明度
Blru 建立模糊效果
Chroma 把指定的颜色设置为透明
DropShadow 建立一种偏移的影象轮廓,即投射阴影
FlipH 水平反转
FlipV 垂直反转
Glow 为对象的外边界增加光效
Grayscale 降低图片的彩色度
Invert 将色彩、饱和度以及亮度值完全反转建立底片效果
Light 在一个对象上进行灯光投影
Mask 为一个对象建立透明膜
Shadow 建立一个对象的固体轮廓,即阴影效果
Wave 在X轴和Y轴方向利用正弦波纹打乱图片
Xray 只显示对象的轮廓
滤镜实用:
滤镜实用:
哀悼日,各网站页面全部用黑白色,用以下滤镜!!
为方便站点哀悼,特提供css滤镜代码,以表哀悼。以下为全站CSS代码。
html { filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); }
使用方法:这段代码可以变网页为黑白,将代码加到CSS最顶端就可以实现素装
如果网站没有使用CSS,可以在网页/模板的HTML代码和 之间插入:
html{filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);}
<>
有一些站长的网站可能使用这个css 不能生效,是因为网站没有使用最新的网页标准协议
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
http://www.w3.org/1999/xhtml">
请将网页最头部的替换为以上代码。
有一些网站FLASH动画的颜色不能被CSS滤镜控制,可以在FLASH代码的和之间插入:
最简单的把页面变成灰色的代码是在head 之间加
html {
FILTER: gray
}
##############################################