Question

问题陈述是，我有2-3个网页;我希望在这个页面上有不同的颜色，但保持类名称对“myBody”是唯一的。

我找了很多博客和作者，但没有找到任何合适的答案来实现传统的CSS方法。

请建议是否可以让一个CSS类接受来自网页的参数，该网页将决定使用具有不同参数的相同CSS应用哪种颜色“

    .myBody(@color)
     {
     background-color: @color;
     font-size: 11px;
     color: Black;
     border: 1px solid;

     }

对于一些人来说，答案可能很棘手，但我真的想看看我是否只能使用CSS实现这一点。

Answer 1

你应该把它们分成不同的类。

.myBody
 {
     font-size: 11px;
     color: Black;
     border: 1px solid;
 }
 .background_red
 {
     background: red;
 }
 .background_green
 {
     background: green;
 }

然后像这样使用它们

<div class="mybody background_red"></div>

<div class="mybody background_green"></div>

您还可以像这样覆盖css：

.myBody
{
    background:red;
}
.overwrite_background
{
    background:green;
}

<div class="myBody"></div>
<div class="myBody overwrite_background"></div>

第一个div的背景为红色，第二个div的背景为绿色。

这是你应该看的另一篇文章。这引用了一些您必须处理这种情况的选项。 How to pass parameters to css classes

另一种选择是使用Sass。 Sass允许您使用编程语言来创建CSS。这对于在飞行中改变物体非常有用。如果您在多个位置使用相同的颜色，或者如果您希望为每个站点使用不同的配置，并且仍然使用相同的css只是不同的颜色。

Answer 2

不，你不能用一个类定义来做这件事。 CSS中没有参数和函数调用的概念。

另一方面，你可以用最少的代码重复来做到这一点，但这可能是一个坏主意。您说您想假设class属性中只有一个类名。这非常愚蠢，因为它完全误解了class属性的用途，但无论如何我们都会使用它。

我们首先使用背景颜色定义我们的类：

.mybody-red {
  background-color: red;
}
.mybody-blue {
  background-color: blue;
}
.mybody-green {
  background-color: green;
}

然后我们将使用属性starts-with selector来为所有mybody-*类定义代码：

div[class^="mybody-"] {
  font-size: 11px;
  color: Black;
  border: 1px solid;
}

然而，这是一个愚蠢的想法，尤其是因为它意味着你没有将标记与样式分开，并且出于其他原因。

Answer 3

也许你可以在每个页面中给出一个唯一的id并保持同一个类。我的意思是

file1.html
<html>
<body id="file1">
<div class"myBody"></div>
</body>
</html>

  file2.html
<html>
<body id="file2">
<div class"myBody"></div>
</body>
</html>

       file3.html
<html>
<body id="file3">
<div class"myBody"></div>
</body>
</html>

你有3个不同的文件。每个文件都有一个带有唯一ID的body标签和一个带有你想要的类的div标签现在css部分：

.myBody
 {
     font-size: 11px;
     color: Black;
     border: 1px solid;
}/*common class for all files*/

#file1 .myBody{
background:green;
}

#file2 .myBody{
background:red;
}
  #file3 .myBody{
background:grey;
}

如果您有2-3页，这样可以正常工作。如果您有更多内容，那将是一个难以维护的代码

Answer 4

作为替代选项，由于您打算通过页面传递颜色，为什么不使用PHP将样式设置为内联属性？虽然将大多数css放在一个单独的文件中会更好，但有时沿着可接受的CSS放置层次结构前进是有意义的。

我不确定你从哪里获得特定的颜色，但设置内联样式没有任何问题，如果这是最有效的方式。< / p>

示例：

<?php $bodyColor = $_POST['bodyColor']; ?>
<div class="myBody" style="background-color:<?php echo $bodyColor; ?>">
    YOUR TEXT
</div>

将参数从网页传递到CSS类

4 个答案: