Comment utiliser les attributs HTML de style pour CSS en ligne?

Il est en fait très simple d'écrire des styles en ligne à l'aide de l'attribut de style HTML. Ajoutez simplement Style = "..." à la balise, puis écrivez des règles CSS. 1. La méthode d'écriture de base est un style CSS avec la valeur d'attribut sous la forme d'une chaîne. Chaque style est séparé par un point-virgule. Le format est le nom d'attribut: Valeur d'attribut, par exemple:

Ce paragraphe de texte est rouge. Notez que la chaîne de style entière doit être enveloppée en citations doubles. Un point-virgule doit être ajouté après chaque attribut CSS. Le nom d'attribut est la méthode d'écriture standard de CSS; 2. Les scénarios applicables pour les styles en ligne incluent le contrôle du style dynamique, le développement de modèles de messagerie et le débogage rapide. Par exemple, si l'image est affichée au centre, vous pouvez l'écrire comme ; 3. Plusieurs pièges qui doivent être évités comprennent une priorité élevée mais difficile à entretenir, de nombreuses répétitions de code et des problèmes d'échappement spéciaux. Les erreurs communes incluent le chameau du nom d'attribut, oubliant d'ajouter des colons ou d'utiliser la ponctuation chinoise; 4. Par rapport à la classe, les attributs de style ont une mauvaise maintenance, une faible réutilisation et un contrôle dynamique pratique, tandis que le fichier CSS de classe a une bonne maintenance, une réutilisation élevée et un contrôle dynamique légèrement complexe. Par conséquent, à moins qu'il n'y ait une raison claire, essayez d'utiliser le style aussi peu que possible, mais utilisez la classe pour gérer les styles via la classe. La maîtrise de la bonne façon d'utiliser peut vous aider à économiser beaucoup de problèmes lorsque le bon moment.

Répondez directement à la question du titre:
Vous voulez écrire des styles en ligne en utilisant l'attribut de style HTML? En fait, c'est très simple. Ajoutez simplement style="..." à la balise, puis écrivez des règles CSS. Cependant, comment l'écrire facilement et sans faire d'erreurs, il y a encore quelques détails auxquels faire attention.

1. Méthode d'écriture de base: la valeur d'attribut est une chaîne de style CSS

L'attribut style HTML accepte une règle de style CSS String. Chaque style est séparé par un point-virgule, et le format est属性名: 属性值. Par exemple:

 <p style = "Color: Red; Font-Size: 16px;"> Ce paragraphe est rouge </p>

• Notez que vous devez envelopper la chaîne de style entière en doubles citations.
• Chaque attribut CSS doit être suivi d'un point-virgule (bien que le dernier puisse être omis, il est recommandé d'ajouter la cohérence).
• Les noms de propriétés sont écrits en CSS, tels que font-size au lieu de chameau ou de soulignement.

2. Scénarios applicables pour les styles en ligne

Bien qu'il soit maintenant recommandé d'écrire des styles dans des fichiers CSS externes, style a également son utilisation:

• Contrôle de style dynamique : il est très pratique de modifier directement le style d'un élément avec JavaScript.
• Développement du modèle de messagerie : de nombreux clients de messagerie ont un support limité pour CSS, et le style en ligne est plus stable.
• Débogage rapide : testez temporairement un certain effet de style et ne veulent pas déplacer des fichiers externes.

Par exemple, si vous voulez simplement qu'une certaine image soit affichée au centre et que vous ne voulez pas y ajouter une classe, vous pouvez l'écrire comme ceci:

 <img  src = "photo.jpg" style = "affichage: bloc; marge: 0 auto;" alt="Comment utiliser les attributs HTML de style pour CSS en ligne?" >

3. Plusieurs pièges à éviter

Bien que pratique, style a également quelques restrictions d'utilisation et des erreurs courantes:

• Priorité élevée mais difficile à entretenir : parce que la priorité des styles en ligne est plus élevée que celle de la plupart des CSS, il est facile de remplacer d'autres styles, et il est difficile de modifier plus tard.
• Le code est répété plusieurs fois : si plusieurs éléments nécessitent le même style, chacun d'eux perdra sa réutilisabilité.
• Faites attention à une évasion spéciale des caractères : si vous utilisez JavaScript pour générer dynamiquement des chaînes de style, n'oubliez pas de traiter les espaces, les citations, etc.

Quelques exemples d'erreur courants:

 <! - Erreur: le nom d&#39;attribut est écrit comme Camel ->
<div style = "FonTSize: 20px;"> </div>

<! - Erreur: j&#39;ai oublié d&#39;ajouter un côlon ->
<div style = "Color Red;"> </div>

<! - Erreur: la ponctuation chinoise a été utilisée ->
<div style = "Color: Red;"> </div>

4. Une comparaison simple avec la classe

Donc, à moins qu'il y ait une raison claire, essayez d'utiliser style aussi peu que possible et gérez plutôt les styles via la classe.

Fondamentalement, c'est tout. Les styles en ligne ne sont pas compliqués, mais ils sont facilement abusés ou ignorés dans les projets réels. La maîtrise de la bonne façon d'utiliser peut vous aider à économiser beaucoup de problèmes lorsque le bon moment.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!