La deuxième des deux feuilles de style invoquées consécutivement peut-elle remplacer tous les styles définis dans la première?

Question

Si j'ai une page HTML qui relie deux feuilles de style qui sont invoqués comme ceci:

<link rel="stylesheet" href="original.css" media="screen, projection" /> 
<link rel="stylesheet" href="override.css" media="screen, projection" /> 

Si ces deux fichiers définissent les mêmes noms de style exact, est-il vrai que original.css aura aucune incidence sur les résultats de la page de style et que tous les styles proviendront des styles définis dans override.css?

La raison pour laquelle je demande est la suivante: J'ai un original.css que je ne peux pas modifier et je ne veux pas toucher les lignes de code qui invoquent ce fichier. Au lieu de cela, je voudrais insérer un appel à mon nouveau fichier juste après l'appel de l'original et remplacer tout ce qui est défini dans l'original. Je ne suis pas sûr si cela fonctionnera, si c'est conseillé, etc.

Answer 1

Oui, c'est sûr. C'est le bit Cascading des feuilles de style en cascade.

Je dois demander cependant, pourquoi ne pouvez-vous pas supprimer original.css, ou ne pas le sortir, ou .... quelque chose? Il semble que l'approche de Big Hammer soit de surcharger complètement tout ce qui est dans l'original :-) Si vous produisez en effet original.css et override.css, le navigateur devra faire beaucoup plus de travail que si vous deviez juste produire override.css.

Answer 2

Oui, cela fonctionnera. Vous avez raison, ce n'est pas vraiment conseillé. Au lieu de "ne pas toucher" les lignes de code d'origine, pourriez-vous insérer des balises de commentaires autour d'elle?

Answer 3

Il va écraser tout ce qui est écrasé, mais va compléter tout n'est pas la même chose, mais différentes informations appliquées à une classe ou un ID ou pseudo-sélecteurs ou quoi que ce soit. Je veux dire, IE:

original.css -

p { margin: 4px 6px 10px 12px; } 
h1 { font-size: 2.2em } 

override.css -

p { padding: 6px; color: #666666; } 
h1 { font-size: 1.5em } 

Ce que je dis est que P est complété en override.css parce que les styles ne sont pas en conflit chaque autre. D'autre part, l'exemple H1 est en effet écrasé et les deux règles de chaque feuille de style sont contradictoires, de sorte que la dernière déclaration gagne.

Ce n'est pas si mal que l'on puisse penser ... Je viens de terminer il y a quelques mois un site de moodle qui est une maison de fous de styles et de données mébeded un semblable. Le modèle utilisait les données de feuille de style du modèle DEFAULT, puis du modèle PAGE, puis de COURSE. Quand j'ai essayé de réaliser quel style faisait ce que j'étais tellement stressé de ne pas trouver le bon morceau de code à changer pour le mien ... J'ai finalement décidé d'attacher une propre feuille de style avec les nouveaux styles écrasés et les nouveaux complétés. cela m'a fait économiser environ deux semaines à creuser dans un concepteur-jamais-rêvé-inferno-de-code.

J'espère que cela vous aidera à avoir une idée plus claire.

Salut.

Answer 4

Un bon exemple de ce besoin est Sharepoint. La modification d'un thème vous laissera toute une série de modifications à remplacer à partir de la classe core.css.