css引用的三种方式

作者：此甥孓狠善良发布日期:2025-05-26 浏览:108

/* 内联样式 */
<p style="color: red; font-size: 16px;">这是一个内联样式的段落。</p>

/* 内部样式表 */
<head>
    <style>
        p {
            color: blue;
            font-size: 18px;
        }
    </style>
</head>
<body>
    <p>这是一个使用内部样式表的段落。</p>
</body>

/* 外部样式表 */
<!-- 在 HTML 文件中引用外部样式表 -->
<head>
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
    <p>这是一个使用外部样式表的段落。</p>
</body>

/* styles.css 文件内容 */
p {
    color: green;
    font-size: 20px;
}

解释说明：

内联样式：直接在 HTML 标签中使用 style 属性定义样式。这种方式适用于单个元素，但不利于维护和复用。
内部样式表：在 HTML 文件的 <head> 部分使用 <style> 标签定义样式。适用于同一页面内的多个元素，但不适合跨页面复用。
外部样式表：将样式定义在一个单独的 .css 文件中，并通过 <link> 标签引入。这种方式便于维护和复用，推荐用于大型项目。

上一篇：css文字怎么居中在正中间

下一篇：css字体两端对齐