10个你未必知道的CSS技巧与14种css&div中基本滤镜介绍

1.CSS字体属性简写规则

通常用CSS设定字体属性是这样作的：

font-weight:bold;
font-style:italic;
font-varient:small-caps;
font-size:1em;
line-height:1.5em;
font-family:verdana,sans-serif;

但也能够把它们所有写到一行上去：

font: bold italic small-caps 1em/1.5em verdana,sans-serif;

真不错！只有一点要提醒的：这种简写方法只有在同时指定font-size和font-family属性时才起做用。并且，若是你没有设定font-weight, font-style, 以及 font-varient ，他们会使用缺省值，这点要记上。

2. 同时使用两个类

通常只能给一个元素设定一个类（Class），但这并不意味着不能用两个。事实上，你能够这样：

<p class="text side">... </p>

同时给P元素两个类，中间用空格格开，这样全部text和side两个类的属性都会加到P元素上来。若是它们两个类中的属性有冲突的话，后设置的起做用，即在CSS文件中放在后面的类的属性起做用。

补充：对于一个ID，不能这样写 <p id="text side">... </p>也不能这样写

3. CSS border的缺省值

一般能够设定边界的颜色，宽度和风格，如：
border: 3px solid #000
这位把边界显示成3像素宽，黑色，实线。但实际上这里只须要指定风格便可。

若是只指定了风格，其余属性就会使用缺省值。通常地，Border的宽度缺省是medium，通常等于3到4个像素；缺省的颜色是其中文字的颜色。若是这个值正好合适的话，就不用设那么多了。

4. CSS用于文档打印

许多网站上都有一个针对打印的版本，但实际上这并不须要，由于能够用CSS来设定打印风格。

也就是说，能够为页面指定两个CSS文件，一个用于屏幕显示，一个用于打印：

<link type="text/css" rel="stylesheet" href="stylesheet.css" media="screen" /> <link type="text/css" rel="stylesheet" href="printstyle.css" media="print" />

第1行就是显示，第2行是打印，注意其中的media属性。

但应该在打印 CSS中写什么东西呢？你能够按设计普通CSS的方法来设定它。设计的同时就能够把这个CSS设成显示CSS来检查它的效果。也许你会使用 display: none 这个命令来关掉一些装饰图片，再关掉一些导航按钮。要想了解更多，能够看“打印差别”这一篇。

5. 图片替换技巧

通常都建议用标准的HTML来显示文字，而不要使用图片，这样不但快，也更具可读性。但若是你想用一些特殊字体时，就只能用图片了。

好比你想整个卖东西的图标，你就用了这个图片：
<h1> <img src="widget-image.gif" alt="Buy widgets" /> </h1>
这固然能够，但对搜索引擎来讲，和正常文字相比，它们对alt里面的替换文字几乎没有兴趣这是由于许多设计者在这里放许多关键词来骗搜索引擎。因此方法应该是这样的：
<h1>Buy widgets </h1>
但这样就没有特殊字体了。要想达到一样效果，能够这样设计CSS：
h1 { background: url(widget-image.gif) no-repeat; height: image height text-indent: -2000px }

注意把image height换成真的图片的高度。这里，图片会看成背景显示出来，而真正的文字因为设定了-2000像素这个缩进，它们会出如今屏幕左边2000点的地方，就看不见了。但这对于关闭图片的人来讲，可能所有看不到了，这点要注意。

6. CSS box模型的另外一种调整技巧

这个Box模型的调整主要是针对IE6以前的IE浏览器的，它们把边界宽度和空白都算在元素宽度上。好比：

#box { width: 100px; border: 5px; padding: 20px }

这样调用它：
<div id="box">... </div>
这时盒子的全宽应该是150点，这在除IE6以前的IE浏览器以外的全部浏览器上都是正确的。但在IE5这样的浏览器上，它的全宽还是100点。能够用之前人发明的Box调整方法来处理这种差别。

但用CSS也能够达到一样的目的，让它们显示效果一致。

#box { width: 150px } #box div { border: 5px; padding: 20px }

这样调用：
<div id="box"> <div>... </div> </div>
这样，无论什么浏览器，宽度都是150点了。

7. 块元素居中对齐

若是想作个固定宽度的网页而且想让网页水平居中的话，一般是这样：

#content { width: 700px; margin: 0 auto }

你会使用 <div id="content"> 来围上全部元素。这很简单，但不够好，IE6以前版本会显示不出这种效果。改CSS以下：

body { text-align: center } #content { text-align: left; width: 700px; margin: 0 auto }

这会把网页内容都居中，因此在Content中又加入了
text-align: left 。

8. 用CSS来处理垂直对齐

垂直对齐用表格能够很方便地实现，设定表格单元 vertical-align: middle 就能够了。但对CSS来讲这没用。若是你想设定一个导航条是2em高，而想让导航文字垂直居中的话，设定这个属性是没用的。

CSS方法是什么呢？对了，把这些文字的行高设为 2em：line-height: 2em ，这就能够了。

9. CSS在容器内定位

CSS的一个好处是能够把一个元素任意定位，在一个容器内也能够。好比对这个容器：

#container { position: relative }

这样容器内全部的元素都会相对定位，能够这样用：
<div id="container"> <div id="navigation">... </div> </div>
若是想定位到距左30点，距上5点，能够这样：

#navigation { position: absolute; left: 30px; top: 5px }

固然，你还能够这样：
margin: 5px 0 0 30px
注意4个数字的顺序是：上、右、下、左。固然，有时候定位的方法而不是边距的方法更好些。

10. 直通到屏幕底部的背景色

在垂直方向是进行控制是CSS所不能的。若是你想让导航栏和内容栏同样直通到页面底部，用表格是很方便的，但若是只用这样的CSS：

#navigation { background: blue; width: 150px }

较短的导航条是不会直通到底部的，半路内容结束时它就结束了。该怎么办呢？

不幸的是，只能采用欺骗的手段了，给这较短的一栏加上个背景图，宽度和栏宽同样，并让它的颜色和设定的背景色同样。

body { background: url(blue-image.gif) 0 0 repeat-y }

此时不能用em作单位，由于那样的话，一旦读者改变了字体大小，这个花招就会露馅，只能使用px。

 

css&div中14种基本滤镜介绍

一.alpha（通道）{ 
      filter:alpha(opacity=50);          //通道滤镜，用来设置透明度 
} 

二.chroma（透明）{ 
      filter:chroma(color=000000);      //透明色，用来设置某个颜色透明 
} 

三.dropshadow（下落阴影）{ 
      filter:dropshadow(color=#ffb6aa,  offx=6,offy=4,positive=true); 
}                        
   //为对象设置下落阴影效果，positive-true为非透明，false为透明 

四.shadow（阴影）{ 
      filter:shadow(color=#ccccff,direction=135); 
} 
                  //拖尾巴的阴影效果，指定方向创建连续投影 

五.flip（翻转）{ 
      filter:fliph flipv; 
} 

           //图像翻转，fliph水平翻转，flipv垂直翻转 

六.glow（光晕）{ 
      filter:glow(color=#ff0000,strength=15); 
} 

          //文字或物体发光特效，使对象突出 

七.gray（灰度）{ 
      filter:gray; 
} 

               //将彩色变为黑白色 

八.invert（反色）{ 
      filter:invert; 
} 

 //将对象的可视化属性所有翻转，包括色彩、饱和度、亮度值等（至关于底片 

效果） 

九.mask（遮罩）{ 
      filter:mask(color=#00000ff); 
} 

//为对象创建一个覆盖其表面的膜，实现颜色框架效果 

十.xray（X射线）{ 
      filter:xray; 
} 

//极为对象添加X光照射效果，注意与gray的区别 

⒒wave{ 
      filter:wave(add=1叠加源图像0不叠加,freq=产生完整波纹的个 

数,lightstrength=生成的波纹加强光的效果1-100,phase=正弦波开始的偏移 

量,strength=振幅的大小); 
} 
                               //波浪效果 

⒓.blur{ 
      filter:progid:dximagetransform.microsoft.blur 

(pixelradius=6,makeshadow=false,shadowopacity=0.1,enable=false); 
}

⒔.motionblur{ 
      filter:progid:dximagetransform.microsoft.motionblur 

(add=true,direction=45,strength=20); 
} 

             //模糊与运动模糊 

⒕.emboss{ 
      filter:progid:dximagetransform.microsoft.emboss(bias=0.4); 
} 
.engrave{ 
      filter:progid:dximagetransform.microsoft.engrave(bias=0.4); 
}

           //凹陷浮雕与凸起浮雕 


以上为css&div中的14种基本滤镜，此外，还有须要配合Javascript等脚本语言 

的高级滤镜。