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时就得使用。