Day5
●div+css简介
Div元素是用来为HTML文档内大块的内容提供结构和背景的元素
CSS（Cascading style Sheets层叠样式表单）
它是一种用来表现HTML或XML等文件式样的计算机语言。
Div+css是网站标准中常用术语之一，通常为了说明与HTML网页设计语言中的表格（table）定位方式的区别，因为XHTML中不再使用表格定位技术，而是采用DIV+CSS的方式实现各种定位。
可以这样简单理解div+css：
Div是用于存放内容（文字、图片、元素）的容器。
Css是用于指定放在div中的内容如何显示，包括这些内容的位置和外观。
示意图如下：
快速体验案例：
test1.html:
<html>
<!--引入my.css文件-->
<head>
<title>test1</title>
<link href="my.css" type="text/css" rel="stylesheet"/>
</head>
<body>
<div class="style1">
<table>
<tr><td>12</td><td>12</td><td>12</td><td>12</td></tr>
<tr><td>12</td><td>12</td><td>12</td><td>12</td></tr>
<tr><td>12</td><td>12</td><td>12</td><td>12</td></tr>
<tr><td>12</td><td>12</td><td>12</td><td>12</td></tr>
</table>
</div>
</body>
</html>my.css:
/*类选择器*/
.style1{
width:300px;
height:200px;
border: 1px solid blue;
margin:0 auto;
}
/*父子选择器*/
/*级联选择器*/
.style1 table{
border:1px solid black;
width:298px;
height:198px;
}
.style1 table td{
border:1px solid black;
text-align:center;/*对齐方式*/
}
运行结果：
可见，html文件中并没有设置表格的宽、高等属性，其属性全部在css文件中制定。
●div+css的优势
网页设计的三个历史时期：
Table à table+cssà div+css
好处：
★符合w3c标准，微软等公司均为w3c的支持者
★HTML文件减少大量的table、tr、td标签，html变简洁
★内容和样式分离。-à可以实现复用！换肤功能轻松实现。
★符合搜索引擎的喜好：喜欢简洁的代码的网页，若内容太多，则不容易被搜索引擎定位搜索。-à滋生出一个新的职位：SEO（网页页面优化师）
★节约带宽
观点：div+css并不是要我们抛弃table，因为table在显示数据时，特别方便，因此在使用div+css时，该使用table时就得使用。
1908
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
