DIV+CSS的介紹
1、div+css是什麼
div元素是用來為HTML文件內大塊（block-level）的內容提供結構和背景的元素。
css（Cascading style Sheets層疊祥式表單）它是一種用來表現HTML或XML等檔案式樣的計算機語言.
div+css是網站標準（或稱WEB標準"）中常用術語之一，通常為了說明與HTML網頁設計語言中的表格（table）定位方式的區別，因為XHTML網站設計標準中，不再使用表格定值技術，而是採用DIV+css的方式實現各種定位。
我們可以簡單的這樣理解div+css:
div是用於存放內容(文字,圖片,元素）的容器，
css是用於指定放在div中的內容如何顯示,包括這些內容的位置和外觀。
原理圖：
案例：
建立test1.html檔案和my.css檔案
test1.html原始碼：
<html>
<!--引入my.css檔案-->
<head>
<link href="my.css" type="text/css" rel="stylesheet"/>
</head>
<body>
<div class="style1">
<table>
<tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
<tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
<tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
<tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
</table>
</div>
</body>
</html>
my.css原始碼:
/*類選擇器*/
.style1{
width:300px;
height:200px;
border:1px solid red;
margin:150px 0px 0px 200px;/*決定table的位置*/
}
/*子選擇器*/
.style1 table{
width:298px;
height:180px;
border:1px solid black;
}
.style1 table td{
border:1px solid black;
text-align:center;/*使table內的文字居中*/
}
案例：
使用<span>元素來編寫：
使用ide開發css(myeclipse),因為它能給我們提示。
css1.html原始碼：
<html>
<body>
<span style="font-size:50px;colcor:blue;">欄目一</span></br>
<span style="font-size:40px;colcor:red;font-style:italic;">欄目二</span></br>
<span style="font-size:30px;colcor:green;font-weight:lighter;">欄目三</span></br>
<span style="font-size:20px;colcor:pink;font-weight:lighter;">欄目四</span></br>
<span style="font-size:10px;colcor:black;font-weight:lighter;">欄目五</span></br>
</body>
</html>
從使用span元素我們可以看到，css的基本語法
<元素名 style="屬性名1:屬性值1;屬性名2:屬性值2；" />
元素可以是html的任意元素，屬性名：屬性值 要參考w3c組織給出的文件
css分類：內部css 外部css
css有統一格式的作用
案例：
<style type="text/css">
.style1{
font-size:20px;
font-weight:bold;
font-style:normal;
color:red;
text-decoration:underline;
}
</style>
<body>
<span class="style1">欄目一</span></br>
<span class="style1">欄目二</span></br>
<span class="style1">欄目三</span></br>
<span class="style1">欄目四</span></br>
<span class="style1">欄目五</span></br>
</body>
案例：
如何實現網站的圖片全變為黑白色？（使用css的濾鏡技術）
<style type="text/css">
/*使用濾鏡*/
img{
filter:grag;
}
</style>
<body>
<img src="images/2.jpg" />
<img src="images/3.jpg" />
<img src="images/4.jpg" />
</body>
實現當滑鼠放在圖片上時圖片顯示原來的顏色
<style type="text/css">
/*使用濾鏡*/
a:link img{
filter:grag;
}
a:hover img{ /*滑鼠停在圖片上不顯示顏色，即原來的顏色*/
filter:"";
}
</style>
<body>
<a href="#"><img src="images/2.jpg" /></a>
<a href="#"><img src="images/3.jpg" /></a>
<a href="#"><img src="images/4.jpg" /></a>
</body>
css的三種選擇器
- 類選擇器，又叫class選擇器
- id選擇器
- html元素選擇器
- 萬用字元選擇器
選擇器是在css中建立，而在網頁頁面（html,jsp,php,asp.net）中使用。
類選擇器
.類選擇器名{
屬性名：屬性值；
...
}
id選擇器
#id選擇器名{
屬性名：屬性值；
}
test.css原始碼：
#style1{
font-size:20px;
font-weight:bold;
font-style:normal;
color:red;
text-decoration:underline;
}
test.html原始碼：
<body>
<span id="style1">欄目一</span></br>
</body>
注：在瀏覽器的頁面上使用鍵盤上的 F12 按鍵開啟除錯模式，就可以看到該網頁的組成標籤。