CSS：使用方式

最新推荐文章于 2024-07-28 10:28:54 发布

原创最新推荐文章于 2024-07-28 10:28:54 发布 · 152 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#CSS使用方式 #内联样式 #内部样式 #外部样式 #css

CSS 专栏收录该内容

4 篇文章

订阅专栏

CSS：使用方式

1. 内联样式

在元素的style属性中直接书写的样式

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>HTML</title>
</head>
<body>
    <!--内联样式-->
    <h1 style="color:red">内联样式</h1>
</body>
</html>

2. 内部样式

在style标签内书写的样式

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>HTML</title>
    <style>
        <!--内部样式-->
        h2 {
            color: blue;
        }
    </style>
</head>
<body>
    <h2>内部样式</h2>
</body>
</html>

3. 外部样式

写在单独的css文件当中

my.css

p {
    color: yellow;
}

index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>HTML</title>
    <!--外部样式-->
    <link rel="stylesheet" href="my.css"/>
</head>
<body>
    <p>外部样式</p>
</body>
</html>