html中使用css的方法
1，行列样式：
1
2 <p style="color:#66C; font-size:18px;">fjdksfjs</p>
2 <p style="color:#66C; font-size:18px;">fjdksfjs</p>
2，内嵌式:(包含三种标记选择器)
代码
1 <style type="text/css">
2
3
4
5
6 .red
7 {
8 color:#C00;
9 font-size:18px;
10
11 }
12
13 .green
14 {
15 color:#FC0;
16
17 }
18 .size
19 {
20 font-size:6px;
21 }
22
23 #blod
24 {
25 font-weight:bold;
26
27
28 }
29 #yellow
30 {
31 color:yellow;
32 }
33 .ff {
34 font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
35 font-size: 14px;
36 }
37
38
39 </style>
40
2
3
4
5
6 .red
7 {
8 color:#C00;
9 font-size:18px;
10
11 }
12
13 .green
14 {
15 color:#FC0;
16
17 }
18 .size
19 {
20 font-size:6px;
21 }
22
23 #blod
24 {
25 font-weight:bold;
26
27
28 }
29 #yellow
30 {
31 color:yellow;
32 }
33 .ff {
34 font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
35 font-size: 14px;
36 }
37
38
39 </style>
40
1 <p class="red">class选择器</p>
2 <p class="green">class选择器</p>
2 <p class="green">class选择器</p>
3，链接式：可以实现css与html完全的分离开来。方便维护。
html页面的代码：
1 <head>
2 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
3 <title>无标题文档</title>
4
5
6 <link href="untitled.css" type="text/css" rel="stylesheet"> //此句是必备的。
7
8
9
10 </head>
2 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
3 <title>无标题文档</title>
4
5
6 <link href="untitled.css" type="text/css" rel="stylesheet"> //此句是必备的。
7
8
9
10 </head>
css文件代码：
1 @charset "utf-8";
2 /* CSS Document */
3
4 h2
5 {
6 color:#3F3;
7 font-size:24px;
8 }
9
10 p
11 {
12 color: #3C0;
13 text-decoration:overline;
14 font-size:36px;
15 }
2 /* CSS Document */
3
4 h2
5 {
6 color:#3F3;
7 font-size:24px;
8 }
9
10 p
11 {
12 color: #3C0;
13 text-decoration:overline;
14 font-size:36px;
15 }
4，导入样式：
语法：
1
2 <style type="text/css">
3 <!--
4 @import url(untitled.css);
5 -->
6 </style>
7
2 <style type="text/css">
3 <!--
4 @import url(untitled.css);
5 -->
6 </style>
7
这一点与链接式不同。也可以将css文件导入css文件中。
代码如下：
1 @charset "utf-8";
2 /* CSS Document */
3
4 h2
5 {
6 color:#3F3;
7 font-size:24px;
8 }
9
10 p
11 {
12 color: #3C0;
13 text-decoration:overline;
14 font-size:36px;
15 }
16
17 @import url(import.css);
18代码
2 /* CSS Document */
3
4 h2
5 {
6 color:#3F3;
7 font-size:24px;
8 }
9
10 p
11 {
12 color: #3C0;
13 text-decoration:overline;
14 font-size:36px;
15 }
16
17 @import url(import.css);
18
代码
<style type="text/css">
.red
{
color:#C00;
font-size:18px;
}
.green
{
color:#FC0;
}
.size
{
font-size:6px;
}
#blod
{
font-weight:bold;
}
#yellow
{
color:yellow;
}
.ff {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 14px;
}
</style>
</head>
.red
{
color:#C00;
font-size:18px;
}
.green
{
color:#FC0;
}
.size
{
font-size:6px;
}
#blod
{
font-weight:bold;
}
#yellow
{
color:yellow;
}
.ff {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 14px;
}
</style>
</head>
1
各种方式的优先级别：
行内式>嵌入式〉外部样式
外部样式（连接式和导入式）中放后面的优先级高。优先级说明他们之间有竞争力。
