CSS：使用方式

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>