2017-02-01 4 views
0

J'utilise le code html suivant avec wordpress pour créer des onglets. J'utilise aussi un css personnalisé qui essaie de modifier certains des formats de titres. Lorsque je supprime la 4ème ligne du code suivant(), mon style fonctionne correctement. Mais lorsque j'inclus cette ligne, mes styles changent, y compris le type de police. Comment puis-je résoudre ça?w3.css modifie mes styles personnalisés

  <html> 
     <title>W3.CSS</title> 
     <meta name="viewport" content="width=device-width, initial-scale=1"/> 
     <link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css"/> 
     <body> 

     <div class="w3-container" style="margin-top: -50px;"> 
      <ul class="w3-navbar w3-black"> 
      <li><a href="javascript:void(0)" class="tablink w3-blue" onclick="openCity(event, 'London');">London</a></li> 
      <li><a href="javascript:void(0)" class="tablink" onclick="openCity(event, 'Paris');">Paris</a></li> 
      <li><a href="javascript:void(0)" class="tablink" onclick="openCity(event, 'Tokyo');">Tokyo</a></li> 
      </ul> 

      <div id="London" class="w3-container w3-border city"> 
      <h2>London</h2> 
      <p>London is the capital city of England.</p> 
      </div> 

      <div id="Paris" class="w3-container w3-border city" style="display:none"> 
      <h2>Paris</h2> 
      <p>Paris is the capital of France.</p> 
      </div> 

      <div id="Tokyo" class="w3-container w3-border city" style="display:none"> 
      <h2>Tokyo</h2> 
      <p>Tokyo is the capital of Japan.</p> 
      </div> 
     </div> 

     <script> 
     function openCity(evt, cityName) { 
      var i, x, tablinks; 
      x = document.getElementsByClassName("city"); 
      for (i = 0; i < x.length; i++) { 
       x[i].style.display = "none"; 
      } 
      tablinks = document.getElementsByClassName("tablink"); 
      for (i = 0; i < x.length; i++) { 
       tablinks[i].className = tablinks[i].className.replace(" w3-red", ""); 
      } 
      document.getElementById(cityName).style.display = "block"; 
      evt.currentTarget.className += " w3-red"; 
     } 
     </script> 
     </body> 
     </html> 
+0

«J'utilise aussi un CSS personnalisé qui tente de modifier certains des formats de titre. " - Pas dans le code que vous avez fourni. – Quentin

+0

"Lorsque j'inclus cette ligne, mes styles changent, y compris le type de police, comment puis-je résoudre ce problème?" - Si vous n'aimez pas les changements apportés par w3.css, ne l'incluez pas (il est généralement préférable d'éviter quoi que ce soit de W3Schools de toute façon) ou écrivez des styles qui le surchargent. (Lisez sur la cascade, c'est une partie très basique et importante de CSS). – Quentin

Répondre

0

J'ai également dû faire face même problème et solution trouvée

ouvrir votre fichier w3.css et supprimer les styles appliqués au niveau mondial.

comme html {// styles}

corps

{styles}. Gardez juste les styles appliqués en fonction des classes.

comme .w3-vert {// styles}. w3-entrée {// styles}

Dans votre cas supprimer les lignes de 1 à 37 dans le fichier w3.css il fonctionnera bien sans changer vos styles