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

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

 

 

一、行内式；

 

规则：

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

 

格式：

<html>
    <head>
        <title>页面标题</title>
    </head>
    <body>
        <p style="color:#FF0000; font-size:66px">使用行内样式引入CSS</p>                
    </body>
</html>

 

 

二、内嵌式；

 

规则：

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

 

格式：

<html>
    <head>
        <title>页面标题</title>
    <style>
        p{
            color:#FF0000;
            font-size:66px;
         }
    </style>
    </head>
    <body>
        <p>使用内嵌式引入CSS</p>
    </body>
</html>

 

 

三、链接式；

 

规则：

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

2. 链接式通过在 <head> 和 </head> 标记之间加上【<link href="链接式.css” type="text/css" rel="stylesheet">】语句，将CSS文件链接到网页中，其中“链接式.css”应为CSS文件名称。

 

HTML文件格式：

<html>
    <head>
        <title>页面标题</title>
        <link href="链接式.css" type="text/css" rel="stylesheet">
    </head>
    <body>
        <p>使用链接样式导入CSS</p>
    </body>    
</html>

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文件的 <style> 与 </style> 标记中可以导入多个样式表，在CSS文件内也可以通过@import语句导入其它的样式表。

 

HTML文件格式：

<html>
    <head>
        <title>页面标题</title>
        <style>
        @import "导入式.css";/* 此处为CSS文件名，可修改 */
        </style>
    </head>
    <body>
        <p>使用导入式引入CSS</p>
    </body>
</html>

CSS文件格式：

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

 

 

五、结语；

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

posted @ 2022-03-07 10:07  温稚生  阅读(515)  评论(0)    收藏  举报