脚本化CSS

CSS复合属性

font-family,font-size,font-weight font:bold italic 24pt nelvetica;

font,border,margin,padding等都是复合属性

text-transform:uppercase 转换大写

column-count:把div元素中的文本划分成几列

-moz-column-count:3; /* Firefox */
-webkit-column-count:3; /* Safari and Chrome */
column-count:3;

重要的CSS样式属性

clip：rect(0,60px,20px,0) 裁剪图像区域

visibility: visible 可见 , hidden 不可见 , collpase 表格删除行或列，不会占据空间，默认hidden , inherit 从父元素继承visibility属性值

boder:dotten(点线) 1px black;

(盒模型)box-sizing： content-box (默认，绘制元素之外内边距和边框) | border-box (在已设定的宽度和高度内进行绘制) | inherit (继承)

当想以百分比形式为元素设置总体尺寸，又想以像素单位指定边框和内边距时，边框盒模型特别有用：

box-sizing:border-box;
                50%;
                padding:10px;
                border:solid black 1px;
/*加前缀  -webkit*/

calc()计算CSS的值 附详解地址：http://www.w3cplus.com/css3/how-to-use-css3-calc-function.html

特效：

Shake() 垂直或水平方向多次震动元素

//震动一个div
$( document ).click(function() {
  $( "#toggle" ).effect( "shake" );
});

addClass() 当动画样式改变时，为匹配的元素集合内的每个元素添加指定的 Class

.addClass( className [, duration ] [, easing ] [, complete ] )

.addClass( className [, options ] )

实例：添加 class "big-blue" 到匹配的元素。

$( "div" ).click(function() {
  $( this ).addClass( "big-blue", 1000, "easeOutBounce" );
});

blind() 百叶窗特效（Blind Effect）通过将元素包裹在一个容器内，采用"拉百叶窗"效果来隐藏或显示元素。

容器应用 overflow: hidden 时，高度的变化会影响到元素的可见性。

$( document ).click(function() {
  $( "#toggle" ).toggle( "blind" );
});

bounce() 反弹特效（Bounce Effect）反弹一个元素。当与隐藏或显示一起使用时，最后一次或第一次反弹会呈现淡入/淡出效果。

$( document ).click(function() {
  $( "#toggle" ).toggle( "bounce", { times: 3 }, "slow" );
});

easings () 动画的曲线图

Easing 函数指定动画在不同点上的行进速度。jQuery 核心带有两个 easings：一个是 linear，整个动画以一个不变的速度行进；另一个是 swing（jQuery 核心默认的 easing），行进速度在动画开始和结束时比在动画中间时稍慢。jQuery UI 提供了一些额外的 easing 函数，范围从摆动行为上的变化到定制特效，比如弹跳。

一些 easings 会在动画中产生负值。根据动画的不同属性，实际值可能为零。例如，您可以把 left 取为负值，但是不能把 height或 opacity 取为负值。

想要更好地理解一个 easing 如何影响一个动画，需多花时间研究方程图。请看下面所列出的 jQuery UI 中所有可用动画的曲线图。

.effect() 对一个元素应用动画特效。

.effect( effect [, options ] [, duration ] [, complete ] )

.effect() 方法对一个元素应用了一个命名的动画特效。许多特效也支持显示或隐藏模式，这些可通过 .show()、.hide() 和.toggle() 方法来完成。

实例：对一个 div 应用反弹特效（Bounce Effect）

$( document ).click(function() {
  $( "div" ).effect( "bounce", "slow" );
});

explode() 爆炸特效（Explode Effect）通过把元素裂成碎片来隐藏或显示一个元素

$( document ).click(function() {
  $( "#toggle" ).toggle( "explode" );
});

.hide() 使用自定义效果来隐藏匹配的元素。

.hide( effect [, options ] [, duration ] [, complete ] )

该插件扩展自 jQuery 内置的 .hide() 方法。如果 jQuery UI 未加载，调用 .hide() 方法不会直接失败，因为该方法在 jQuery 中存在。但是不会发生预期的行为。

实例：使用降落特效（Drop Effect）隐藏一个 div

$( "button" ).click(function() {
  $( "div" ).hide( "drop", { direction: "down" }, "slow" );
});

.switchClass() 当动画样式改变时，为匹配的元素集合内的每个元素添加和移除指定的 Class

.switchClass( removeClassName, addClassName [, duration ] [, easing ] [, complete ] )

.switchClass() 方法允许您在动画过渡中，添加 Class 的同时移除 Class

实例：添加 class "blue" 到匹配的元素，并从匹配的元素中移除 class "big"

$( "div" ).click(function() {
  $( this ).switchClass( "big", "blue", 1000, "easeInOutQuad" );
});

transfer() 把一个元素的轮廓转移到另一个元素

当尝试两个元素之间的可视化交互时非常有用。

转移的元素本身带有 class ui-effects-transfer，其他的样式需要由您来定义，比如添加背景或边框。

实例：在绿色元素上点击把它转移到另一个元素

<div class="green"></div>
<div class="red"></div>

div.green {
    width: 100px;
    height: 80px;
    background: green;
    border: 1px solid black;
    position: relative;
  }
  div.red {
    margin-top: 10px;
    width: 50px;
    height: 30px;
    background: red;
    border: 1px solid black;
    position: relative;
  }
  .ui-effects-transfer {
    border: 1px dotted black;
    background:white;
  }

$( "div" ).click(function() {
  var i = 1 - $( "div" ).index( this );
  $( this ).effect( "transfer", { to: $( "div" ).eq( i ) }, 1000 );
});

以上所有示例均来自此网址：http://www.runoob.com/jqueryui/ref-effects.html

以上所有特效都需要添加：

<link rel="stylesheet" href="//apps.bdimg.com/libs/jqueryui/1.10.4/css/jquery-ui.min.css">
<script src="//apps.bdimg.com/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>

easing 函数速查表地址：http://easings.net/zh-tw

classList

// 增加一个CSS类
myElement.classList.add("newClass");
// 删除一个CSS类
myElement.classList.remove("existingClass");
// 检查是否拥有一个CSS类
myElement.classList.contains("oneClass");
// 反转一个CSS类的有无
myElement.classList.toggle("anotherClass");

http://www.jb51.net/html5/159559.htm