將此轉換爲css樣式表

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

所以我想我可以將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>

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

感謝任何見解

來源

2013-01-15 CQM

'id'必須是唯一的（應該不會在你的html代碼中是兩個具有相同id的元素）所以大多數情況下，你不需要樣式表中的'div＃id''＃id'是足夠的，並且允許您稍後使用另一個標籤而不是'div'，而無需更改樣式表。 –

你可以嘗試以下方法：

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。

來源

2013-01-15 16:41:37 boz

我沒意識到你可以像這樣連鎖類 – CQM

這是一個CSS的有用功能 - 我發現自己經常使用它:) – boz

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

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

CSS

.numbers { 
/* shared styles */ 
} 

#one { 
/* unique styles */ 
} 

#two { 

/* unique styles */ 
} 

#three { 

/* unique styles */ 
}

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

來源

2013-01-15 16:37:34

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

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

CSS：

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

#completeNumber { 
    color: green  
}

來源

2013-01-15 16:40:07

因爲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" ...

來源

2013-01-15 16:40:47

您可以根據需要定義一些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>

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

來源

2013-01-15 16:43:26 Ragnarokkr

我會用多個類將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>

來源

2013-01-15 16:46:20

將此轉換爲css樣式表

回答

相關問題