Html 设置每个 div 的样式
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1828417/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Set styles per div
提问by Joost
I am new to css and not a programmer. I understand what a class is and I understand what a div is, but what I can't seem to find, is how to set styles per div.
我是 css 新手，而不是程序员。我了解类是什么，也了解 div 是什么，但我似乎找不到的是如何为每个 div 设置样式。
Any help appreciated,
任何帮助表示赞赏，
Joost Verplancke
约斯特·维普朗克
回答by Dan McGrath
In your HTML
在你的 HTML
<div class="myClass">Look at me!</div>
In your CSS
在你的 CSS
.myClass
{
background-color:#eee;
}
EDIT
编辑
As pointed out by Dave, you can assign multiple classes to an element. This means you can modularise you styles as required. Helps with the DRY principle.
正如 Dave 所指出的，您可以为一个元素分配多个类。这意味着您可以根据需要模块化您的样式。有助于DRY 原则。
For example, in your HTML
例如，在您的 HTML
<div class="myClass myColor">Look at me too!</div>
In your CSS
在你的 CSS
.myClass
{
background-color:#eee;
color:#1dd;
}
.myColor
{
color:#111;
}
You should also note, that the order in the class attribute does not matter if different styles have conflicting settings. That is, class="myClass myColor"is exactly the same as class="myColor myClass". Which conflicting setting is actually used is determined by which style is defined lastin the CSS.
您还应该注意，如果不同的样式具有冲突的设置，则 class 属性中的顺序无关紧要。也就是说，class="myClass myColor"与 完全相同class="myColor myClass"。实际使用哪个冲突设置取决于最后在 CSS 中定义的样式。
This means, in the above example, to make the colorfrom myClassbe used instead of the colorfrom myColor, you have to change your CSS to switch them around as follows
这意味着，在上面的示例中，要使用colorfrommyClass而不是colorfrom myColor，您必须更改 CSS 以如下方式切换它们
.myColor
{
color:#111;
}
.myClass
{
background-color:#eee;
color:#1dd;
}
回答by Justin Niessner
You would create either a class per div or give each div a unique id value.
您可以为每个 div 创建一个类，或者给每个 div 一个唯一的 id 值。
You would then create a different CSS style for each class or id, which would style the corresponding div element.
然后，您将为每个类或 id 创建不同的 CSS 样式，这将为相应的 div 元素设置样式。
#specialDiv {
font-family: Arial, Helvetica, Sans-Serif;
}
<div id="specialDiv">Content</div>
Or
或者
.specialDiv {
font-family: Arial, Helvetica, Sans-Serif;
}
<div class="specialDiv">Content</div>
You could also do inline styles for each div element:
您还可以为每个 div 元素设置内联样式：
<div style="font-family: Arial, Helvetica, Sans-Serif;">Content</div>
回答by CodeJoust
<div class="featured">Featured</div>
<style type="text/css">
.featured { padding:5px; font-size:1.4em; background-color:light-yellow; }
</style>
To access the class use (.) and ids use (#) before the name.
要访问类使用 (.) 和 ids 在名称前使用 (#)。
回答by JonH
If you need to set the style once and only once you want to do this:
如果您需要一次且仅一次设置样式，请执行以下操作：
#test
{
background-color: red;
}
If you may need to reuse it (a class) then you'll want to do something like this:
如果您可能需要重用它（一个类），那么您将需要执行以下操作：
.test
{
background-color: red;
}
Then when you are ready to use it just:
然后，当您准备好使用它时：
<div id="test"> this is a test </div>
For # type and:
对于 # 类型和：
<div class="test"> this is a test </div>
For the class type.
对于类类型。
My recommendation is to go to: http://www.w3schools.com/css/
我的建议是去：http: //www.w3schools.com/css/
Plenty of help about CSS there. I would try to avoid the inline css as it sometimes has a way of making artists / programmers think that it is just easier to use inline. You end up with a web page with all these inline styles that could really be centralized and reused. So be careful with inline. I do not recommend using them
那里有很多关于 CSS 的帮助。我会尽量避免使用内联 css，因为它有时会让美工/程序员认为使用内联更容易。您最终会得到一个包含所有这些内联样式的网页，这些样式可以真正被集中和重用。所以要小心内联。 我不建议使用它们
