CSS个人小结

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
}
##############################################