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>