html - 如何将 CSS 样式应用于元素？

Question

我是 CSS 新手，不是程序员。我了解类是什么，也了解 div 是什么，但我似乎找不到的是如何在特定元素(如我网站的 div)上设置样式。

Answer 1

在你的 HTML 中

<div class="myClass">Look at me!</div>

在你的 CSS 中

.myClass
{
   background-color:#eee;
}

编辑

正如 Dave 所指出的，您可以为一个元素分配多个类。这意味着您可以根据需要模块化您的样式。帮助 DRY principle .

例如，在您的 HTML 中

<div class="myClass myColor">Look at me too!</div>

在你的 CSS 中

.myClass
{
   background-color:#eee;
   color:#1dd;
}

.myColor
{
   color:#111;
}

您还应该注意，如果不同的样式具有冲突的设置，则 class 属性中的顺序无关紧要。即 class="myClass myColor"与 class="myColor myClass" 完全相同.实际使用哪个冲突设置是determined by which style is defined last在 CSS 中。

这意味着，在上面的示例中，将 color来自 myClass被用来代替 color来自 myColor ，您必须更改您的 CSS 以按如下方式切换它们

.myColor
{
   color:#111;
}

.myClass
{
   background-color:#eee;
   color:#1dd;
}