设置每个div的样式

Question

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

任何帮助,赞赏,

Joost Verplancke

Answer 1

在您的HTML中

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

在你的CSS中

.myClass
{
   background-color:#eee;
}

编辑

正如Dave所指出的,您可以为元素分配多个类.这意味着您可以根据需要对样式进行模块化.有助于DRY原则.

例如,在您的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中最后定义的样式.

这意味着,在上面的示例中,要使用colorfrom myClass而不是colorfrom myColor,您必须更改CSS以切换它们,如下所示

.myColor
{
   color:#111;
}

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

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 使用 (#)。