2018-12-31 12:53
浏览 123


I want to include header.php file into to one of my pages. Is it possible somehow to have separate header_style.css file for the included file? I mean, I have also included footer.php and noticed that it will inherit all stylings from header_style.css even thought I did not linked it to it. In short, is it possible to have separate CSS files so styles will not be inherited by other included files?

图片转代码服务由CSDN问答提供 功能建议

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

  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

1条回答 默认 最新

  • douzhenzu0247 2018-12-31 17:50

    There seems to be a bit of a misunderstanding of what PHP and CSS files do, and how they contribute to the final look of the page in the browser.

    PHP files generate the HTML which is sent to the browser. CSS files tell the browser how style the HTML once it has it. If you view the raw HTML of a web page, (in Firefox, for example, right-click on a web page and select "View Page Source") you can see what all the php files have generated, no matter how they were included. The browser never sees the php files themselves, only what the server generated after running the php files.

    To see the CSS file(s) in the browser you have to enter the full URL of the style sheet into the browser's address bar. For example the one of the style sheets for this web page has a URL of https://cdn.sstatic.net/Sites/stackoverflow/primary-unified.css?v=6f059d938c2b.

    To control what parts of the page's HTML are controlled by which CSS files, or parts of one CSS file, you need to use "CSS selectors" to connect the HTML and the CSS. A fast explanation of CSS selectors can be found on the w3schools.com website.

    The comments by rickdenhaan and jeff above help to point you in the right direction.

    There is no significance to the browser which included php file actually made the HTML, because it never knows. All the browser knows is that the server sent all the HTML from one URL. To make the header_style.css file only apply to the HTML created by the header.php file, you need to wrap the HTML from header.php in some HTML element that you can then "select" with the header_style.css such as <div id="header"> .... </div> with a rule like div#header { color: red; ...} or maybe <header> ... </header> with a CSS rule like header { color: green; ...}.

    You can do the same kind of selection process in you footer.php file, with other id="..." attributes, of using the <footer> HTML tag and changing the CSS to only select that part by id. The CSS selectors can be used to "select" a lot, body { color: gray; ...} for example will apply the color gray to everything inside the <body> ... </body> tag (everything on the page) that is not changed by some other rule that is more specific. The CSS selectors can be also used to select very little, img#special { border-color: purple; ... } will only affect the one <img id="special" ...> element on the page, no matter how big the page is.

    Anything that the CSS selects will have the style applied to that element, and every element inside that one, unless the CSS selects, and changes the style on some element inside it. Then that style applies to everything inside the more specific element, until some other selector, even more specific, selects an element in there. That process "cascades" until either the browser runs out of elements to move inside of, or runs out of CSS rules to apply.

    打赏 评论