在HTML網頁可使用區塊元素(Division element)<div>
來定義區塊。
<div>
元素本身並無特殊意義,也不帶特殊的樣式效果,其用途是把網頁中的內容畫分成不同區塊。<div>
最常做為容器來包裹其他的HTML元素,然後搭配CSS樣式表為每個區塊提供所需的樣式效果。
先來看看<div>
的原始效果。
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div>ABC</div>
</body>
</html>
在瀏覽器開啟畫面如下
使用Chrome開發人員工具觀察,可以看到<div>
的原始樣式如下,只有display:block
區塊樣式而以。
div {
display: block;
}
下面的HTML文件中,使用<div>
將兩個標題(<h1>
)及所屬的段落分為兩個區塊。然後每個區塊中的段落(<p>
)再用<div>
包裹為一個區塊。
如此在網頁排版或樣式調整時,就能直接操作<div>
對不同區塊進行修改,而不用修改特定HTML標籤原有的CSS。
division.html
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div>
<h1>區塊一標題</h1>
<div>
<p>區塊一段落文字</p>
</div>
</div>
<div>
<h1>區塊二標題</h1>
<div>
<p>區塊二段落文字</p>
</div>
</div>
</body>
</html>
顯示效果如下。由於<div>
本身不帶樣式,且這邊也沒加上額外的CSS樣式,因此顯示結果與沒有使用<div>
包裹時相同。
接著幫外層的<div>
加上不同的底色。這邊使用CSS selectors(CSS選擇器)的ID selector(ID選擇器)修改最外兩個<div>
的底色。
第一個<div>
,也就是id
屬性標為first
的底色改成黃色(yellow);
第二個<div>
,也就是id
屬性標為second
的底色改成橘色(orange)。
division.html
<!DOCTYPE html>
<html>
<head>
<style>
#first {
background-color: yellow;
}
#second {
background-color: orange;
}
</style>
</head>
<body>
<div id="first">
<h1>區塊一標題</h1>
<div>
<p>區塊一段落文字</p>
</div>
</div>
<div id="second">
<h1>區塊二標題</h1>
<div>
<p>區塊二段落文字</p>
</div>
</div>
</body>
</html>
顯示效果如下。
從以上的簡單範例可以得知,<div>
適合用來對HTML文件中多個元素組成的區塊進行CSS的套用。
參考:
沒有留言:
張貼留言