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.表現和結構分離，在團隊開發中更容易分工合作而減少互相關聯性