标签：
#:id .:class
head里指定:
<html>
<head>
<style type="text/css">
H1{font-size:16pt;color:red}
H2{font-size:10pt;color:green}
</style>
</head>
<body>
<h1>Hello</h1>
<h2>World</h2>
</body>
</html>
body里指定:
<html> <head> </head> <body> <h1 style="font-size:20pt;color:blue">Hello</h1> <h2 style="font-size:10pt;background:yellow; font-family:courier">World</h2> </body> </html>
link方式:
<html> <head> <title>link</title> <link REL=stylesheet href="03.css" type="text/css"> </head> <body> <h1>Hello</h1> <h2>World</h2> </body> </html>
css内容:
H1{font-size:16pt;color:red}
H2{font-size:10pt;color:green}
同时装饰的优先级:就近: hello2 用css文件, body里的就用自己的.
<html> <head> <link REL=stylesheet href="03.css" type="text/css"> </head> <body> <h1 style="font-size:20pt;color:blue">Hello</h1> <h2 style="font-size:10pt;background:yellow; font-family:courier">World</h2> <h1>Hello2</h1> </body> </html>
字体属性class:
<html>
<head>
<style type="text/css">
.font1{font-family:verdana;font-style:italic;font-variant:small-caps;font-weight:lighter;font-size:18pt;color:green}
.code{font-size:16pt;color:red}
</style>
<title>CSS字体属性</title>
</head>
<body>
<p class="font1">Hello World!!!</h1>
</body>
</html>
链接颜色变化:
<html>
<head>
<style type="text/css">
/*我是注释*/
a:link{color:green;text-decoration:none}
a:active{color:blue;text-decoration:none}
a:visited{color:orange;text-decoration:none}
a:hover{color:red;text-decoration:underline}
</style>
</head>
<body>
<a href="css1.html">我就是用来说明问题的链接</a>
</body>
</html>
边框属性:
<html>
<head>
<style type="text/css">
p{border:5px double purple}
</style>
<title>边框属性</title>
</head>
<body>
<p align="center">
<br>
生命诚可贵<br>
爱情价更高<br>
若为自由故<br>
两者皆可抛<br>
<br>
</p>
</body>
</html>
列表属性:
<html>
<head>
<title>列表属性</title>
<style type="text/css">
li{list-style-image:url(images/03.jpg)}
</style>
</head>
<body>
<p>
<ul>
<li>list1</li>
<li>list2</li>
<li>list3</li>
</ul>
<img src="images/02.jpg" width="280" height="185">
</p>
</body>
</html>
鼠标属性:
<html> <head> <title>鼠标属性</title> </head> <body> <h1>鼠标效果</h1> <div style="font-family:隶书; font-size:24pt;color:green"> <span style="cursor:hand">手的形状</span><br> <span style="cursor:move">移动</span><br> <span style="cursor:ne-resize">反方向</span><br> <span style="cursor:wait">等待</span><br> <span style="cursor:help">求助</span><br> </div> </body> </html>
标签：
原文地址：http://www.cnblogs.com/wujixing/p/5396337.html
