CSS的四种引入方式

最新推荐文章于 2024-05-14 21:23:28 发布

crazyboy12138

最新推荐文章于 2024-05-14 21:23:28 发布

阅读量474

点赞数

CC 4.0 BY-SA版权

文章标签： css引入方式

本文链接：https://blog.youkuaiyun.com/crazyboy12138/article/details/75143833

本文介绍了四种常见的CSS样式引入方法：行内式、嵌入式、导入式和链接式，并提供了具体的HTML示例代码。

第一种：

行内式，在html标记的style属性中设置CSS样式

<HTML>
<head>
    <title>CSS的行内式引入方式</title>
    <meta charset = "utf-8">
</head>
<body>
    <p style = "color:green">hello world!</p>
</body>
</HTML>

第二种：

嵌入式，将CSS样式的代码写在html代码的<head>标签中的<style>标签中

<html>
<head>
    <title>CSS的嵌入式引入方式</title>
    <meta charset = "utf-8">
    <style type = "text/css">
        p{
            color:gray;
        }
    </style>
</head>
<body>
    <p>hello world!</p>
</body>
</html>

第三种：

导入式，CSS文档与HTML文档分开，在HTML文档中用import语句导入。

1.css:

p{
    color:red;
}

<html>
<head>
    <title>CSS的导入式引入方式</title>
    <meta charset = "utf-8">
    <style type = "text/css">
        @import "1.css"
    </style>
</head>
<body>
    <p>hello world!</p>
</body>
</html>

第四种：

链接式，CSS文档与HTML文档分开，在HTML文档中用link语句链接。

1.css:

p{
    color:red;
}

<html>
<head>
    <title>CSS的链接式引入方式</title>
    <meta charset = "utf-8">
    <link href = "1.css" rel = "stylesheet" type = "text/css">
</head>
<body>
    <p>hello world!</p>
</body>
</html>