Comment utiliser les styles locaux pour la programmation HTML5 et CSS3 - mannequins

Vidéo: Cours Complet HTML CSS - Tutoriel pour Débutants et Confirmés [Partie 1/3] 2025

Un style peut être défini directement dans le corps HTML5. Voici un exemple de ce type de code. Un style local est également parfois appelé style élément-niveau car il modifie une instance particulière d'un élément sur la page.

localStyles. html

Styles locaux

Ce paragraphe a une bordure

Ce paragraphe comporte une série de règles de police et de texte.

Lorsque vous regardez ce code, quelques éléments doivent apparaître:

L'élément se trouve dans l'en-tête. Normalement, vous utilisez une section dans l'en-tête de la page pour définir tous vos styles. Cette page n'a pas un tel segment.
Les paragraphes ont leurs propres attributs de style. Un attribut de style a été ajouté à chaque paragraphe du corps HTML. Tous les éléments HTML prennent en charge l'attribut de style.
Le code de style entier va dans une seule paire de guillemets. Pour chaque élément stylé, le style entier entre dans une paire de guillemets car il s'agit d'un attribut HTML. Vous pouvez utiliser l'indentation et l'espace blanc pour rendre les choses plus faciles à comprendre.

Quand utiliser les styles locaux

Les styles locaux ne devraient pas être votre premier choix, mais ils peuvent être utiles dans certaines circonstances.

Si vous écrivez un programme à traduire à partir d'un traitement de texte ou d'un autre outil, les styles locaux sont souvent le moyen le plus facile de faire fonctionner la traduction. Si vous utilisez un traitement de texte pour créer une page et que vous lui dites d'enregistrer la page au format HTML, il utilisera souvent des styles locaux car les traitements de texte utilisent souvent cette technique dans leur propre format propriétaire.

Habituellement, quand vous voyez une page HTML avec beaucoup de styles locaux, c'est parce qu'un outil de traduction automatique a fait la page.

Parfois, vous voyez des styles locaux utilisés dans les exemples de code. Par exemple, le code suivant peut être utilisé pour illustrer différents styles de bordure:

localBorders. html

Inline Borders

Ce paragraphe a une bordure noire pleine

Ce paragraphe a une double bordure noire

Par exemple, il est utile de voir le style juste à côté de l'élément. Ce code convient parfaitement à des fins de démonstration ou de test (si vous voulez juste jeter un coup d'œil à certains styles de bordure), ce ne serait pas une bonne idée pour le code de production.

Les styles locaux ont une priorité très élevée, donc tout ce que vous appliquez dans un style local remplace les autres règles de style. Cela peut être une solution de contournement utile si les choses ne fonctionnent pas comme prévu, mais il vaut mieux que vos styles fonctionnent correctement que de compter sur une solution de contournement.

Les inconvénients des styles locaux

Il est assez facile d'appliquer un style local, mais la plupart du temps, la technique n'est généralement pas recommandée car elle présente des problèmes, tels que

Inefficacité: vous définissez des styles au niveau de l'élément avec l'attribut style, vous définissez uniquement l'instance particulière.Si vous souhaitez définir les couleurs de paragraphe de cette façon, vous finirez par écrire de nombreuses règles de style.
Lisibilité: Si les informations de style sont dispersées dans la page, il est beaucoup plus difficile à trouver et à modifier que si elles sont situées dans l'en-tête (ou dans un document externe).
Manque de séparation: Le fait de placer les styles au niveau de l'élément ne permet pas de séparer le contenu du style. Il devient beaucoup plus difficile de faire des changements, et le mélange de style et de contenu rend votre code plus difficile à lire et à modifier.
Maladresse: Un lot entier de règles CSS doit être saisi dans un seul attribut HTML avec une paire de guillemets. Cela peut être difficile à lire car vous avez intégré CSS directement dans le flux de HTML.
Problèmes de citation: L'attribut HTML nécessite des guillemets, et certains éléments CSS nécessitent également des guillemets (familles de polices avec des espaces, par exemple). Avoir plusieurs niveaux de citations dans un seul élément est une recette pour les problèmes.