简体   繁体   English

带有两个CSS文件的PHP文件

[英]PHP file with two CSS files


editing here: 在这里编辑:

Before continue reading, I wanna be clear that I'm calling two CSS files and just one of them is recognized on my resulting HTML page. 在继续阅读之前,我想清楚地知道我正在调用两个CSS文件,并且在生成的HTML页面上只能识别其中一个。 Common problems are: 常见问题是:

1) wrong name, like a typo. 1)错误的名字,如错字。 (I checked, it's not the case). (我检查了,不是这样)。

2) Wrong directory (I checked, it's not the case too). 2)错误的目录(我检查过,事实并非如此)。

3) Tow files with the same name (Checked...) 3)具有相同名称的两个文件(已选中...)

I already exchanged the position between the link tags and still not working. 我已经在link标记之间交换了位置,但仍然无法正常工作。

Remembering: One CSS file works fine, and the other CSS file which is in the same directory doesn't. 切记:一个CSS文件可以正常工作,而同一目录中的另一个CSS文件却不能。


The original question bellow: 以下是原始问题:

I know this is an elementary question, but I really don't understand what is happening with my code. 我知道这是一个基本问题,但是我真的不明白我的代码正在发生什么。 First, I have a index.php page, which request a password to the user. 首先,我有一个index.php页面,该页面要求用户输入密码。 If everything goes fine here (if statements and validations) I include the real index content through include INCS_PATH.'index.inc'; 如果这里一切正常(如果有语句和验证的话),我将通过include INCS_PATH.'index.inc';包含真实的索引内容include INCS_PATH.'index.inc'; , where INCS_PATH is a constant defined to a directory. ,其中INCS_PATH是定义到目录的常量。

Including this index.inc, I have: 包括这个index.inc,我有:

<head>
    <title>MY TITLE HERE</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" type="text/css" href="<?php echo CSS_PATH; ?>index.css" />
    <link rel="stylesheet" type="text/css" href="<?php echo CSS_PATH; ?>style.css" />
</head>

As we can see, I called two CSS files and the client side got the following code: 如我们所见,我调用了两个CSS文件,客户端得到了以下代码:

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

My style.css is: 我的style.css是:

#content-box {
    display: block;
    margin: auto;
}

.row, .column {
    box-sizing: border-box;
}

.row:before, .row:after {
    content: "";
    display: table;
}

.row:after {
    clear: both;
}

.column {
    float: left;
    position: relative;
    display: block;
}

.column + .column {
    margin-left: 2%;
}

.column-1 {
    width: 6.5%;
}

.column-2 {
    width: 15.0%;
}

.column-3 {
    width: 23.5%;
}

.column-4 {
    width: 32.0%;
}

.column-5 {
    width: 40.5%;
}

.column-6 {
    width: 49.0%;
}

.column-7 {
    width: 57.5%;
}

.column-8 {
    width: 66.0%;
}

.column-9 {
    width: 74.5%;
}

.column-10 {
    width: 83.0%;
}

.column-11 {
    width: 91.5%;
}

.column-12 {
    width: 100.0%;
}

.to-right {
    text-align: right;
}

.to-left {
    text-align: left;
}

.to-center {
    text-align: center;
}

which has a responsive hole in my system. 在我的系统中有一个响应孔。 The index.css is the CSS file to especific style to the index.html as result of the PHP file: index.css是CSS文件,它是PHP文件的特有风格,为index.html

body {
    margin: 0 auto;
    border: 1px solid #000;
    width: 21cm;
}

h1 {
    font-weight: bold;
}

ul.values {
    list-style-type: none;
}

My question: 我的问题:

1) Doesn't matter what I code in my index.css file, it seems isn't recognized by HTML resulting file (main question, if answered, I consider my whole question solved) 1)不管我在index.css文件中编码的内容如何,​​似乎HTML生成的文件都无法识别(主要问题,如果回答了,我认为我的整个问题index.css解决)

2) My last three classes in style.css file .to-left , .to-center and .to-right aren't recognized too... 2)我的style.css文件中的最后三个类.to-left.to-center.to-right也无法识别...

Since now, thank you so much! 从现在开始,非常感谢!

---- editing: more information ----- ----编辑:更多信息-----

Here are my constants _PATH : 这是我的常量_PATH

define('SIST_URL','http://someurl.here');
define('CONFIG_PATH','config/');
define('CSS_PATH','css/');
define('HIDESEEK_PATH','HideSeek/');
define('INCS_PATH','includes/');
define('JQUERY_PATH','jQuery/');
define('JS_PATH','js/');
define('PHP_PATH','php/');
define('IMG_PATH','imagens/');

and here the code source untill my last development: 这是直到我最后的开发的代码源:

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <title>CONTACTO IMÓVEIS | GERADOR DE RELATÓRIOS</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" type="text/css" href="css/style.css" />
    <link rel="stylesheet" type="text/css" href="css/index.css" />
    <script type="text/javascript" src="jQuery/jquery-2.2.0.min.js"></script>
    <script type="text/javascript" src="js/index.js"></script>
</head>
<body>
    <div id="content-box">
        <!-- INCLUINDO CABEÇALHO -->
        <header class="row">
    <span class="column column-2 to-right">&nbsp;</span>
    <span class="column column-2 to-right">&nbsp;</span>
    <span class="column column-2 to-right">
        <img src="imagens/logo.jpg" title="Contacto Imóveis" alt="Logotipo Contacto" />
    </span>
    <span class="column column-2">
        <h1>CONTACTO<br/>IMÓVEIS</h1>
    </span>
    <span class="column column-2 to-right">&nbsp;</span>
    <span class="column column-2 to-right">&nbsp;</span>
</header>       <!-- INCLUINDO CORPO -->
        <section class="row">
            <h2 class="column column-12 to-center">RECIBO DE ENTRADA</h2>
            <form method="post" action="/contacto/index.php">
                <!--                    -->
                <!-- INSERÇÃO DE TEXTO  -->
                <!--                    -->
                <div class="row">
                    <div class="column column-6 to-left">
                        <p>LOCADOR<br/>
                            <input type="text" name="locador" placeholder="Nome completo do locador" />                     </p>
                        <p>LOCATÁRIO<br/>
                            <input type="text" name="locatario" placeholder="Nome completo do locatário" />                         
                        </p>
                        <p>ENDEREÇO<br/>
                            <input type="text" name="endereco" placeholder="Nome da rua, nº, complemento, bairro, cidade - estado" />                       </p>
                    </div>
                    <div class="column column-6 to-right">
                        <p>COMISSÃO
                            <select name="comissao">\n\t<option value="10%" selected>10%</option>\n\t<option value="5%">5%</option>\n</select>                      </p>
                    </div>
                </div>
                <!--                     -->
                <!-- INSERÇÃO DE VALORES -->
                <!--                     -->
                <div class="row">
                    <div class="column column-4 to-left">
                        <ul class="values">
                            <li>Aluguel</li>
                            <li>Multa</li>
                            <li>IPTU</li>
                            <li>Água</li>
                        </ul>
                        <input type="button" value="Inserir campos" id="more-fields" />
                    </div>
                    <div class="column column-4 to-center">
                        <input type="date" name="data" />                       
                    </div>
                    <div class="column column-4 to-right">
                        <ul class="values">
                            <li>R$<input type="text" name="aluguel" placeholder="0,00" /></li>
                            <li>R$<input type="text" name="multa" placeholder="0,00" /></li>
                            <li>R$<input type="text" name="iptu" placeholder="0,00" /></li>
                            <li>R$<input type="text" name="agua" placeholder="0,00" /></li>
                        </ul>
                    </div>
                </div>
                <input type="submit" value="go" />
            </form>
        </section>
        <!-- INCLUINDO RODAPÉ -->
        <footer class="row">
    <span class="column column-4">
        &nbsp;
    </span>
    <span class="column column-4">
        <p>São Gonçalo, _____ / _____ / _____</p>
        <p>Assinatura: _________________________________</p>
    </span>
    <span class="column column-4">
        &nbsp;
    </span>
    <hr class="column column-12" />
    <address class="column column-12">
        <p>(21) 2712-0651   |   Rua Coronel Moreira César, 151 - Centro - São Gonçalo - RJ  |   www.contactoimoveis.com.br</p>
    </address>
</footer>   </div>
</body>
</html>

Does you index.php page include any inline styles that could be overwriting the styles in the stylesheets? 您的index.php页面是否包含任何可能覆盖样式表中的样式的内联样式? Have you posted the full contents of your stylesheets as specifity could be a factor here. 您是否已张贴样式表的全部内容,因为这里的特殊性可能是一个因素。 When viewing your source code, if you follow the links to your stylesheets do they display correctly in a browser on their own? 查看源代码时,如果您遵循样式表的链接,它们是否可以正确地在浏览器中正确显示? eg yousite.com/css/style.css 例如yousite.com/css/style.css

You probably need to prepend your CSS path with a forward slash as it looks like the base path has not been set. 您可能需要在CSS路径前加上一个正斜杠,因为它似乎尚未设置基本路径。

define('CSS_PATH','/css/');

That could fix your issue. 那可以解决您的问题。

A hot tip: Use your browser to view the source and see if you can click the urls for the CSS files. 热门提示:使用浏览器查看源,看看是否可以单击CSS文件的URL。 If you get a 404 not found error, you know that the browser can't find the stylesheets.. 如果收到404 not found错误,则说明浏览器找不到样式表。

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

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