php如何包含访问css文件

I recently asked a question about my php includes and received the answer. Now that the include accesses the correct file, my html/css/javascript web pages show some hope. The only issue is that the php includes of the pages have this look:

PHP include page (not accessing css)

Instead of this:

What the page should look like (this page is not using php includes)

Is there a way for the php includes to access the css files? My current code for one page that contains the includes is:

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css" type="text/css" />
<script type="text/javascript" src="main.js"></script>
<title> Water Polo, The Best Sport</title>
</head>
<body>
<div class="wrapper">
<?php
include'../includes/header.php';
?>
<?php
include'../includes/navbar.php';
?>
<div class= "content">
</div>
<?php
include'../includes/footer.php';
?>
</div>
</body>
</html>

Header.php

<?php echo'<div class ="header">
<h1>The Best Sport</h1>
<h1 class="sitetitle">AllWaterPolo</h1>
<img src ="img/51wmckj8p1l__sx300__1.png" class="wpball" alt="Water Polo Ball" />
<h2 class="homeScreenLink"> <a href ="index.html">Water Polo!</a></h2></div>';>

To develop the website I am currently using MAMP and running the code which is in a folder by putting it in htdocs.

I took the header out of the php include and made the css file work with the document, but one thing remains the same. The code that I included in the document via php does not take on the effects of the css document, but the header, which now is out of the include and is written write in the document works. Is there a way to allow the code which has been included via php to access the working css file? If it would facilitate the answering process, I'll post any necessary pictures. Just comment below.

You have correctly identified the problem, that the HTML cannot find the CSS. That is directly because of this tag:

<link rel="stylesheet" href="styles.css" type="text/css" />

Specifically, this part of the tag:

href="styles.css"

You have told your code to look for the styles.css file in the same directory as the index.php file. Is that correct?

Usually, the web site structure looks like this:

public_html
    - css
    - js
    - includes
    - img

Your website seems to be structured like this:

includes
public_html

Imagine yourself inside the index.php file. All files that are INCLUDEd become part of index.php, as if they were there originally. So, you are expecting to find the CSS file here (as per your <link rel="stylesheet" tag):

public_html/style.css

If they are really inside a CSS folder, then perhaps this will fix it:

<link rel="stylesheet" href="css/styles.css" type="text/css" />

Update:

No need to echo out your HTML in PHP, you can literally just do this:

header.php

<div class ="header">
    <h1>The Best Sport</h1>
    <h1 class="sitetitle">AllWaterPolo</h1>
    <img src ="img/51wmckj8p1l__sx300__1.png" class="wpball" alt="Water Polo Ball" />
    <h2 class="homeScreenLink"> <a href ="index.html">Water Polo!</a></h2>
</div>

If the other include files are similar, then it appears your rendered file will all be HTML. Therefore, the next step is: where is your style sheet? Try this. In the address bar of your browser, type:

localhost/styles.css

And see if your stylesheet appears. If not, try this:

localhost/css/styles.css

If the second one works, then change this:

<link rel="stylesheet" href="styles.css" type="text/css" />

to this:

<link rel="stylesheet" href="css/styles.css" type="text/css" />

Note: I might not have your path structure correct. Amend as required.

Short answer = no.

You may want to look into using SASS. Besides minifying the css files, you can also set it up so the main (in your case styles.css) pull from several SASS files. For example you could have the following SASS files: main.scss, header.scss, navbar.scss, & footer.scss. If your IDE supports SASS, when you save any one of these files it can automatically compile all four into your styles.css file. Then all you need is to reference that one file and you are set.

http://thesassway.com/beginner/how-to-structure-a-sass-project