网页的信息结构:结构 行为 表示 以及对样式的检索修改

CSS-DOM
主要内容 ：

1.style属性的设置。 

2.如何检索样式。

3.如何改变属性

网页的三层信息结构为： 1.结构层 2.行为层 2.表示层

结构层： 由 HTML和XHTML 之类的标记语言负责创建。

例：

<p>由我以及其他标签来构建页面的内容</p>

表示层：由CSS负责完成。描述页面内容应该如何呈现。
例：

p{
  color:grey;
  font-family:"Arial",sans-serif;
}

行为层：负责内容应该如何响应这一问题。

例：

var paras=document.getElementsByTagName("p")

for(var i=0;i<paras.length;i++){
   para[i].onclick=fouction(){
     alert("Please click me.")
  }
}

使用HTML去构建文档结构，使用css设置文本样式，使用Dom脚本去实现文档的行为。

style 属性 （element.style.property）

内嵌式设置属性

检索标签属性

设置标签属性

<p id="exam";style="color:grey;font-family:'Arial',sans-serif">内嵌设置标签的样式</p>

<script>
window.onload=function(){
  var para=document.getElementId("exam");
  alert(typeof para.nodeName);   //输出nodeName的格式为"string"
  alert(typeof para.style);      //输出style的形式为"object"
  alert(para.style.color)        //输出字体的颜色为:grey 
  para.style.color=red;          //修改文本的颜色
  alert(para.style.color)        //输出字体的颜色为： red
}
</script>

使用DOM脚本设置样式

css声明样式有三种方法

//第一种 使用标签元素声明样式

p{

  font-size:1em;

}

//第二种 为含有特定class属性的元素独立声明样式

.fineprint{
  font-size:1.8em;
}

//第三种 是为独一无二的id属性的元素声明样式
#intor{
  font-size:2em;
}