前端一HTML:二十CSS的三种存在方式

最新推荐文章于 2024-08-28 08:24:58 发布

请叫我大虾

最新推荐文章于 2024-08-28 08:24:58 发布

阅读量1.1k

点赞数 1

CC 4.0 BY-SA版权

分类专栏：前端

本文链接：https://blog.youkuaiyun.com/m0_37564426/article/details/89669849

前端专栏收录该内容

41 篇文章

订阅专栏

本文深入讲解了CSS样式的三种应用方式：行内样式、嵌入样式及外部样式，并探讨了它们之间的优先级关系，以及外部样式如何被浏览器请求和解析的过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. 行内样式(存在于标签之中,用style属性设置)

<p style="color:red">这是内容</p>

2. 嵌入样式(也称内联样式, 存在于title标签之下的style标签之中)

<style type="text/css">
        p{
            color: red;
        }
</style>

3. 外部样式:(也称外联样式,存在于一个外部文件中)

  <link rel="stylesheet" href="CSS文件.css">

一般css使用第二种，第三种方式的比较多。

补充一:优先级:

!important > 行内样式 > id > class > 标签 > 通配符 > 继承 > 默认

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="CSS文件.css">
   
    <style type="text/css">
        p{
            color: red;
        }

        #content{
            color: blue;
        }

        .content{
            color: yellow !important;
        }
    </style> 
</head>
<body>
     <p class="content" id="content" style="color:pink">这是内容</p>
</body>
</html>