Div + css 基本思想：
数据和样式分离。Div + css是一种目前比较流行的网页布局技术，div来容纳需要显示的数据，需要显示的数据可能是数据、图表。Css用来指定怎样显示，从而做到数据与显示相分离的效果。原理图如下：
Div元素是用来为html文档内大块的内容提供结构和背景。Css是cascading style sheets（层叠样式表）的缩写，用来表现html或xml等文件式样的计算机语言。
可以这样理解div+css：
Div是用于存放内容的容器
Css适用于指定放在div中的内容如何显示，包括这些内容的位置和外观。
Css使用的基本语法
选择器{
属性1：属性值
属性2： 属性值
}
案例1：
<span style="color:#000000;"><html> <!--css部分可以单写一个文件--> <link rel = "stylesheet" type = "text/css" href = "demo2.css"> <body> <!--span元素通常用于存放小块内容--> <span class = "s1">栏目一</span> <span class = "s1">栏目二</span> <span class = "s1">栏目三</span> <span class = "s1">栏目四</span> <span class = "s1">栏目五</span> </body> </html></span>
/*.s1类选择器*/
.s1{
color : green;
font-size : 30px;
font-style:italic;
text-decoration : underline;
}
.s2{
color :yellow;
font-size : 12px;
}
.s3{
color :blue;
font-style:italic;
}
.s4{
color: green;
font-weight: bold;
}
.s5{
color : black;
}
Css滤镜技术：
所有的图片变成黑白色。
案例：
所有图片变成黑白色，当鼠标放上时变正常;
<html>
<head>
<!--如何把css直接嵌入到html文件(内联css)-->
<style type = "text/css">
a:link img
{
filter:gray;
}
a:hover img
{
filter:"";
}
</style>
</head>
<body>
<a href= "2"> <img src ="me.jpg"></a>
<a href= "2"> <img src ="图片1.jpg"></a>
</body>
</html>