<!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;

}