J'ai importé une autre feuille de style en utilisant @import dans le fichier de feuille de style principal. Je voudrais que les modifications que j'ai apportées dans la feuille de style @import remplacent la feuille de style principale. Est-ce possible?Comment obtenir ma feuille de style @import pour remplacer la feuille de style principale?
Si votre objectif est de remplacer les styles en important une autre feuille de style, vous devez utiliser l'ordre de priorité.
<head>
<title>Title</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<link href="style-override.css" rel="stylesheet" type="text/css" />
</head>
Ici, le style.css est l'original et style-override.css contiendrait votre nouveau CSS personnalisé. Ces styles remplaceront les styles de style.css. Cela signifie que vous n'aurez pas besoin d'utiliser !important car le style est remplacé.
Évitez! Important lorsque vous le pouvez.
Pour faire @import
<style type="text/css">
@import url("style.css");
@import url("style-override.css");
</style>
également comme une note de côté si vous préférez supprimer tous les styles de la page, utilisez une réinitialisation css.
<style type="text/css">
@import url("style.css");
@import url("reset.css");
@import url("style-override.css");
</style>
Vérifiez un reset CSS à http://meyerweb.com/eric/tools/css/reset/ et l'ajouter à reset.css.
cela a fonctionné merci! – Kenshi
@import la deuxième feuille de style à la fin de la première.
Vous confondez !important et @import
J'ai essayé d'ajouter le @i mport à la fin ça ne charge plus le css. Je ne veux pas utiliser! Important parce que je devrais le faire pour tout ce que je veux changer il doit y avoir un moyen plus facile. – Kenshi
Si votre deuxième feuille de style utilise les mêmes sélecteurs, alors il devrait remplacer le premier sans aucun problème. CSS a un ordre de préséance très strict pour déterminer lequel devrait être utilisé, mais si tous les autres sont égaux et que deux styles ont exactement le même niveau de priorité, alors il utilisera celui qui a été spécifié en dernier. Cela vous permet de remplacer un style simplement en répétant le même sélecteur plus tard.
La seule exception à ceci est si le premier style a été spécifié comme !important. Dans ce cas, il est beaucoup plus difficile de l'ignorer. Même spécifier un autre style comme !important peut ne pas toujours fonctionner (j'ai vu des cas où cela a fonctionné dans certains navigateurs mais pas d'autres). Par conséquent, si la feuille de style précédente a utilisé !important, vous pouvez avoir des problèmes pour la surcharger. Mais sinon, cela devrait être assez simple.
Cette solution fonctionne parfaitement pour moi.
Faites une copie de votre fichier main.css et renommez-le en style.css. En main.css Supprimer et passé:
@import url("style.css");
@import url("style-override.css");
C'est tout.
Vous pouvez également utiliser le nom de classe plus spécifique - par exemple, si vous voulez changer
div#sample {
max-width: 75%;
}
sur les nouvelles css utilisation
body div#sample {
max-width: 75%;
}
Il suffit de garder à l'esprit que surqualifiés sélecteurs ne sont pas le meilleur idée;)
Faites le @import après la feuille de style principale et ça devrait aller. –
Juste essayé et maintenant il ne charge plus – Kenshi