Comment utiliser les styles locaux pour HTML5 et CSS3 programmation

Un style peut être défini directement dans le corps HTML5. Voici un exemple de ce type de code. Un style local est aussi parfois appelé un niveau élément

Sommaire

  • Styles locales
  • Inline frontières
style, car il modifie une instance particulière d'un élément de la page.

image0.jpg
localStyles.html

Styles locales

Ce paragraphe a une frontière définie localement

Ce paragraphe a une série de règles de police et de textes appliqués.

Comme vous regardez sur ce code, quelques choses devraient devenir évidents:

  • Non élément se trouve dans l'en-tête. Normalement, vous utilisez un section dans l'en-tête de la page pour définir tous vos styles. Cette page n'a pas un tel segment.

  • Paragraphes ont leurs propres attributs de style. UN style attribut a été ajouté à chaque paragraphe dans le corps HTML. Tous les éléments HTML soutiennent la style attribuer.




  • Le code de style ensemble va dans une seule paire de guillemets. Pour chaque élément de style, le style entier va dans une paire de guillemets car il est un attribut HTML. Vous pouvez utiliser l'indentation et l'espace blanc pour rendre les choses plus faciles à comprendre.

Quand utiliser styles locaux

Styles locales ne devraient pas être votre premier choix, mais ils peuvent être utiles dans certaines circonstances.

Si vous écrivez un programme pour traduire à partir d'un traitement de texte ou un autre outil, styles locaux sont souvent la meilleure façon de faire le travail de traduction. Si vous utilisez un traitement de texte pour créer une page et vous lui pour enregistrer la page en HTML, il sera souvent utiliser des styles locaux parce que les traitements de texte utilisent souvent cette technique dans leur propre format propriétaire.

Habituellement, lorsque vous voyez une page HTML avec beaucoup de styles locaux, il est, car un outil de traduction automatique a fait la page.

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

localBorders.html

Inline frontières

Ce paragraphe a une bordure noire solide

Ce paragraphe a une double bordure noire

À titre d'exemple, il est utile de voir le style juste à côté de l'élément. Ce code serait bien pour la démonstration ou de test (si vous voulez juste pour obtenir un regard rapide sur certains styles de bordure), mais il ne serait pas une bonne idée pour le code de production.

Styles locaux ont une très haute priorité, donc tout ce que vous appliquez dans un style local l'emporte sur les autres règles de style. Cela peut être une solution utile si les choses ne fonctionnent pas comme prévu, mais il est préférable d'obtenir vos styles fonctionner correctement que de compter sur une solution de contournement.

Les inconvénients des modèles locaux

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

  • Inefficacité: Si vous définissez des styles au niveau de l'élément avec la style attribut, vous êtes la seule définition de l'instance particulière. Si vous voulez définir les couleurs de paragraphe de votre page entière de cette façon, vous finirez par la rédaction d'un grand nombre de règles de style.

  • Lisibilité: Si les informations de style est parsemé tout au long de la page, il est beaucoup plus difficile de trouver et modifier que si il est situé dans l'en-tête (ou dans un document externe).

  • Le manque de séparation: Placer les styles au niveau de l'élément à l'encontre du but de séparer le contenu de 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: Toute une série de règles CSS doit être fourré dans un attribut HTML unique avec une paire de guillemets. Cela peut être difficile à lire parce que vous avez CSS intégré directement dans le flux de HTML.

  • Problèmes de Citation: L'attribut HTML nécessite citations, et certains éléments de CSS exigent également des citations (de familles de polices avec des espaces en eux, par exemple). Ayant de multiples niveaux de citations dans un seul élément est une recette pour les problèmes.


» » » » Comment utiliser les styles locaux pour HTML5 et CSS3 programmation