<h2 CSS 偽類 (Pseudo classes) 實例</h2 <h3 CSS 實例</h3 CSS 背景實例 CSS 文本實例 CSS 字體(font)實例 CSS 邊框(border)實例 CSS 外邊距 (margin) 實例 CSS 內邊距 (padding) 實例 CSS 列表實例....
CSS 偽類 (Pseudo-classes) 實例
CSS 實例
- CSS 背景實例
- CSS 文本實例
- CSS 字體(font)實例
- CSS 邊框(border)實例
- CSS 外邊距 (margin) 實例
- CSS 內邊距 (padding) 實例
- CSS 列表實例
- CSS 表格實例
- 輪廓（Outline)實例
- CSS 尺寸 (Dimension) 實例
- CSS 分類 (Classification) 實例
- CSS 定位 (Positioning) 實例
CSS 偽類 (Pseudo-classes)實例- CSS 偽元素 (Pseudo-elements)實例
01超鏈接
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>01超鏈接</title>
<style type="text/css">
body {
background-color: #99CCFF;
}
a:link {
color: #CCCCCC;
}
a:visited {
color: #666666;
}
a:hover {
color: #ffffff;
}
a:active {
color: #999999;
}
</style>
</head>
<body>
<p><b><a href="https://www.baidu.com/" target="_blank">百度首頁</a></b></p>
<p><b>註釋：</b>在 CSS 定義中，a:hover 必須位於 a:link 和 a:visited 之後，這樣才能生效！</p>
<p><b>註釋：</b>在 CSS 定義中，a:active 必須位於 a:hover 之後，這樣才能生效！</p>
<img src="love.jpg">
</body>
</html>
02超鏈接2
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>02超鏈接2</title>
<style type="text/css">
body {
background-color: #99ccff;
}
a.one:link {color: #666;}
a.one:visited {color: #333;}
a.one:hover {color: #ffffff;}
a.two:link {color: #666;}
a.two:visited {color: #333;}
a.two:hover {font-size: 150%;}
a.three:link {color: #666;}
a.three:visited {color: #333;}
a.three:hover {background-color: #CCCCCC;}
a.four:link {color: #666;}
a.four:visited {color: #333;}
a.four:hover {font-family: monospace;}
a.five:link {color: #666;text-decoration: none;}
a.five:visited {color: #333;text-decoration: none;}
a.five:hover {text-decoration: underline;}
</style>
</head>
<body>
<p><b><a class="one" href="https://www.baidu.com/" target="_blank">改變顏色</a></b></p>
<p><b><a class="two" href="https://www.baidu.com/" target="_blank">改變字體大小</a></b></p>
<p><b><a class="three" href="https://www.baidu.com/" target="_blank">改變背景顏色</a></b></p>
<p><b><a class="four" href="https://www.baidu.com/" target="_blank">As a man thinketh in his heart so is he！改變字體</a></b></p>
<p><b><a class="five" href="https://www.baidu.com/" target="_blank">改變文本裝飾</a></b></p>
</body>
</html>
03超鏈接：:focus 的使用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>03超鏈接：:focus 的使用</title>
<style type="text/css">
input:focus {
background-color: #ccc;
}
</style>
</head>
<body>
<form>
<p>First name:
<input type="text" />
</p>
<p>Last name:
<input type="text" />
</p>
<p>
<input type="submit" value="Submit" />
</p>
</form>
</body>
</html>
04 :first-child（首個子對象)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>04:first-child（首個子對象）</title>
<style type="text/css">
p:first-child {
color: green;
}
li:first-child {
text-transform: uppercase;
}
</style>
</head>
<body>
<div>
<p>These are the necessary steps:</p>
<ul>
<li>Intert Key</li>
<li>Turn key <strong>clockwise</strong></li>
<li>Push accelerator</li>
</ul>
<p>Do <em>not</em> push the brake at the same time as the accelerator.</p>
</div>
</body>
</html>
05 :lang（語言)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>05 :lang（語言）</title>
<style type="text/css">
q:lang(no) {
quotes: "~" "~";
}
</style>
</head>
<body>
<p>:lang 偽類允許您為不同的語言定義特殊的規則。在下麵的例子中，在下麵的例子中，:lang 類為帶有值為 "no" 的 lang 屬性的 q 元素定義引號的類型：</p>
<p>一些文本 <q lang="no">段落中的引用</q> 一些文本。</p>
</body>
</html>
CSS 偽類 (Pseudo-classes) 總結
