Question

我正在盯着合并PHP以简化我的网站。

首先，我使用php include来调用在所有页面中使用的标题。

标题链接到特定样式表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必须始终是唯一的，因此任何可能在页面上包含多次的块都应该由类标识（这包括搜索表单的内容，即使您当前的设计它有一个独特的位置。）

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

#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
}

使用PHP进行CSS排序包括

1 个答案: