1

Por sugestão desta resposta, estou tentando utilizar o normalize.css pra zerar os estilos entre um require e outro, mas não tem jeito, a CSS do arquivo posterior interfere completamente no layout do arquivo anterior. Isso não altera o resto da página, o problema é apenas entre eles.

Se coloco apenas um arquivo tudo bem, fica perfeito, mas quando incluo outro dá problema entre eles.

O HTML com o PHP:

 <div class="row">
        <div class="col-md-2"></div>
        <div class="col-md-8">

            <?php
                require "arquivo1.html";
            ?>

        </div>

        <div class="col-md-2"></div>
    </div>
    <br>
    <div class="row">
        <div class="col-md-2"></div>
        <div class="col-md-8">

           <?php
                if ($var1 == "incluiarq");
                require "arquivo2.html";
            ?>
    </div>
    <div class="col-md-2"></div>
    </div

O arquivo1.html (o arquivo2 é basicamente igual, mas com as CSS diferentes):

<link rel="stylesheet" href="_css/normalize.css">

<style type="text/css">

    ol{margin:0;padding:0}.c1{widows:2;orphans:2;text-indent:86pt;text-align:justify;direction:ltr}.c6{max-width:468pt;background-color:#ffffff;padding:72pt 72pt 72pt 72pt}.c0{font-size:12pt;font-family:"Times New Roman"}.c5{color:inherit;text-decoration:inherit}.c8{font-size:14pt;font-family:"Times New Roman"}.c2{font-weight:bold}.c4{text-decoration:underline}.c3{height:11pt}.c7{font-style:italic}.title{widows:2;padding-top:0pt;line-height:1.15;orphans:2;text-align:left;color:#000000;font-size:21pt;font-family:"Trebuchet MS";padding-bottom:0pt;page-break-after:avoid}.subtitle{widows:2;padding-top:0pt;line-height:1.15;orphans:2;text-align:left;color:#666666;font-style:italic;font-size:13pt;font-family:"Trebuchet MS";padding-bottom:10pt;page-break-after:avoid}li{color:#000000;font-size:11pt;font-family:"Arial"}p{color:#000000;font-size:11pt;margin:0;font-family:"Arial"}h1{widows:2;padding-top:10pt;line-height:1.15;orphans:2;text-align:left;color:#000000;font-size:16pt;font-family:"Trebuchet MS";padding-bottom:0pt;page-break-after:avoid}h2{widows:2;padding-top:10pt;line-height:1.15;orphans:2;text-align:left;color:#000000;font-size:13pt;font-family:"Trebuchet MS";font-weight:bold;padding-bottom:0pt;page-break-after:avoid}h3{widows:2;padding-top:8pt;line-height:1.15;orphans:2;text-align:left;color:#666666;font-size:12pt;font-family:"Trebuchet MS";font-weight:bold;padding-bottom:0pt;page-break-after:avoid}h4{widows:2;padding-top:8pt;line-height:1.15;orphans:2;text-align:left;color:#666666;font-size:11pt;text-decoration:underline;font-family:"Trebuchet MS";padding-bottom:0pt;page-break-after:avoid}h5{widows:2;padding-top:8pt;line-height:1.15;orphans:2;text-align:left;color:#666666;font-size:11pt;font-family:"Trebuchet MS";padding-bottom:0pt;page-break-after:avoid}h6{widows:2;padding-top:8pt;line-height:1.15;orphans:2;text-align:left;color:#666666;font-style:italic;font-size:11pt;font-family:"Trebuchet MS";padding-bottom:0pt;page-break-after:avoid}

</style>

<p class="c1">
    <span class="c2 c8">Loren</span>
</p>
<p class="c1">
    <span class="c0">&nbsp;</span>
</p>
<p class="c1">
    <span class="c0">.</span>
</p>
<p class="c1">
    <span class="c0">&nbsp;</span>
</p>
<p class="c1">
    <span class="c0">Loren ipsumLoren ipsumLoren ipsumLoren ipsumLoren ipsum</span> <span class="c0 c2">Loren ipsum</span></p>
<p class="c1">
    <span class="c0">&nbsp;</span>
</p>
<p class="c1">
    <span class="c0">Loren ipsumLoren ipsumLoren ipsumLoren ipsum</span>
</p>
<p class="c1">
    <span class="c0">&nbsp;</span>
</p>
<p class="c1">
    <span class="c0">Loren ipsum,</span> <span class="c0 c7">data venia,</span>
    <span class="c0">Loren ipsumLoren ipsumLoren ipsum</span>
    <span class="c0 c2">Loren ipsumLoren ipsumLoren ipsum</span>

</p>

Estes arquivos eram originalmente docs feitos no google drive, e foram convertidos pra HTML pelo próprio google drive, então ele gera este monte de css, mas de forma surpreendente fica perfeito :-) quando incluo apenas um.

Este que postei acima (arquivo1.html) é o arquivo inteiro que estou incluindo, eu retirei todo o cabeçalho e as tags de fechamento pra que não interferisse, e se coloco apenas um tudo bem, mas quando coloco o segundo dá problema. Alguma ideia?

4
  • remove o css inline das páginas e cria uma arquivo pra cada style, na hora de incluir inclua o css referente à cada arquivo 1/06/2015 às 2:04
  • @ErlonCharles Você diz criar um arquivo CSS com a formatação que vem no arquivo HTML? Tentei isso mas não funcionou, ele continua sobrepondo as CSS's. Ou vc diz criar um arquivo css só e aplicar em todos de acordo com as classes? O problema, se for isso, é que ele cria atributos diferentes para as classes... Por exemplo .c1 num arquivo é .c1{ font-size:14pt; font-family:"Times New Roman"; font-weight:bold} enquanto no outro é .c1{ widows:2; orphans:2; text-indent:86pt; text-align:justify; direction:ltr
    – gustavox
    1/06/2015 às 2:42
  • Em tempo: testei utilizando arquivos externos com e sem o normalizecss... Com normalize usei assim no início do arquivo <link rel="stylesheet" href="_css/normalize.css"> <link rel="stylesheet" href="arquivo1.css">
    – gustavox
    1/06/2015 às 2:50
  • Só pra constar, até encontrei uma <s>forma</s> gambiarra pra contornar isso, que foi usando um plugin do google drive pra mesclar todos os arquivos em um só, e depois gerei apenas um arquivo HTML. Daí poderia usar esta CSS pra todos os arquivos individuais (depois de separar de novo o arquivo mesclado), mas quer saber, achei que ia ficar uma bela porcaria, e decidi reescrever tudo, usando poucas tags, e pouco CSS, afinal, é só um arquivo de texto, não tem sentido usar todo esse CSS e esse HTML doido que o google drive gera.
    – gustavox
    1/07/2015 às 19:39

1 Resposta 1

1

Isso possivelmente se da por conta de especifidade do seu arquivo .css sobrescrevendo seletores de tipo. Aconselharia linkar no arquivo .html principal o normalize .css (apenas para reset) e outro .css para gerir responsabilidades de estilo Ex: (main.css) e nesse arquivo fazer um import de dois .css com responsabilidades diferentes de estilização tipo: (doc-1.css e doc-2.css)

Arquivo .html ...

<head>
<link rel="stylesheet" type="text/css" href="css/base/normalize.css">
<link rel="stylesheet/less" type="text/css" href="css/main.css">
</head>

Arquivo .css...

@import "../doc-1.css";
@import "../doc-2.css";
2
  • Valeu pela resposta, quando tiver um tempo vou testar e retorno aqui. +1
    – gustavox
    28/07/2015 às 20:34
  • 1
    @gustavox Apenas um adendo lembre-se que os .css dos docs não podem ter as mesmas classes se não realmente sempre vai sobrescrecer e o que vai prevalecer é a especifidade do seletor . Uma saida é definir um prefixo para classe de cada doc. Ex: .doc-c1, .doc2-c1... E injetar isso via javascript. Abs.
    – dic-chen
    28/07/2015 às 21:21

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .