学步园

我们就以下面这段代码作为参考：

看得懂吗？没关系，下面解释css的基本语法：

标记选择器：

语法：

tagName { }

例句：

li    { font-weight:normal;}

实例：

类型选择器：

语法：

tag.className   {    }

例如：

<div class="expand">

应用样式：

div.expand  {   }

注：tagName  (div)是可以省略的。

id选择器：

与类型选择器相似，id选择器使用"#"代替".".

语法如下：

tagName#idName  {  }

实例：

层次选择器：

继承：

子结点继承父节点的样式

body  { }

就近原则：

当定义重复时候，后出现的定义会覆盖前面的定义，层次选择器除外。

认识css中的盒模型：

div#div1

{

     width:100px; //内容宽度

     border-width:2px;//边框宽度

    padding:5px;//内边距宽度

    margin:5px;//外边距宽度

}

使用JavaScript控制css

滤镜：

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod="crop",src="2.jpg");

crop是将容器剪切至图片大小，image是按实际大小，scale是拉伸到容器大小；

filter : progid:DXImageTransform.Microsoft.gradient(gradientType=1,startColorStr=#0000ff,endColorStr=#ffffff);

gaadientType为1表示水平向左，为0表示垂直向下，起始颜色，结束颜色；

filter : progid:DXImageTransform.Microsoft.Alpha(style=1,opacity=100,finishOpacity=0);

style表示透明度，0表示完全透明，1表示线性透明，2表示发散渐变透明，3表示放射渐变透明；透明度，结束透明；

filter : progid:DXImageTransform.Microsoft.DropShadow (color=#000000 , offX=2 , offY=2 , positive=true);

color表示阴影的颜色，水平，垂直，positive=true表示取消透明部分的阴影

filter : progid:DXImageTransform.Microsoft.Shadow(color=#000000,direction=135,strength=5);

阴影颜色，角度方向，拉伸长度

filter : progid:DXImageTransform.Microsoft.Glow(color=#ff0000 , strength=2);

发光颜色，发光强度；

filter:progid:DXImageTransform.Microsoft.RevealTrans(duration=12,transition=20)

过滤间隔，转换样式；