div+css入门知识_html/css_WEB-ITnose

传统页面table来布局和显示数据
缺点：
 1、显示样式和数据是绑定在一起的
 2、布局的时候，灵活度不高。
 3、一个页面可能会有大量的

元素，代码就会冗余
 4、增加了带宽（200字节*2000000*30=？）。
 5、搜索引擎不喜欢这样的布局。
优点：
 1、理解起来比较简单
 2、不同的浏览器，看到的效果一般是相同的。
 3、用于显示数据还是非常好的。
div+css
基本思想：数据和样式要分离
div（区段）数据
css文件，制定数据应当怎样显示。
总结，div+css是一种目前比较流行的网页布局技术
div来存放需要显示的数据（文字，图表...）；css就是用来指定怎样显示，从而做到数据和显示相互分离的效果。
div是用于存放内容（文字，图片，元素）的容器。
css是用于指定放在div中的内容如何显示，包括这些内容的位置和外观。
 举例：
 my.css
 .style{
    /*宽度*/
    width：400px;
    height:300px;/*一定要写一个分号*/
    background-color:silver;
    border:1px solid red;
    margin-left:400px;
    margin-top:250px;
    padding-top:20px;
    padding-left:40px;
 }

 demo.html
 
 

 
   
   
   
   
   

      
   

 
 
div+css的优势
要深刻理解div+css的优越性，我们不得不提到网页设计的三个历史时期table,table+css,div+css
①table网页设计：内容和样式（外观和布局）混合
②table+css网页设计：table布局，css指定外观
③div+css网页设计：div放内容，css指定样式（外观和布局），内容和样式彻底分离。
 /*.s1用术语 类选择器*/
 .s1
 {
  color:green;
  font-size:30px;
 }
 .s2
 {
 color:yellow;
  font-size:12px;
 }
 .s3
 {
 color:blue;
 font-style:italic;
 }
 .s4
 {
 color:green;
 font-weight:bold;
 }
 .s5
 {
 color:#9c3131;
 text-decoration:underline;
 }