2017-02-17 485 views
0

我對所有頁面都使用單個CSS文件,但遇到了這個問題。我在兩個不同的頁面上有一個幾乎相同(有細微差異)的元素(比方說,主頁和關於頁面;這是我在主頁中的特定元素的CSS代碼,我想用它作爲另一個有細微差別的頁面。我該如何命名這兩個類,如何爲不同的頁面創建同一個類名稱

  1. 我需要使用完全獨立的類的名稱,如.home.topcontainer {.about.topcontainer {等,或有任何可靠的方法處理這個問題?

  2. 如果我使用單個CSS文件,爲不同頁面命名CSS塊的最佳方式是什麼?我的整個網站,以避免我對類名感到困惑?

感謝

CSS

.top_container { 
position:relative; 
top:3px; 
height:144px; 
z-index:1; 
background-color: #143952; 
width: 90%; 
left:5%; 
right:5%; 
font-family: 'Scope One', serif; 
overflow:hidden; 
min-width:900px; 
+0

使用不同的CSS文件 – Asad

+0

您可以命名top_container2並用它作爲。約。 top_container2 –

+0

@Asad,不建議將其作爲最佳做法 – Manoj

回答

1

最好的做法是在body標籤中添加一些相關的類(正如你可以在幾個CMS如magento等中看到的那樣)),然後用這樣的:

<body class="home"> 
    <div class="top_container"> 
     <!-- Do something --> 
    </div> 
</body> 

- 或 -

<body class="about"> 
    <div class="top_container"> 
     <!-- Do something --> 
    </div> 
</body> 

現在你可以使用CSS,如:

.home .top_container{} 

.about .top_container{} 
1

假設這是您的主頁上

<div id="home"> 
    <div class="top_container"> 
    //stuff 
    </div> 
</div> 

這是你對頁:

<div id="about"> 
    <div class="top_container top_container_about"> 
    //stuff 
    </div> 
</div> 

現在,在你的CSS文件中添加樣式爲「top_container」類像這樣:

.top_container { 
    //css styles common to the top_container element 
} 

,然後寫這就是獨特的top_container樣式中有關部分:

.top_container_about { 
     //css style unique to the about section 
    } 

這是利用「級聯樣式表」的「級聯」屬性的一種方式。

1

這裏常用的做法是使用基類和該基類的變體。這樣我們對這兩個元素使用基本的css類,並通過用變體類覆蓋一些值來改變它。你沒有指定要如何頂部containter改變,但這裏有一個例子:

.top_container { 
 
    background: #000; 
 
    color: #fff; 
 
    width: 200px; 
 
    height: 50px; 
 
    padding: 10px; 
 
} 
 

 
.top_container.top_container--narrow { 
 
    width: 100px; 
 
}
<div class="top_container"> 
 
    Default 
 
</div> 
 
<div class="top_container top_container--narrow"> 
 
    Narrow 
 
</div>

0

我會做像這樣。因爲在.top-container需要設置爲「默認」樣式的每個頁面上都可能有.top-container。所以CSS層疊樣式表。從頂層級聯,如果一個元素需要有點不同,只需將差異設置爲更具體的定義類。像這樣的東西:

.top-container { 
    /* apply all styles for .top-container */ 
} 

.home.top-container { 
    /* this .top-container will have all styles from .top-container defined above */ 
    /* so only define all DIFFERENT things for .home.top-container here */ 
} 

.about.top-container { 
    /* define all DIFFERENT things for .about.top-container here */ 
    /* like before it will always have the .top-container styles */ 
} 
1

我添加的頁面名稱爲body類,並使用像CSS這樣的更改,如

.style { 
    margin: 0; 
} 

.home .style { 
    margin: 10px; 
} 
1

從我在編碼scss中學到的東西,最好讓你的類名稱成爲一個通用名稱。在CSS中只有你可以把它像這樣:

CSS

.top-container{ 
width: 100%; 
} 

.top-container.about{ 
width:60% 
} 

.top-container.contact{ 
width:30% 
} 

HTML

home.html的

<div class="top-container"></div> 

about.html

<div class="top-container about"></div> 

contact.html

<div class="top-container contact"></div> 

about類將覆蓋您有任何top-container風格。所以它易於使用,簡短而且非常簡單。你可以使用它來使你的班級名稱更普遍。

1

如果兩個頁面上都有相同的元素,例如Header,那麼您可以在兩個頁面上爲它們使用相同的類名,以使它們在兩個頁面上看起來完全相同。爲了對這些元素進行一些更改,您可以使用不同的CSS選擇器。在下面給出的代碼中,我使用了class和id作爲選擇器。

我希望這個答案能夠滿足你的要求。

主頁:標題背景顏色是藍色。

<header class="top_container" id="home_header"> 
     <!--YOUR WEBSITE HEADER--> 
     <h1>TITLE</h1> 
    </header> 
    <div> 
     <!--YOUR SITE CONTENT--> 
    </div> 

關於頁面:標題背景色爲紅色

 <header class="top_container" id="about_header"> 
      <!--YOUR WEBSITE HEADER--> 
      <h1>TITLE</h1> 
     </header> 
     <div> 
      <!--YOUR SITE CONTENT--> 
     </div> 

CSS文件:用於invidual頁

.top_container{ 
    background-color: blue; 
    color: white; 
} 
#about_header{ 
    background-color: red; 
} 
相關問題