《网页设计基础——CSS的四种引入方式详解》

网页设计基础——CSS的四种引入方式详解

        

        

        

一、行内式；

---

规则：

1. 行内式是所有样式方法中最为直接的一种，它直接对HTML的标记使用style属性，然后将CSS代码直接写在其中。

        

格式：        

    
        
    
    
        
使用行内样式引入CSS
                
    

        

                                        

二、内嵌式；

---

规则：

1. 内嵌式就是将CSS代码写在 和 之间，并用 标记进行声明。

        

格式：

    
        
    
    
    
        
使用内嵌式引入CSS
    

                

        

三、链接式；

---

规则：

1, 链接式CSS样式表是使用频率最高，也是最实用的方法，其最大的优势在于CSS代码与HTML代码完全分离，并且同一个CSS文件可以被不同的HTML所链接使用。

2. 链接式通过在 和 标记之间加上【】语句，将CSS文件链接到网页中，其中“链接式.css”应为CSS文件名称。

        

HTML文件格式：

    
        
        
    
    
        
使用链接样式导入CSS
        

CSS文件格式：

p
{
    color:#FF0000;
    font-size:66px;
}

        

        

四、导入式；

---

规则：

1. 导入式和链接式的功能基本相同，只是语法和运行方式上略有区别。采用import方式导入的样式表，在HTML文件初始化时，会被导入到HTML文件内，作为文件的一部分，类似内嵌式的效果。而链接式样式表则是在HTML的标记需要格式时才已链接的方式引入。

2. 导入式CSS样式表的最大用处在于可以让一个HTML文件导入很多的样式表。

3. 常用的@import语句：@import url(导入式.css); @import url("导入式.css"); @import url('导入式.css');

@import 导入式.css @import "导入式.css"; @import '导入式.css';

4. 不单是HTML文件的 标记中可以导入多个样式表，在CSS文件内也可以通过@import语句导入其它的样式表。

        

HTML文件格式：

    
        
        
    
    
        
使用导入式引入CSS
    

CSS文件格式：

p
{
    color:FF0000;
    font-size:66px;
}

        

        

五、结语；

---

四种CSS引入方式的优先级分别是——行内式>链接式>内嵌式>导入式。