如何將 CSS 樣式應用於元素？

Question

我是 CSS 新手，而不是程序員。 我了解類是什么，也了解 div 是什么，但我似乎找不到的是如何在特定元素（例如我網站的 div）上設置樣式。

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中最后定義的樣式。

這意味着，在上面的例子中，使color從myClass來代替的color從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使用（＃）。

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是對的。 我誤解了你的問題。 你已經獲得了許多非常好的答案，可以為你提供你所詢問的信息。