Comment remplacer les styles CSS en ligne

Cet article de 2009 reste étonnamment populaire, soulignant la pertinence durable des fondamentaux CSS. Si vous êtes intéressé par le CSS moderne, consultez notre récent article sur les techniques CSS pour les écrans de rétine.

Le pouvoir de CSS

réside dans sa nature en cascade. Comprendre comment un navigateur sélectionne et applique des styles est crucial. Les débutants ont souvent du mal à cela, car l'application de style dépend de la méthode d'inclusion, de l'ordre des règles, de la spécificité du sélecteur et des déclarations comme !important.

Les styles en ligne, définis directement dans HTML (par exemple, <code><p><strong style="color: red;">red text</strong></p> Red Text

strong[style] { color: blue !important; }

), ont une priorité absolue. Bien que généralement découragés en faveur des feuilles de styles externes, ils sont inévitables dans les systèmes hérités ou lorsque la modification HTML est limitée. Pour remplacer les styles en ligne d'une feuille de style externe, utilisez:

strong

Cela force le texte de la balise

à bleu, quel que soit le style en ligne. Cela fonctionne dans les principaux navigateurs (IE8, Firefox 2, Opera 9, Safari, Chrome), sauf IE6 et 7. Cependant, cela devrait être un dernier recours; Maintenez CSS propre et remplacez uniquement les styles en ligne si nécessaire. Envisagez d'explorer la plate-forme d'apprentissage de SitePoint pour les techniques CSS avancées.

Des questions fréquemment posées (FAQ) sur la mise en ligne CSS en ligne

Q: Pourquoi le sous-traitant en ligne CSS est-il important?

est-il important

A: La mise en ligne CSS rationalise le style, favorise la réutilisabilité (une feuille de style pour de nombreuses pages) et améliore les performances via la mise en cache de feuille de style. !important Q: Comment fonctionne la règle

?

!important color: blue !important; a:

remplace les déclarations de style ultérieures. L'utiliser avec parcimonie, car il complique le débogage en raison de sa spécificité élevée (par exemple,

).

Q: CSS externe peut-il remplacer les styles en ligne?

!important peut-il

A: Oui, mais les styles en ligne ont une spécificité plus élevée. Faites correspondre la spécificité de votre CSS externe ou utilisez

.

Q: Pourquoi mon CSS ne remplace pas les styles en ligne?

!important N'est-ce pas

A: Vérifiez la spécificité de style en ligne plus élevée, l'ordre de déclaration CSS incorrect, ou

dans le style en ligne.

Q: Comment augmenter la spécificité de la règle CSS?

div.class#id !important A: Utilisez des sélecteurs plus spécifiques (id & gt; classe & gt; type), sélecteurs de chaîne (par exemple,

), ou utiliser

.

Q: Quel est l'ordre de présédence CSS?

!important

A: Ordre de spécificité et de déclaration déterminent la priorité. En ligne & gt; Id & gt; classe & gt; taper.

affecte cet ordre.

Q: JavaScript peut-il remplacer CSS en ligne?

A: Oui, en manipulant directement la propriété style de l'élément (par exemple, document.getElementById("myElement").style.color = "blue";). Cela ajoute cependant un style en ligne.

Q: Comment remplacer CSS dans WordPress / Bootstrap / React?

A: WordPress: Utilisez des thèmes enfants ou des plugins CSS personnalisés. Bootstrap: créez un fichier CSS personnalisé lié après CSS de bootstrap. React: Utilisez des styles en ligne ou des modules CSS. Considérez toujours la spécificité du sélecteur.

Les commentaires sont fermés. Posez des questions CSS sur nos forums.

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!