如何设置包含文件的样式而不将这些样式传递给其他包含文件

时间:2018-12-31 12:53:55

标签: php css inheritance include

我想将header.php文件包含到我的页面之一中。是否可以以某种方式为包含的文件使用单独的header_style.css文件?我的意思是,我还包括了footer.php,并注意到它会继承header_style.css的所有样式,即使我没有将其链接到它。简而言之,是否可以有单独的CSS文件,以便样式不会被其他包含的文件继承?

1 个答案:

答案 0 :(得分:1)

PHP和CSS文件的功能以及它们如何影响浏览器页面的最终外观似乎有些误解。

PHP文件生成HTML,该HTML发送到浏览器。 CSS文件告诉浏览器,一旦HTML具有样式,便会如何。如果您查看网页的原始HTML(例如,在Firefox中,右键单击网页并选择“查看页面源代码”),则无论它们如何包含,您都可以查看所有php文件已生成的内容。浏览器从不会看到php文件本身,而只能看到服务器在运行php文件后生成的内容。

要在浏览器中查看CSS文件,您必须在浏览器的地址栏中输入样式表的完整URL。例如,此网页的样式表之一的URL为https://cdn.sstatic.net/Sites/stackoverflow/primary-unified.css?v=6f059d938c2b

要控制页面的HTML的哪些部分由哪个CSS文件或一个CSS文件的一部分控制,您需要使用“ CSS选择器”来连接HTML和CSS。可以在w3schools.com网站上找到CSS选择器的快速说明。

上面rickdenhaanjeff的注释有助于您指出正确的方向。

对于包含php文件的浏览器来说,实际上并没有HTML的意义,因为它永远不知道。浏览器只知道服务器从一个URL发送了所有HTML。要使header_style.css文件仅适用于header.php文件创建的HTML,您需要将header.php中的HTML包装在某些HTML元素中,然后可以使用{像header_style.css这样的{1}}和<div id="header"> .... </div>这样的规则,或者div#header { color: red; ...}这样的CSS规则就像<header> ... </header>

您可以使用其他header { color: green; ...}属性在footer.php文件中使用id="..." HTML标记并更改CSS以仅通过<footer>。 CSS选择器可用于“选择”很多,例如id会将灰色应用到body { color: gray; ...}标记内的所有内容(页面上的所有内容),而其他规则不会更改更具体。 CSS选择器也可以用来选择很少的内容,无论页面有多大,<body> ... </body>只会影响页面上的一个img#special { border-color: purple; ... }元素。

CSS选择的所有内容都将样式应用于该元素,以及该元素中的每个元素,除非CSS选择并更改其中的某个元素的样式。然后,该样式将应用于更具体的元素内部的所有内容,直到其他更具体的选择器在其中选择一个元素为止。该过程会“级联”,直到浏览器用完所有元素以将其移入内部或用完CSS规则为止。