1，行列样式：

 

 

1 
2 <p style="color:#66C; font-size:18px;">fjdksfjs</p>

 

 

2，内嵌式:(包含三种标记选择器)

 

 

 

html中使用css的方法_优先级html中使用css的方法_选择器_02代码
 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 

 

 

1 <p class="red">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>

 

 

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 }

 

 

 

4，导入样式：

语法：

 

1  
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  
html中使用css的方法_优先级html中使用css的方法_选择器_02代码
<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>

 

1 

 

 

 

 

各种方式的优先级别：

行内式>嵌入式〉外部样式

外部样式（连接式和导入式）中放后面的优先级高。优先级说明他们之间有竞争力。