div+css(1)

1.div是用于存放内容（文字，图片，元素）的容器。

2.css（层叠样式表单）适用于指定放在div中的内容如何显示，包括这些内容的位置和外观。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> New Document </title>
 </head>

 <body>

  <div class="style1">
  <table>
  <tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
  <tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
  <tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
  <tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
  </table>

  </div>
 </body>
</html>

.style1{
width:300px;
height:200px;
border:1px solid red;
margin:50px,0px,0px,200px;
}
.style1 table{
width:298px;
height:180px;
border:1px solid black;
}
.style1 table tr{
border:1px solid black;
}

css的必要性：

使用span元素的基本语法：

<元素名 style="属性名：属性值；属性名：属性值2"/>

<span style="font-size:30px;color:blue;">栏目一</span>

元素可以是HTML里面的任意元素：

属性名：属性值要参考文档 w3c组织给出的文档。

css滤镜的应用：

<style type="text/css">
/*a:link means picture is gray*/
a:link img {
filter:gray;
}
/*a:hover means  while mouse stop on the picture，change to RGB*/
a:hover img {
filter:gray;
}
</style>

 <body>
  <span style="font-size:30px;color:blue;">栏目一</span><p>
   <a href="#"><img src="girl0.jpg"/></a>
 </body>
</html>

css的选择器：

类选择器的基本语法：

.类选择其名{

属性名：属性值；

}

id选择器的基本语法：

#id选择器名{

属性名：属性值；

}

在html文件中如果要引用id选择器，则

<元素 id='id选择器的名称' ></元素>

html的选择器：

body{

color:orange;

}

当一个元素同事被id选择器，类选择器，html选择器，优先级是：

id>类>html选择器

/*delete the underline and set the color*/
a:link {
color:black;
text-decoration:none;
}
/*while the mouse stop on the picture,show the underline*/
a:hover {
text-decoration:underline;
}
</style>

 <link rel="stylesheet" href="test.css" type="text/css"/>
 <body>
  <span style="font-size:30px;color:blue;">栏目一</span><p>
   <a href="#"><img src="girl0.jpg"/></a>
   <a href="#">goto sohu</a>
 </body>
</html>