<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv = "content-type" content="text/html;charset=utf-8"/><!--設置編碼集 同時注意設置的編碼集方式要和保存時方式相同 save as -->
<!--引用外部樣式表-->
<link type="text/css" rel="stylesheet" href="mystyle.css"/>
<style>
/*css註釋用 * */
p{
color:red;
background-color:gray;
}
h1{
color:green;
}
h3{
color:red;
font-size:10;
background-color:gray;
}
div{
border:1px solid black;
}
</style>
</head>
<body>
<p>p元素</p>
<h1>h1元素</h1>
<h2>h2元素</h2>
<h3 style="color:green;font-size:10;">h3元素</h3>
<!--不同種類 樣式類型 class-->
<div class="s1">div</div>
<h4 class="s1">h4</h4>
<!--同一種下的細分 分類選擇器-->
<form>
<input type="text" class="txt"/>
</form>
<h5 class="txt">h5</h5><!--沒用css-->
<!--元素id選擇器-->
<span id="a11">我的訂單</span>
</body>
<a href="#">link1</a>
<div>
<a href="#">link</a>
<a href="#">link</a>
<a href="#">link</a>
<a href="#">link</a>
</div>
<div class="left">
<a href="#">link</a>
<a href="#">link</a>
<a href="#">link</a>
<a href="#">link</a>
</div>
<a href="#">鏈接文本</a>
<p style="width:50px;height:50px;border:1;overflow:scroll">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
<div style="width:200px;height:200px">
<div style="width:100px;height:100px;margin:30px">
<div style="width:50px;height:50px"></div>
</div>
</div>
</html>
/*只能定義樣式*/
h2
{
color:yellow;
font-size:10pt;
}
.s1{
border:1px solid red;
color:blue;
}
/*class*/
input.txt{
width:100px;
height:50px;
border:1px solid gray;
}
/*id選擇器*/
#a11{
font-size:30pt;
color:red;
}
/*派生*/
/*ul li ol li a{} 二級菜單*/
div.left a{
font-size:15pt;
color:red;
}
/*僞類*/
/*正常狀態*/
a:link{
color:black;
}
/*鼠標懸浮時*/
a:hover{
font-size:10pt;
color:red;
}