内嵌样式表、内部样式表、外部样式表、导入样式表的区别

最新推荐文章于 2022-01-09 14:27:06 发布

缨玖

最新推荐文章于 2022-01-09 14:27:06 发布

阅读量1.9k

点赞数

分类专栏：前端学习文章标签： html5 css

本文链接：https://blog.csdn.net/qq_44449912/article/details/116782017

版权

前端学习专栏收录该内容

2 篇文章 0 订阅

订阅专栏

内嵌样式表

1、格式

<a style="font-family: 黑体;font-style: italic; font-size: 20px;color: blue;" >内嵌样式表</a>

2、说明

直接写在标签内的样式，为内嵌样式。
只对其所在标签起作用

内部样式表

1、格式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        p{
            font-family: "黑体";
            size: 10px;
            color: blueviolet;
            
        }
    </style>
</head>
<body>
    <p>
        内部样式表
    </p>
</body>
</html>

2、说明

应用style标签

外部样式表

1、格式
test.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="p.css">
</head>
<body>
    <p>外部样式表</p>
</body>
</html>

p.css

p{
    font-family: 楷体;
    font-size: large;
    color: chartreuse;
    font-style: italic;
}

2、说明

应用< link >标签
导入外部.css文件

导入样式表

1、格式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        @import url("p.css");
    </style>
</head>
<body>
    <p>导入样式表</p>
</body>
</html>

2、说明

在style标签内引用@import url(" ");

内嵌样式表>内部样式表>外部样式表>浏览器的默认设置

缨玖

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
打赏
0
评论
内嵌样式表、内部样式表、外部样式表、导入样式表的区别

内嵌样式表1、格式<a style="font-family: 黑体;font-style: italic; font-size: 20px;color: blue;" >内嵌样式表</a>2、说明直接写在标签内的样式，为内嵌样式。只对其所在标签起作用内部样式表1、格式<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> &lt
复制链接

扫一扫