1.插入外部样式表
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>
2.内部样式表
<head>
<style type="text/css">
hr {color: sienna;}
p {margin-left: 20px;}
body {background-image: url("images/back40.gif");}
</style>
</head>
3.多重样式
h3 {
color: red;
text-align: left;
font-size: 8pt;
}而内部样式表拥有针对 h3 选择器的两个属性:
h3 {
text-align: right;
font-size: 20pt;
}
4.派生
<html>
<head>
<style type="text/css">
body {background-color: yellow}
p {background-color: rgb(250,0,255)}
p.no2 {background-color: gray; padding: 30px;}
</style>
</head>
<body>
<p>这是段落</p>
<p class="no2">这个段落设置了内边距。</p>
</body>
</html>
5.id 选择器
#red {color:red;}
#green {color:green;}
<p id="red">这个段落是红色。</p>
<p id="green">这个段落是绿色。</p>