將此轉換爲css樣式表

Question

我在css樣式表語法上有些遺憾。我的困境是，我有四個<div>標籤與ROUGHLY相同的風格，除了顏色不同或可能float: left但其他標籤可能沒有。

所以我想我可以將id添加到所有這些，以便我可以將這些樣式語句移動到樣式表中。

我將如何解決樣式表中的每個單獨的ID？我在想像div#id什麼的。假設基本div已經不可用，但我想要一些抽象樣式表標籤，它至少包含display:block和font-size:11px，然後是一個更具體的樣式表標籤，通過其標識或類或名稱來標識每個<div>標籤。

<div style="display:block; color:steelblue; float:left; font-size:11px;">Open Requests&nbsp;</div> 
<div id="openNumber" style="display:block; color:steelblue; font-size:11px; clear:right;">13</div> 

<div style="display:block; color:green; float:left; font-size:11px;">Completed Requests&nbsp;</div> 
<div id="completeNumber" style="display:block; color:green; float:left; font-size:11px;">13</div> 

我得到一點點關於語法的不同類型的選擇

感謝任何見解

Answer 1

你可以嘗試以下方法：

CSS：

.floatLeft { float: left; } 
.clearRight { clear: right; } 
.open { color: steelblue; font-size: 11px; } 
.complete { color: green; font-size: 11px; } 

HTML：

<div id="openRequests" class="open floatLeft">Open Requests&nbsp;</div> 
<div id="openNumber" class="open clearRight">13</div> 

<div id="completeRequests" class="complete floatLeft">Completed Requests&nbsp;</div> 
<div id="completeNumber" class="complete floatLeft">13</div> 

一個<div>已經是一個塊級元素，所以你並不需要它指定display: block。

Answer 2

您可以創建一個類.numbers轉頭（或什麼最能描述你的div羣）舉行共享樣式，並將該類添加到相關的div中。然後，針對個人div與他們的id來調整顏色。

像這樣的東西可能會有所幫助：

CSS

.numbers { 
/* shared styles */ 
} 

#one { 
/* unique styles */ 
} 

#two { 

/* unique styles */ 
} 

#three { 

/* unique styles */ 
} 

整理您的風格，在語義和有意義的方式，可以是具有挑戰性的，但你節省維護你的代碼的時間是非常值得它。有關如何做到這一點的更好的總結，您可以閱讀this文章。

Answer 3

您可以使用一個類的相似性，和一個id的差異。

<div class="common" id="some-id"><!-- ... --></div> 

CSS：

.common { 
    display: block; 
    float: left; 
    font-size: 11px; 
} 

#completeNumber { 
    color: green  
} 

Answer 4

因爲ID的必須是唯一的，你可以一個ID添加到這些，然後使用：

#openRegistration{display:block; color:steelblue; float:left; font-size:11px;} 
#openNumber{display:block; color:steelblue; font-size:11px; clear:right;} 
#completedRequests{display:block; color:green; float:left; font-size:11px;} 
#completeNumber{display:block; color:green; float:left; font-size:11px;} 

NOW，鑑於以上，我們可以簡化爲：

#openRegistration,#openNumber,#completedRequests,#completeNumber{display:block;font-size:11px;} 
#openRegistration{ color:steelblue; float:left; } 
#openNumber{color:steelblue; clear:right;} 
#completedRequests{ color:green; float:left;} 
#completeNumber{ color:green; float:left; } 

，或者如果你希望，給他們一個類，並使用：

.myClass{display:block;font-size:11px;} 
#openRegistration{ color:steelblue; float:left; } 
#openNumber{color:steelblue; clear:right;} 
#completedRequests{ color:green; float:left;} 
#completeNumber{ color:green; float:left; } 

編輯： 或者如果你願意，給他們一個以上的類和使用：

.myClass{display:block;font-size:11px;} 
.complete{ color:green;} 
.open{ color:steelblue;} 
#openRegistration{ float:left;} 
#openNumber{clear:right;} 
#completedRequests{ float:left;} 
#completeNumber{ float:left; } 


<div class="myClass complete" ... 

Answer 5

您可以根據需要定義一些CSS類並將它們分配給您的元素。只是一個例子：

CSS：

.myDiv { 
    display: block; 
    font-size: 11px; 
} 

.left { float: left; } 
.clear-both { clear: both; } 
.steelblue { color: steelblue; } 
.green { color: green; } 

HTML：

<div class="myDiv left steelblue">Open Requests&nbsp;</div> 
<div class="clear-both"></div> 
<div id="openNumber" class="myDiv steelblue">13</div> 

<div class="myDiv green left">Completed Requests&nbsp;</div> 
<div id="completeNumber" class="myDiv green left">13</div> 

這樣你可以單獨的課程和使用它們只有當你真正需要它。

Answer 6

我會用多個類將silimar樣式組合在一起。嘗試提取語義：

事情是這樣的：

CSS：

.block11 { display:block; font-size:11px; } 
.left { float:left; } 
.clear-right { clear:right; } 
.steelblue { color: steelblue; } 
.green { color: green; } 

HTML：

<div class="block11 steelblue left">Open Requests&nbsp;</div> 
<div class="block11 steelblue clear-right" id="openNumber">13</div> 

<div class="block11 green left">Completed Requests&nbsp;</div> 
<div class="block11 green left" id="completeNumber">13</div>