使用PHP进行CSS排序包括

Question

我开始加入PHP，以简化我的网站。

首先，我正在使用php包含来调用一个标题，该标题用于遍历所有页面。

标题链接到特定的样式表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或类可以用来更严格地调整规则的范围。请记住，在呈现的页面中，ID必须始终是唯一的，因此页面上可能包含多次的任何块都应该由类来标识(这包括类似于搜索表单的内容，即使当前的设计具有独特的位置)。

因此，您可能会有这样的单独规则：

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

通常，您会希望将您的样式规则按它们应用到的块分组，这样您就会发现自己有许多具有相同前缀的规则。您可以通过使用服务器端CSS预处理器(如CSS或SCSS (SASS) )来节省冗余，后者支持嵌套规则。

LESS最初是用JavaScript开发的，而was /SCSS则是在Ruby中开发的，但是两者的实现都可以在PHP中使用，例如这些是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文档类型(并对旧浏览器采取了适当的预防措施)，您可以使用“语义”容器，而不是带有ID或类的div元素，这样(与CSS预处理器一起)您就可以得到这样的结果(其中<header>、<main>和<aside>都是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
}