CSS的学习
加载CSS样式的方式
1.head内引用
<style type="text/css">
选择符{属性:值;属性:值;}
</style>
<html>
<head>
<style type="text/css">
h1{color:green;font-size:37px;}
p{background:yellow;}
</style>
</head>
<body>
<h1>南昌大学计算机</h1><br>
<p>南昌大学计算机</p>
</body>
</html>
2.body内引用
<html>
<body>
<h1 style="color:green;font-size:37px;">南昌大学计算机</h1>
<p style="background:yellow;">南昌大学计算机</p>
</body>
</html>
3.文件外引用
css文件中编写样式
然后在html里的head导入CSS文件
1.<link rel=stylesheet href="mystyle.css" type="text/css">
2.
<style type="text/css">
@import url(mystyle.css);
</style>
h1{color:green;font-size:37px;}
p{background:yellow;}
<html>
<head>
<link rel=stylesheet href="mystyle.css" type="text/css">
</head>
<body>
<h1>南昌大学计算机</h1>
<p>南昌大学计算机</p>
</body>
</html>
<html>
<head>
<style type="text/css">
@import url(mystyle.css);
</style>
</head>
<body>
<h1>南昌大学计算机</h1>
<p>南昌大学计算机</p>
</body>
</html>
CSS与标记对应有方式
1.标记选择符
<h1 style="color:green;font-size:37px;">南昌大学计算机</h1>
<p style="background:yellow;">南昌大学计算机</p>
2.类选择符
<html>
<head>
<style type="text/css">
.littlered{color:red;font-size:18px;}
.littlegreen{color:green;font-size:18px;}
</style>
</head>
<body>
<div class="littlered">这是红色的,而且比较小!</div>
<span class="littlegreen">这是绿色,而且比较小!</span>
</body>
</html>
3.id选择符
<html>
<head>
<style type="text/css">
#szg{color:red}
</style>
</head>
<body>
<p id=szg>这是ID选择符号!</p>
</body>
</html>
定义超链接样式
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>无标题文档</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<style type="text/css">
a:link{color:red;font-size=9px; text-decoration:none}
a:visited{color:green;font-size=9pt;text-decoration:none}
a:hover{color:#FF33CC;font-size=15pt;text-decoration:underline}
</style>
</head>
<body>
<a href="#">这是超链接
</a>
</body>
</html>