Dev Faq
7
votes

Classe de balises H1 (alternative)

Je sais que la balise H1 est importante pour le référencement, de sorte que tout mon titre est H1 (bravo!)

Maintenant, j'ai besoin d'un titre (comme première ligne d'un texte) un peu différent sur certaines pages.

Habituellement, je viens de dupliquer H1 comme H2 et alternatif.

La question: est-il possible d'ajouter une classe à la balise de titre ... (j'ai essayé sans succès)

2 commentaires

Veuillez poster votre code ou votre URL.

J'ai essayé de la portée, mais il baise la marge / rembourrage

7 Réponses :

3
votes

vous peut em> ajouter une classe à un

code> tag. Comme ceci: 
<style type="text/css">
.myclass { color : green }
</style>

0 commentaires
14
votes

Bien sûr, vous pouvez: 

<h1 class="someclass">…</h1>

4 commentaires

désolé mais ça ne fait rien!

@ Marc-Andre Menard: L'attribut de classe est juste de compter cet élément parmi la classe donnée. Que pensez-vous que cela fasse?

Désolé mon erreur, dupliquer le H1 et le faire H1 .Someclass maintenant, il fonctionnait bien sans le H1 Thag, juste la classe!

@ Marc-andre Menard: Si vous souhaitez sélectionner uniquement des éléments H1 d'une classe spécifique, utilisez le sélecteur H1.Someclass CSS.

0
votes

La balise est dans votre section <Head>, il ne serait donc pas de sens d'ajouter une classe à cela. <p> Vous pouvez ajouter une classe à votre balise <H1>, cependant. </ p> <pré> xxx </ pré> </ p> </div> <hr> <!-- comments --> <div class="pl-5"> <small class="text-muted">0 commentaires</small> <div class="comments mt-3"> </div> </div> </div> </div> <hr> <div class="row mt-3"> <div class="col-lg-1 col-md-2 col-2 col-sm-2 text-center pt-1 mx-0 px-0"> <div class="badge badge-score"> 20<br> votes </div> </div> <div class="col-lg-11 col-md-10 col-10 col-sm-10"> <div class="body-content"> <p> Vous pouvez styler une en-tête comme ceci: <pré> xxx </ pré> <p> ou comme ceci: </ p> <pré> xxx </ pré> <p> si cela ne fonctionne pas: </ P> <ul> <li> Vérifiez que vous n'avez pas d'ancienne feuille de style cache (CTRL-F5 à recharger) </ li> <li> Vérifiez que vous n'avez aucune règle de remplacement de votre classe (inspecter avec Firebug ou similaire est très utile ici). </ LI> <li> Vérifiez les fautes de frappe dans le HTML et CSS </ LI> </ ul> <p> edit: </ p> <p> On dirait que vous aviez <code> H1 .MClass </ code> au lieu de <code> h1.myclass </ code> - il existe une distinction importante: < / p> <pré> xxx </ pré> </ p> </div> <hr> <!-- comments --> <div class="pl-5"> <small class="text-muted">0 commentaires</small> <div class="comments mt-3"> </div> </div> </div> </div> <hr> <div class="row mt-3"> <div class="col-lg-1 col-md-2 col-2 col-sm-2 text-center pt-1 mx-0 px-0"> <div class="badge badge-score"> 1<br> votes </div> </div> <div class="col-lg-11 col-md-10 col-10 col-sm-10"> <div class="body-content"> <p> Les éléments suivants doivent fonctionner: <pre><html> <head> <style type="text/css"> h1.custom { color: red; font-size: 16px; } </style> </head> <body> <h1 class="custom"> test </h1> </body> </html> </pre></p> </div> <hr> <!-- comments --> <div class="pl-5"> <small class="text-muted">0 commentaires</small> <div class="comments mt-3"> </div> </div> </div> </div> <hr> <div class="row mt-3"> <div class="col-lg-1 col-md-2 col-2 col-sm-2 text-center pt-1 mx-0 px-0"> <div class="badge badge-score"> 7<br> votes </div> </div> <div class="col-lg-11 col-md-10 col-10 col-sm-10"> <div class="body-content"> <p> On dirait que vous utilisez <code> h1 code> pour tous les titres de la page. En règle générale, vous auriez une seule balise <code> H1 code> sur la page pour la contenant de la page (avec le texte correspondant au moins au titre de la page) et des étiquettes d'en-tête moindre pour les titres de différentes parties du contenu. De cette façon, vous donnez la plupart des informations aux moteurs de recherche sur ce qui est important sur la page. Il y a bien sûr des pages qui ne rentrent pas dans ce modèle, mais beaucoup font. <p> Il existe de nombreuses façons différentes que vous pouvez spécifier un style pour les en-têtes. Par exemple: p> </p><p> pour tous <code> H1 code> Tags: p> <pr> xxx pré> <p> pour tous <code> H1 code> et <code> H2 CODE> Tags: P> <pre>.More h3 { text-decoration: underline; } </pre></code></code></p></pr></code></p></code></code></p> </div> <hr> <!-- comments --> <div class="pl-5"> <small class="text-muted">0 commentaires</small> <div class="comments mt-3"> </div> </div> </div> </div> <hr> <div class="row mt-3"> <div class="col-lg-1 col-md-2 col-2 col-sm-2 text-center pt-1 mx-0 px-0"> <div class="badge badge-score"> 0<br> votes </div> </div> <div class="col-lg-11 col-md-10 col-10 col-sm-10"> <div class="body-content"> <p> <pre><div class='row' id='content-wrapper'> <div class='clear'/> <b:if cond='data:blog.pageType == &quot;error_page&quot;'> <div id='error-wrap'> <h1 class='error-item'>404</h1> <h2>Page Not Found!</h2> <p>Sorry, the page you were looking for in this blog does not exist.</p> <div class='clear'/> <a class='homepage' expr:href='data:blog.homepageUrl'><i class='fa fa-home'/> Go To Home</a> </div> </pre></p> </div> <hr> <!-- comments --> <div class="pl-5"> <small class="text-muted">1 commentaires</small> <div class="comments mt-3"> <p class="answer-comment"> Ajoutez des explications avec la réponse à la manière dont cette réponse aide à la résolution de la question actuelle </p> <hr> </div> </div> </div> </div> <hr> </div> <div class="col-lg-3 col-md-12 col-12 col-sm-12" > <div class="related"> <iframe src="https://rcm-eu.amazon-adsystem.com/e/cm?o=8&p=12&l=ez&f=ifr&linkID=b777da379e25dfc65f34887292b82918&t=birdy0c-21&tracking_id=birdy0c-21" width="300" height="250" scrolling="no" border="0" marginwidth="0" style="border:none;" frameborder="0"></iframe> <p class="font-weight-bold">Articles qui pourrait vous intéresser :</p> <a href="/question/google-chrome-uncaught-promis-domexception-lors-de-la-lecture-audio" class=""> Google Chrome Uncaught (promis) DOMException lors de la lecture AUDIO </a> <hr> <a href="/question/select2-ne-s-39-affiche-pas-correctement-dans-le-mode-bootstrap" class=""> Select2 ne s'affiche pas correctement dans le mode bootstrap </a> <hr> <a href="/question/le-bootstrap-de-twitter-a-t-il-des-classes-utilitaires-de-taille-de-police" class=""> Le bootstrap de Twitter a-t-il des classes utilitaires de taille de police? </a> <hr> <a href="/question/comment-puis-je-d-eacute-finir-un-format-pour-les-nombres-d-39-entr-eacute-e-dans-blazor" class=""> Comment puis-je définir un format pour les nombres d'entrée dans Blazor </a> <hr> </div> <div class=""> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-5975820494937925" data-ad-slot="4267220326" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> </div> </div> </div> <script type="text/javascript" src="/js/purecookie.js"></script> </div> <div class="container col-lg-8 col-md-12 ads-footer"> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-5975820494937925" data-ad-slot="5580301997" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> </body> <footer> <div class="row col-lg-12 col-md-12 text-muted"> © 2020 www.devfaq.fr - Licensed under <a href="https://creativecommons.org/licenses/by-sa/3.0/" rel="license"> cc by-sa 3.0 </a>  with <a href="https://stackoverflow.blog/2009/06/25/attribution-required/" rel="license"> attribution required</a>. </div> </footer> </html>