div元素是用来为html文档内大声(block-level)的内容提供结构和背景的元素.
css是Cascading Style Sheets(层叠样式表单)的缩写,是一种用来表现html或xml等文件样式的计算机语言.
dic+css是网站标准(或称"web标准"),通常为了说明与html网页设计语言中的表格(table)定位方式的区别.
简单来说:
div是区块,是用来存放内容(文字,图片,表格等)的容器.
css的作用是用来规定div和div中的内容的位置和样式(大小,颜色,背景,列表的样式等)
div+css结合就可以做到把内容和样式分离.
用法:
在head标签中间新建一个style的标签,里面写各种属性及属性值.
这里先使用类选择器来完成.
类选择器的语法是在head标签中间加下面的代码:
<style type="text/css">
.类选择器{
属性名:属性值;
属性名:属性值;
属性名:属性值;
}
</style>
代码如下:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>DIV+CSS</title>
<style type="text/css">
.div1{
width:300px;
height:300px;
background-color:silver;
}
</style>
</head>
<body>
<div class="div1">
hello world!
</div>
</body>
</html>
style里面的样式要与div里的类名一样,才能起作用.
用浏览器执行这段代码,效果如下：
将文字居中，加属性：text-align:center;
将文字上下居中，加属性：line-height:300px;
再把字体调大一点，加属性：font-size:30px;
修改后的代码如下：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>DIV+CSS</title>
<style type="text/css">
.div1{
width:300px;
height:300px;
background-color:silver;
text-align:center;
line-height:300px;
font-size:30px;
}
</style>
</head>
<body>
<div class="div1">
hello world!
</div>
</body>
</html>
刷新浏览器，效果如下：
再为这段代码添加"margin-left"和"margin-top"这两个属性．
修改后的代码如下：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>DIV+CSS</title>
<style type="text/css">
.div1{
width:300px;
height:300px;
background-color:silver;
text-align:center;
line-height:300px;
font-size:30px;
margin-left:300px;
margin-top:100px;
}
</style>
</head>
<body>
<div class="div1">
hello world!
</div>
</body>
</html>
刷新浏览器后，效果如下：
可以看到，中间的字体处在浏览器的中间位置，而且字体距离页面的顶部还有一定的距离，
.
div+css的优势：
1.符合w3c的标准
2.搜索引擎更加友好
3.样式的调整更加方便．内容和样式的分离，使页面和样式的调整变得更加方便．
4.css的极大优势表现在简洁的代码.对于一个大型网站来说,可以节省大量带宽;而且,搜索引擎喜欢清洁的代码．
5.表现和结构分离，在团队开发中更容易分工合作而减少相互关联性