如何将css选择器重新用于多个html页面？_Html_Css

如何将css选择器重新用于多个html页面？

html css

如何将css选择器重新用于多个html页面？,html,css,Html,Css,我正在做我的大学项目-一个网站。我已经开始看到许多代码被重复-在{}中几乎相同的样式细节，只是选择器的名称在名称上略有不同。我的问题是，如何在不重复内部所有细节的情况下重用初始选择器例如，这是我的“主页”： .banner-container { width: 100%; height: 512px; justify-content: space-around; position: fixed; background-image: url(pexels-

我正在做我的大学项目-一个网站。我已经开始看到许多代码被重复-在{}中几乎相同的样式细节，只是选择器的名称在名称上略有不同。我的问题是，如何在不重复内部所有细节的情况下重用初始选择器

例如，这是我的“主页”：

.banner-container {
    width: 100%;
    height: 512px;
    justify-content: space-around;
    position: fixed;
    background-image: url(pexels-florencia-potter-351300-bicycle-banner.jpg);
    -webkit-background-size: cover;
    background-size: cover;
    box-shadow: 0 3px 0 rgba(0, 0, 0, 20%);
    z-index: -1;
    background-position: 50% 50%;
}

这是“联系我们”页面：

.contacts-banner-container {
    width: 100%;
    height: 512px;
    justify-content: space-around;
    position: fixed;
    background-image: url(pexels-burst-374085.jpg);
    -webkit-background-size: cover;
    background-size: cover;
    box-shadow: 0 3px 0 rgba(0, 0, 0, 20%);
    z-index: -1;
    background-position: 50% 50%;
}

我知道重复是一件坏事，但我找不到在类似情况下如何避免重复的任何提示。

使用单个类替换所有重复属性：

.fixed-image {
    width: 100%;
    height: 512px;
    justify-content: space-around;
    position: fixed;
    -webkit-background-size: cover;
    background-size: cover;
    box-shadow: 0 3px 0 rgba(0, 0, 0, 20%);
    z-index: -1;
    background-position: 50% 50%;
}
.banner-container {
    background-image: url(pexels-florencia-potter-351300-bicycle-banner.jpg);
}
.contacts-banner-container {
    background-image: url(pexels-burst-374085.jpg);
}

然后为元素指定

固定图像

类和适当的其他类。（根据需要重命名该类，您可能需要比固定图像更具体的内容）

请记住，您可以将样式表保存在单独的文件中。您可以随意调用它（即

style.css

），然后将该文件导入HTML文件

例如：

style.css->相同的文件将用于所有HTML文件，以获得一致的外观

h1 {
  text-transform: capitalize;
}

p {
  color: green;
}

Index.html->这里我们导入CSS文件

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="style.css">
</head>
<body>  
    <h1>This is a heading for index.html</h1>
    <p>This is a paragraph for index.html</p>    
</body>
</html>


我的容器
你的容器
他们的容器

所以对重复属性使用公共类名？class=“banner contacts”class=“banner funky chicken晚餐”谢谢，这非常有帮助，现在css文件看起来更好了。

<html>
<head>
    <link rel="stylesheet" href="style.css">
</head>
<body>  
    <h1>This is a heading for contact.html</h1>
    <p>This is a paragraph for contact.html.</p>    
</body>
</html>