本篇介紹CSS selectors的Type selector(元素選擇器)的用法。
Type selector使用HTML元素名稱來選取指定的HTML元素。
例如下面範例在<style>...</style>
中(即內部樣式表(Internal style sheet))以type selector選擇的要套用CSS樣式的HTML元素為<div>
,<h1>
,<p>
。
<!DOCTYPE html>
<html>
<head>
<style>
div {
background-color: pink;
}
h1 {
background-color: orange
}
p {
background-color: yellow;
}
</style>
</head>
<body>
<div>
<h1>區塊一標題</h1>
<p>區塊一段落文字</p>
</div>
<div>
<h1>區塊二標題</h1>
<p>區塊二段落文字</p>
</div>
</body>
</html>
在瀏覽器打開如下。
注意type selector所選的HTML元素為該HTML文件中所有符合的HTML元素。例如上例中不論是區塊一還是區塊二的<div>
底色都是粉紅色(pink)。
參考:
沒有留言:
張貼留言