使用PHP進行CSS排序包括

爲了簡化我的網站，我正在盯着整合PHP。使用PHP進行CSS排序包括

首先，我使用php include調用所有頁面使用的標題。

標題鏈接到特定的樣式表stylesheet_header，然後頁面的其餘部分使用另一個樣式表stylesheet_content。

頁有這個基本的佈局：

wrap div 
php include header 
content div 
content div 
footer div

問題：一旦頭被調用時，它的樣式表（stylesheet_header）被應用到頁面的其餘部分。

我認爲解決方案是在標題後面調用content_stylesheet，這部分工作，但會改變標題和內容中的某些位置格式。

有沒有一個明顯的解決方案？

來源

2013-12-03 user2595553

是，編寫你的課程，以免它們在整個頁面上與彼此衝突，並以相同的原因爲您的CSS添加相關容器。 –

樣式表沒有根據它們被包含在頁面中的位置來確定作用域，僅基於它們中的規則。所以下面的樣式規則總是適用於網頁上的所有p元素，無論規則本身出現：

p { font-size: 50%; }

這個顯而易見的解決辦法就是給你的頁面中每個容器可用於ID或類規則更加緊密。請記住，在呈現的頁面中，ID必須始終是唯一的，因此任何可能在頁面上多次包含的塊應由類標識（這包括搜索表單的內容等內容，即使您的當前設計它有獨特的位置）。

所以，你可能有單獨的規則，像這樣：

#header p { font-size: 50%; } 
#main_content p { font-size: 100%; } 
.sidebar_block p { font-size: 90%; }

一般情況下，你會想要將你的樣式規則由塊它們適用於，所以你會發現自己有很多的規則旁邊彼此具有相同的前綴。您可以通過使用支持嵌套規則的服務器端CSS預處理器（如LESS或SCSS（SASS））來節省冗餘。

LESS最初是用JavaScript開發的，SASS/SCSS是用Ruby開發的，但兩者的實現都可以用PHP， these from leafo.net。雙方將允許你寫這篇文章，它會被渲染爲相同的CSS與上面的例子：

#header { 
    p { font-size: 50%; } 
    // other rules within #header 
} 
#main_content { 
    p { font-size: 100%; } 
    // other rules within #main_content 
} 
.sidebar_block { 
    p { font-size: 90%; } 
    // other rules within .sidebar_block 
}

最後，如果你使用的是HTML5的doctype（並採取適當的預防措施，對舊版瀏覽器），你可以使用「語義」的容器，而不是與ID或類div元素，使（連同一個CSS預處理器），你可以這樣結束了（其中<header>，<main>和<aside>都是new elements in HTML5）：

header { 
    p { font-size: 50%; } 
    // other rules within #header 
} 
main { 
    p { font-size: 100%; } 
    // other rules within #main_content 
} 
aside { 
    p { font-size: 90%; } 
    // other rules within .sidebar_block 
}

來源

2013-12-03 20:05:56 IMSoP

感謝您的詳細解答。需要優化我的代碼！ – user2595553

使用PHP進行CSS排序包括

回答

相關問題