php - 使用 PHP 的 CSS 排序包括

Question

我开始整合 PHP 以简化我的网站。

首先，我使用 php include 来调用所有页面都使用的 header 。

标题链接到特定样式表 stylesheet_header，然后页面的其余部分使用另一个样式表 stylesheet_content。

该页面具有以下基本布局:

wrap div
php include header
content div
content div
footer div

问题:一旦标题被调用，它的样式表 (stylesheet_header) 就会应用于页面的其余部分。

我认为解决方案是在页眉之后调用 content_stylesheet，这部分有效但改变了页眉和内容中的某些位置格式。

有没有明显的解决方案？

Answer 1

样式表的范围不基于它们在页面中的位置，仅基于其中的规则。所以下面的样式表规则总是适用于所有 p页面上的元素，无论规则本身出现在哪里:

p { font-size: 50%; }

对此的明显解决方案是为页面中的每个容器提供一个 ID 或类，可用于更严格地限定规则范围。请记住，ID 在呈现的页面中必须始终是唯一的，因此页面上可能多次包含的任何 block 都应该由类标识(这包括搜索表单的内容，即使您当前的设计有一个独特的位置)。

所以你可能有像这样的单独规则:

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

通常，您会希望根据样式规则适用于哪些 block 来对样式规则进行分组，因此您会发现许多规则彼此相邻且具有相同的前缀。您可以使用支持嵌套规则的服务器端 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 文档类型(并且已针对旧浏览器采取适当的预防措施)，则可以使用“语义”容器而不是 div具有 ID 或类的元素，以便(连同 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
}