如何在不将这些样式传递给其他包含文件的情况下设置包含文件的样式
How to style included files without passing these styles to other included files
我想将 header.php
文件包含到我的一个页面中。是否有可能以某种方式为包含的文件提供单独的 header_style.css
文件?我的意思是,我还包含了 footer.php
并注意到它将继承 header_style.css
的所有样式,即使我没有将它链接到它。简而言之,是否可以有单独的 CSS 文件,这样样式就不会被其他包含的文件继承?
似乎对 PHP 和 CSS 文件的作用,以及它们如何影响页面在浏览器中的最终外观存在一些误解。
PHP 文件生成发送到浏览器的 HTML。 CSS 文件告诉浏览器如何设置 HTML 的样式。如果您查看网页的原始 HTML,(例如,在 Firefox 中,右键单击网页并 select "View Page Source")您可以看到所有 php 文件已生成,无论它们是如何包含的。浏览器永远不会看到 php 文件本身,只会看到服务器在 运行 php 文件之后生成的内容。
要在浏览器中查看 CSS 文件,您必须在浏览器的地址栏中输入样式 sheet 的完整 URL。例如,此网页的样式之一 sheet 的 URL 为 https://cdn.sstatic.net/Sites/Whosebug/primary-unified.css?v=6f059d938c2b。
要控制页面 HTML 的哪些部分由哪些 CSS 文件控制,或者一个 CSS 文件的部分,您需要使用 "CSS selectors" 连接HTML 和 CSS。 CSS select 的快速解释可以在 w3schools.com 网站上找到。
以上 rickdenhaan and jeff 的评论有助于为您指明正确的方向。
对于包含 php 文件的浏览器来说没有意义,实际上是 HTML,因为它永远不知道。浏览器只知道服务器从一个 URL 发送了所有 HTML。要使 header_style.css
文件仅适用于由 header.php
文件创建的 HTML,您需要将 header.php
中的 HTML 包装在一些 HTML 元素,然后您可以 "select" 与 header_style.css
例如 <div id="header"> .... </div>
与规则 div#header { color: red; ...}
或者 <header> ... </header>
与 CSS 规则header { color: green; ...}
.
您可以在 footer.php
文件中使用 <footer>
HTML 的其他 id="..."
属性执行相同类型的 selection 过程标记并通过 id
将 CSS 更改为仅 select 那个部分。 CSS select 或 "select" 有很多用途,例如 body { color: gray; ...}
会将灰色应用于 <body> ... </body>
标签内的所有内容( page) 没有被其他一些更具体的规则改变。 CSS select or 也可以用到 select 很少, img#special { border-color: purple; ... }
只会影响页面上的一个 <img id="special" ...>
元素,不管它有多大页面是。
任何 CSS select 元素的样式都会应用到该元素, 以及该元素中的每个元素,除非 CSS selects,并更改其中某些元素的样式。然后该样式适用于更具体的元素内的所有内容,直到其他 select 或更具体的 select 元素在其中。该过程 "cascades" 直到浏览器用完所有可移入其中的元素,或用完 CSS 个要应用的规则。
我想将 header.php
文件包含到我的一个页面中。是否有可能以某种方式为包含的文件提供单独的 header_style.css
文件?我的意思是,我还包含了 footer.php
并注意到它将继承 header_style.css
的所有样式,即使我没有将它链接到它。简而言之,是否可以有单独的 CSS 文件,这样样式就不会被其他包含的文件继承?
似乎对 PHP 和 CSS 文件的作用,以及它们如何影响页面在浏览器中的最终外观存在一些误解。
PHP 文件生成发送到浏览器的 HTML。 CSS 文件告诉浏览器如何设置 HTML 的样式。如果您查看网页的原始 HTML,(例如,在 Firefox 中,右键单击网页并 select "View Page Source")您可以看到所有 php 文件已生成,无论它们是如何包含的。浏览器永远不会看到 php 文件本身,只会看到服务器在 运行 php 文件之后生成的内容。
要在浏览器中查看 CSS 文件,您必须在浏览器的地址栏中输入样式 sheet 的完整 URL。例如,此网页的样式之一 sheet 的 URL 为 https://cdn.sstatic.net/Sites/Whosebug/primary-unified.css?v=6f059d938c2b。
要控制页面 HTML 的哪些部分由哪些 CSS 文件控制,或者一个 CSS 文件的部分,您需要使用 "CSS selectors" 连接HTML 和 CSS。 CSS select 的快速解释可以在 w3schools.com 网站上找到。
以上 rickdenhaan and jeff 的评论有助于为您指明正确的方向。
对于包含 php 文件的浏览器来说没有意义,实际上是 HTML,因为它永远不知道。浏览器只知道服务器从一个 URL 发送了所有 HTML。要使 header_style.css
文件仅适用于由 header.php
文件创建的 HTML,您需要将 header.php
中的 HTML 包装在一些 HTML 元素,然后您可以 "select" 与 header_style.css
例如 <div id="header"> .... </div>
与规则 div#header { color: red; ...}
或者 <header> ... </header>
与 CSS 规则header { color: green; ...}
.
您可以在 footer.php
文件中使用 <footer>
HTML 的其他 id="..."
属性执行相同类型的 selection 过程标记并通过 id
将 CSS 更改为仅 select 那个部分。 CSS select 或 "select" 有很多用途,例如 body { color: gray; ...}
会将灰色应用于 <body> ... </body>
标签内的所有内容( page) 没有被其他一些更具体的规则改变。 CSS select or 也可以用到 select 很少, img#special { border-color: purple; ... }
只会影响页面上的一个 <img id="special" ...>
元素,不管它有多大页面是。
任何 CSS select 元素的样式都会应用到该元素, 以及该元素中的每个元素,除非 CSS selects,并更改其中某些元素的样式。然后该样式适用于更具体的元素内的所有内容,直到其他 select 或更具体的 select 元素在其中。该过程 "cascades" 直到浏览器用完所有可移入其中的元素,或用完 CSS 个要应用的规则。