在所有的产品设计中，选择最适用的工具去解决问题是最基本的原则。

①使用（X）HTML去搭建文档的结构。

②使用CSS 去设置文档的呈现效果。

③使用DOM脚本去实现文档的行为。

文档中的每个元素都是一个对象，每个元素都有一个style属性，它们是一个对象。

样式都存放在style对象的属性里：element.style.property;

使用style对象的color属性：element.style.color;

减号和加号之类的操作符是保留支付，不允许用在函数或者变量的名字里。这同时意味着它们也不能用在方法或属性的名字里。当你需要引用一个中间带减号的CSS属性的时候，DOM要求你用驼峰命名法。CSS属性font-family变为DOM属性fontFamily：element.style.fontFamily;

内嵌样式：通过style属性获取样式有很大的局限性。style属性只能返回内嵌样式。只有把CSS style属性插入到标记里，才可以用DOM style属性去查询那些信息。

在外部样式表里声明的样式不会进入style对象，style对象只包含在HTML代码里用style属性声明的样式。

style对象可以用来更新样式：

element.style.property=value;

style对象的属性值永远是一个字符串。

style对象的属性的值必须放在引号里，单引号或双引号均可。

只要有可能，最好选用CSS为文档设置样式。

如果想要改变某个元素的呈现效果，使用CSS；如果想要改变某个元素的行为，使用DOM；

className属性：className属性是一个可读/可写的属性，凡是元素节点都有这个属性。

可以用className属性得到一个元素的class属性：element.className;

用className属性和赋值操作符设置一个元素的class属性：element.className=value;

把一个非常具体的东西改进为一个较为通用的东西的过程叫做抽象。

CSS-DOM