简体   繁体   English

在PHP中使用CSS样式表

[英]Using a CSS stylesheet in PHP

Writing a simple PHP website and having trouble linking the stylesheet to the page. 编写一个简单的PHP网站,将样式表链接到页面时遇到麻烦。 In the past I've had issues with this but usually it ends up working. 过去,我对此一直有疑问,但通常最终都可以解决。

Anything wrong with my code? 我的代码有问题吗? Or am I just doing it wrong? 还是我做错了?

<head>
    <title>San Joaquin Valley Town Hall</title>
    <link href="styles/main.css" media="screen" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" href="styles/normalize.css">
</head>`

(I am using a XAMPP server to run my files) (我正在使用XAMPP服务器来运行我的文件)

Thanks 谢谢

Without understanding your file structure, there isn't much else that can be said here. 在不了解您的文件结构的情况下,这里无话可说。

I'd recommend using a relative link from the root directory of your project. 我建议您使用项目根目录中的相对链接。 Let's say your file structure is something like: 假设您的文件结构如下所示:

[website]
    [resources]
        [styles]
        [images]
        [js]
        ...

Then you're style include would be something like: 然后,您将风格包括在内:

<link rel="stylesheet" href="/resources/styles/my_sheet.css" media="screen" type="text/css"/>

This is personal preference, as I'm not a fan of using directory traversal .. or . 这是个人喜好,因为我不喜欢使用目录遍历... to find files. 查找文件。 In my experience, files end up moving around a bit (we develop our own framework, so things are always changing) so with this we're sure exactly where the file is located just by viewing the href . 以我的经验,文件最终会移动一些(我们开发了自己的框架,所以事情总是在变化),因此,通过查看href我们可以确定文件的确切位置。

The link tag looks fine, however the href is relative. 链接标签看起来不错,但是href是相对的。 Is the styles directory in the same directory as your html? 样式目录与html位于同一目录中吗?

If you can see your stylesheet at http://yoursite.com/styles/main.css , I would change the link to be less relative: 如果您可以在http://yoursite.com/styles/main.css上看到样式表,则可以将链接更改为相对不那么相关:

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

This way, no matter where your HTML page resides in the file structure, the stylesheet will be found. 这样,无论您的HTML页面位于文件结构中的哪个位置,都将找到样式表。

HTML media Attribute HTML媒体属性

Read the page that was recommended and after reading, try this: 阅读推荐的页面,阅读后尝试以下操作:

<head>
  <title>San Joaquin Valley Town Hall</title>
  <link rel="stylesheet" type="text/css" href="styles/main.css" media="screen">
  <link rel="stylesheet" type="text/css" href="styles/normalize.css">
</head>

if the next problem is the directory, try this: 如果下一个问题是目录,请尝试以下操作:

<head>
  <title>San Joaquin Valley Town Hall</title>
  <link rel="stylesheet" type="text/css" href="/styles/main.css" media="screen">
  <link rel="stylesheet" type="text/css" href="/styles/normalize.css">
</head>

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM