再使用類通過稍微修改它而不復制類和重命名

好吧，我一直很讀書一段時間，這裏有燦爛的人這就是爲什麼我有點尷尬，關於問這有點嚇倒CSS的問題，我冒着被嘲笑，以換取增加我的知識，所以在這裏。再使用類通過稍微修改它而不復制類和重命名

我一直在試圖圍繞一個概念，這可能是大多數人對這樣的一個概念，但讀CSS書籍和噸在線tuts仍然沒有給我在這個問題上澄清。

當我創建了一個網站的設計很顯然，許多重複的樣式，但這裏的時候重新使用不正是我所需要的設計的特定頁面風格相匹配我的最大的問題。

例如，我創建了一個「h1」，「h2」，「p」規則，幾乎相同，如果我需要修改它，我只需創建一個類或使用span標記爲設計的特定部分修改這些標籤，不知道這是否是處理它的最佳方式，但這正是我一直在做的事情。

但更糟糕的是，我在我的主體div中創建主要和次要內容容器，併爲每個頁面創建我基本上覆制前一頁的div（id或class）（我已經完成了標記爲），只需更改名稱，以便我可以修改它，而不會混淆我複製它們的其他頁面上的相同div或類。

這似乎有太多的CSS，但我無法弄清楚怎麼回事修改class和id適合特定的頁面上我的需求。所以這是解釋，這裏是我的一些實際的CSS，我在複雜：

稱爲頁：產品&定價 -

<div id="primaryContent_pp"> 
     <h1 id="introHeader">Products & Pricing</h1> 
     <p id="introText">...generic text...</p> 
      <img id="serversImg" alt="..."></img>  
    </div><!---end primaryContent_pp--->

有一個網頁叫做：支持 -

<div id="primaryContent_support"> 
      <h1 id="introHeader">Support</h1> 
      <p id="introText">...generic text..</p> 
      <img id="supportImg" alt="..."></img>  

    </div><!---end primaryContent_support--->

有一個網頁叫做：聯繫人 -

<div id="primaryContent_contact"> 
      <h1 id="introHeader">Contact Us</h1> 
      <p id="introText">...generic text...</p> 
      <img id="contactImg" alt="..."></img>  

    </div><!---end primaryContent_contact--->

所以你看我在做什麼嗎？

我爲每個頁面的primaryContent div創建一個單獨的規則，因爲我擔心如果我必須改變它的大小或填充，我會混淆其他頁面上的所有其他divs具有相同的id或class並且我試圖這樣做，我只是重複了規則，並改變它，不用擔心，因爲我知道這會不會影響另一格或規則，但因爲我寫了這麼多的CSS和沒有踏我的比賽，因爲我」這真的是傻瓜毫無意義地蒙上了陰影。

您可能還注意到我沒有改變（h1 id =「introHeader」）也沒有改變（p id =「introText」），因爲我相信這裏的某個人可以告訴我關於如何到處走動的燈光沒有必要爲每個頁面創建新的「h1」規則或「p」規則，以防我想更改該div的寬度，高度，填充，邊距，浮點數等。

任何人都可以幫助我結束我的失明，併爲我的瘋狂帶來了邏輯，以便我可以一勞永逸地學習如何不用擔心重新使用身份證和班級「知道我所做的事情有一個更簡單的邏輯？

我確實知道ID的每頁和每個類只能按需要多次使用，但我所做的只是太多的CSS，必須有一種更簡單的方式來編輯每頁的樣式而不必複製該規則並將其重命名，以便我可以編輯諸如填充，邊距，文本對齊方式，浮動方式，寬度，高度等等的內容，而不必擔心會在其他位置打破某些內容。

這是否有意義？對於長篇大論的解釋感到抱歉，並且感謝您抽出時間將您的知識灌輸給我。

來源

2012-03-13 MARS

標籤的HTML語義，如：
產品：<body id="products"> ... </body>
支持：<body id="support"> ... </body>

根據需要進行在你的CSS一次性修改

#introHeader    { /* common styles */ } 
body#products #introHeader { /* page-specific tweaks */ } 
body#support #introHeader { /* page-specific tweaks */ }

只有覆蓋你在每頁基礎上必須完成的工作從常見的風格中繼承來自單一來源。

來源

2012-03-13 22:49:05 Phrogz

雖然我對你的回答有一條評論，但它與這個問題無關。在您的答案正文＃產品選擇器超過合格。只有＃產品，＃支持應該做得很好，因爲id在頁面中是唯一的。 – rajkamal 2012-03-15 05:49:27

@rajkamal這是正確的，除非你可能會意外地在其他地方創建一個帶有＃＃支持ID的頁面（當然，除非你在裏面放了一個'＃introHeader'）。我個人發現，通過指定'body'標記可以讓更多的自我記錄向臨時觀察者闡明正在發揮的頁面級範圍。 – Phrogz 2012-03-15 13:01:32

首先，我建議不使用IDS款式內容。 ID最好用於提供導航和腳本掛鉤。如果您爲此目的使用ids，並且使用類來創建樣式，那麼您可以更改所需的id和class，而不必擔心腳本或樣式將停止工作。關注點分離。此外，你避免了特殊問題，這總是一個獎金。

現在，我會嘗試開發更深入的理解你在這裏試圖達到什麼。基本上，你有模塊，或一組標籤，總是看起來一樣。但是，在某些頁面上，您可能想要擺弄邊距和填充（也可能是其他屬性）。

所以我會做這樣的吧。

創建一個通用的情況下
補充一點（從OOCSS語法借款）其他類擴展您的通用情況下

通用標記：

<div class="content"> 
    <h1 class="content-header">Content header</h1> 
    <p class="content-text">...generic text...</p> 
    <img id="serversImg" alt="..."></img>  
</div>

擴展標記，用腳本掛鉤和其他造型的可能性：

<div id="primaryContent_contact" class="content content-contact"> 
    <h1 class="content-header">Contact Us</h1> 
    <p class="content-text">...generic text...</p> 
    <img id="contactImg" alt="..."></img>  
</div>

CSS：

.content { 
    padding: 10px; 
} 

.content-header { 
    font-size: 16px; 
    font-weight: bold; 
} 

.content-text { 
    font-size: 12px; 
    font-weight: normal; 
} 

.content-contact .content-header { 
    color: red; 
    padding: 0 10px; 
}

來源

2012-03-13 23:09:17 PatrikAkerstrand

您可以創建一個class，你將適用於全部三個div的。然後給每個獨立的div一個獨特的id。您可以將每個div的樣式應用於class以及對每個div分開的樣式與ids。見下文。

<div class="primaryContent" id="pp"> 
    <h1>Products & Pricing</h1> 
    <p>...generic text...</p> 
    <img src="..." alt="..."></img>  
</div><!---end .primaryContent#pp---> 

<div class="primaryContent" id="support"> 
    <h1>Support</h1> 
    <p>...generic text...</p> 
    <img src="..." alt="..."></img>  
</div><!---end .primaryContent#support---> 

<div class="primaryContent" id="contact"> 
    <h1>Support</h1> 
    <p>...generic text...</p> 
    <img src="..." alt="..."></img>  
</div><!---end .primaryContent#contact--->

你的CSS看起來像：

.primaryContent{ 
    ...rules that are the same for all divs goes here... 
} 
#pp{ 
    ...rules for first div goes here... 
} 
#support{ 
    ...rules for second div goes here... 
} 
#contact{ 
    ...rules for third div goes here... 
}

您可以針對內部像元素：

.primaryContent h1{ 
    ...rulles for all primaryContent h1s goes here... 
}

您將指定由簡單地切換出具有相同的規則的每個內部元件h1標記。 .primaryContent p將針對類別爲.primaryContent的任何元素中的所有p元素。要指定一個單獨的內部元素開關.primaryContent與您想要指定的id。 #contact h1將針對#contact的ID元素內的h1標籤。

CSS代表層疊樣式表。這意味着任何出現在頁面下方的規則都將優先於頁面上更高的重複規則。更具體的聲明將優先於不太具體的聲明。

希望有幫助！我們都開始在某個地方，提出問題是學習的唯一途徑！

發佈你的CSS，如果你需要更多的幫助。

來源

2012-03-13 23:13:15

再使用類通過稍微修改它而不復制類和重命名

回答

相關問題