css引入的几种方式

最新推荐文章于 2024-08-02 20:34:24 发布

weixin_46141549

最新推荐文章于 2024-08-02 20:34:24 发布

阅读量70

点赞数

分类专栏： HTML+CSS知识汇总文章标签： css html css3 html5

本文链接：https://blog.csdn.net/weixin_46141549/article/details/112257801

版权

HTML+CSS知识汇总专栏收录该内容

2 篇文章 0 订阅

订阅专栏

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/01.css">
    <style>
        h1{
            color: yellow;
        }
    </style>
</head>
<body>
    <h1 style="font-size: 12px;">houudunren.com</h1>
    <a href="">hello</a>
</body>
</html>

css

@import url("/common/menus.css");
body{
    /* ;不可删掉 */
    background-color: red;
    /* 错误示范 不影响*/
    hrhhr:33px;
}

/*menus.css*/
a{
    color: white;
}

代码执行最终效果：

css的引入方式一般有三种：外链，内嵌，内联

外链：通过link标签进行引入，<link rel="stylesheet" href="css/01.css"> rel表示引入的类型，stylesheet表示样式表，Link标签有两个作用：1. 定义文档与外部资源的关系；2. 是链接样式表除此之外，还有如下的属性：

内联（不建议）：通过<style></style>在页面中进行引入，可以放在页面的任何位置，但建议放在head标签里，因为放在html标签后面，遇到网络延迟后会出现意外结果

内嵌（不建议）：在标签里直接使用style标签进行设置。

@import url("cssurl") ：模块化导入式css，推荐这种做法，可以让css更模块化

weixin_46141549

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css引入的几种方式

HTML<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href=".
复制链接

扫一扫

专栏目录