6
votes

Quelle est la balise idéale à utiliser lorsque je veux appliquer un style CSS à un bloc de texte?

Pour le texte de style, j'utilise généralement l'une des opérations suivantes:

<span class="header">...</span>
<div class="header">...</div>
<p class="header">...</p>
<label class="header">...</label>

html css

8 commentaires

Que voulez-vous dire par style texte? Le texte peut servir une variété d'objectifs et ces objectifs sont déterminés - avant tout - par des éléments HTML, qui ont une sémantique variée. Les coiffants viennent secondaires.

Jetez peut-être un coup d'œil aux documents W3C.

Le W3C décrit comment chacun de ces éléments doit être utilisé.

Veuillez vérifier les nouvelles balises telles que

, , etc. dans HTML5

@BoltClock J'ai fait des modifications mineures à ma question pour essayer de clarifier. Il y a plusieurs fois quand je veux appliquer une classe CSS à un bloc de texte et je me demande si cela importe la balise que j'utilise pour appliquer le style CSS à un bloc de texte, et dans quels situations dois-je utiliser Chacune des 4 balises que j'ai énumérées.

Les styles sont censés être sémantiquement agnostiques. Si vous voulez qu'un paragraphe ressemble à un poney ou à une liste pour ressembler à un navet, vous êtes parfaitement libre de le faire. Choisissez la balise qui a le sens sémantique approprié pour le contenu, puis choisissez le style.

Dans les jours HTML4, la convention commune de choisir entre
et était que était plus approprié pour les éléments de blocage tandis que était plus approprié pour les éléments en ligne. Connexes: Pourquoi donnerais-t-on la peine de marquer correctement et sémantiquement?

4 Réponses : 8 votes Tout le monde des tags que vous avez cités a un Sémantic valeur. Par exemple, désigne un paragraphe de texte, représente un bloc de texte utilisé pour annoter une entrée. Aussi un est utile pour séparer une page dans des sections logiques (divisions, d'où le nom), pas nécessairement du texte uniquement, tandis qu'un est généralement utilisé pour dénote une section de texte en ligne pour un style spécifique (même si une portée peut être affichée comme un élément de niveau de bloc si nécessaire). Pendant que vous n'êtes pas obligé de suivre la standard de la sémantique, ils sont utiles lorsque la page doit être interprétée de manière non visuelle, par exemple par un robot de moteur de recherche, qui ne "voir" pas la page avec des yeux humains et doit savoir à peu près comment la page est organisée. 4 commentaires Sooooo ... Ce n'est pas nécessairement une bonne idée d'utiliser la balise partout pour appliquer différents styles à différents blocs de texte? Je déteste à l'aide de p parce que je dois toujours avoir à vous rappeler de régler les marges supérieure et inférieure pour s'adapter aux spécifications que j'ai données et étiquette ne semble pas 'm faire une étiquette pour un contrôle spécifique. Et span ne fonctionne pas très bien en dehors des éléments en ligne, car vous ne pouvez pas ajuster l'espacement droit et gauche de celui-ci. Eh bien, j'imagine que si vous utilisiez pour représenter des titres de section et des titres de sous-section avec un style différent. Tout le monde aurait la même "valeur" pour l'analyseur, même avec différentes classes, alors qu'il y a des éléments tels que H1, H2, H3 pouvant permettre de générer automatiquement une table des matières à partir de la page sans avoir besoin de savoir autre chose. Vous faites un bon point sur l'analyse de la page non visuelle. Je suppose que je devrais simplement utiliser un CSS Reset Stylesheet Pour supprimer tous les styles par défaut et utiliser les étiquettes correctes pour la bonne occasion. C'est ce que je fais habituellement lorsque je crée un site Web à partir de zéro. Aucun style tant que je ne sais pas quelles informations je veux afficher, puis réinitialisez CSS, et enfin, style de page pour le bonbon des yeux :) 1 votes Revoir les définitions sémantiques pour chaque type d'élément que vous avez là: http://w3schools.com/tags /default.asp tandis que span et div sont sémantiquement neutres, ils peuvent être mieux présentés avec une classe ou un descripteur qui aide à donner un sens à l'utilisateur et au navigateur. De plus, vous pourrez peut-être utiliser un bloc de niveau supérieur ou un élément en ligne pour fournir un style via CSS par opposition à l'insertion des éléments supplémentaires strictement pour des raisons d'affichage. Il s'agit également d'une zone où HTML5 présente quelques avantages, définissant de nouveaux éléments tels que article , , , de côté , , en-tête , hgroup , nav , pied de page , Détails et Résumé . Chacun de ces types d'éléments et leur utilisation standard et supposé des significations dans le lien ci-dessus également. Le balisage n'est pas une science exacte, mais en mettant une pensée supplémentaire dans les éléments utilisés et que leurs significations implicites contribueront à mieux structurer votre code, mais vous donneront également plus d'options en ce qui concerne les sélecteurs CSS. 0 commentaires -2 votes "Tout le monde des tags que vous avez cité a une valeur sémantique. Par exemple, désigne un paragraphe, représente un bloc de texte utilisé pour annoter une entrée. " Sir Darius est absolument correct. Les tags que vous utilisez devraient refléter ce qu'ils décrivent. Si vous voulez connaître spécifiquement sur s et 'S que est utilisé Pour pour les éléments de bloc de groupe habituellement utilisés pour format avec CSS. Un est utilisé pour des éléments en ligne (ex. Styling un mot dans une phrase). Reportez-vous ici pour plus d'informations sur toutes les balises. 0 commentaires 0 votes <label class="header">...</label> 0 commentaires Articles qui pourrait vous intéresser : Google Chrome Uncaught (promis) DOMException lors de la lecture AUDIO Select2 ne s'affiche pas correctement dans le mode bootstrap Le bootstrap de Twitter a-t-il des classes utilitaires de taille de police? Comment puis-je définir un format pour les nombres d'entrée dans Blazor © 2020 www.devfaq.fr - Licensed under cc by-sa 3.0 with attribution required.