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

程序员文章站 2022-05-24 20:22:35

...

传统页面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

css入门小案例

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;
}