Question

我是css的新手而不是程序员。我理解一个类是什么，我理解div是什么，但我似乎无法找到，是如何设置每个div的样式。

任何帮助表示赞赏，

Joost Verplancke

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"完全相同。实际使用的是哪个冲突设置是CSS中的determined by which style is defined last。

这意味着，在上面的示例中，要使color来自myClass而不是来自color的{{1}}，您必须将CSS更改为切换他们周围如下

myColor

Answer 2

您可以为每个div创建一个类，或者为每个div提供唯一的id值。

然后，您将为每个类或id创建不同的CSS样式，这将样式化相应的div元素。

#specialDiv {
    font-family: Arial, Helvetica, Sans-Serif;
}

<div id="specialDiv">Content</div>

或者

.specialDiv {
    font-family: Arial, Helvetica, Sans-Serif;
}

<div class="specialDiv">Content</div>

您还可以为每个div元素执行内联样式：

<div style="font-family: Arial, Helvetica, Sans-Serif;">Content</div>

Answer 3

 <div class="featured">Featured</div>

 <style type="text/css">
      .featured { padding:5px; font-size:1.4em; background-color:light-yellow; }
 </style>

要在名称前访问类使用（。）和ids使用（＃）。

Answer 4

如果您需要设置一次样式，并且只需要设置一次：

#test 
 {
  background-color: red;
 }

如果您可能需要重复使用它（一个类），那么您将需要执行以下操作：

.test
 {
  background-color: red;
 }

然后当你准备好使用它时：

<div id="test"> this is a test </div>

对于#type和：

<div class="test"> this is a test </div>

对于班级类型。

我的建议是转到：http://www.w3schools.com/css/

那里有很多关于CSS的帮助。我会尽量避免使用内联css，因为它有时会让艺术家/程序员认为它更容易使用内联。最终得到一个包含所有这些内联样式的网页，这些样式可以真正集中并重复使用。所以要小心内联。 我不建议使用

Answer 5

<div style="your css goes here"></div>

编辑 - 不要那样做，annakata是对的。我误解了你的问题。你已经获得了许多非常好的答案，可以为你提供所要求的信息。

设置每个div的样式

5 个答案: