如何使用在单独的 CSS 文件中编写的选择器 class？

Question

所以我尝试通过使用 background-image 属性创建选择器 class 然后使用 <div> 标记调用它来显示图像。第一次选择器 class 在 <head> 标签之间。似乎一切正常：

    <html>
    <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
        <style>
            body, html {
                margin: 0;
            }

            .bg {
                /* The image used */
                background-image: url("images.jpeg");

                /* Full height */
                height: 100%;

                /* Center and scale the image nicely */
                background-position: center;
                background-size: cover;
           }
        </style>
    </head>
    <body>
        <div class="bg"></div>
    </body>
    </html>

但是当我将选择器 class 放在一个单独的 CSS 文件中时，它似乎不起作用。这是 HTML 文件的代码：

    <html>
    <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
        <style>
            body, html {
                margin: 0;
            }
        </style>
    </head>
    <body>
        <div class="bg"></div>
    </body>
    </html>

这里是 CSS:

.bg {
   /* The image used */
   background-image: url("images.jpeg");

   /* Full height */
   height: 100%;

   /* Center and scale the image nicely */
   background-position: center;
   background-size: cover;
}

有人可以告诉我我做错了什么吗？我先谢谢你了！

Answer 1

不要忘记在 html 页面上导入单独的 css 文件：

<link rel="stylesheet" href="style.css">

注意正道。

Answer 2

在 HTML 中的 head 内添加一个 link 标签，将您的样式连接到 HTML。

<head>
   <link rel="stylesheet" href="xxx.css">
</head>

将 xxx.css 替换为 css 文件的路径。

查看Mozilla docs了解详情。

如何使用在单独的 CSS 文件中编写的选择器 class？

How can one use a selector class that is written in a separate CSS file?

html

css

image

external

css-selectors