Comment laisser une feuille de style externe annuler de manière sélective l'autre

Question

Je suis stupéfaite d'une chose simple que je veux accomplir mais qui ne fonctionne pas. J'ai un site Web et je veux qu'il supporte les thèmes, qui sont un ensemble nommé d'images CSS +. Quel que soit le thème sélectionné, j'inclue toujours le fichier CSS principal, qui est le thème par défaut. En plus de cela, je suis le chargement d'une seconde feuille de style, celui qui est le thème spécifique, comme ceci:

<link rel="stylesheet" type="text/css" href="css/main.css" title=main" media="screen" /> 
<link rel="stylesheet" type="text/css" href="themes/<?= $style ?>/css/<?= $style ?>.css" title="<?= $style ?>" media="screen" /> 

Mon idée est que le thème css spécifique ne doit pas être une copie complète du fichier CSS principal. Au lieu de cela, il ne doit contenir que des règles CSS qui remplacent celles du fichier main.css. Cela rend les thèmes beaucoup plus petits et plus faciles à maintenir. J'ai pensé que je pourrais simplement charger deux feuilles de style externes l'une après l'autre et que pour les règles contradictoires, il utilisera toujours le CSS spécifique au thème, le second fichier.

Cependant, cela ne semble pas fonctionner. Si je fais un changement de style dramatique dans le fichier de thème alors cela n'a aucun effet. Si je commente ensuite le fichier CSS principal, le CSS du thème a effet.

Étais-je trop naïf pour m'attendre à ce que cela fonctionne comme ça? Je sais que je peux utiliser n'importe quel style en ligne, mais je préfère une configuration comme celle-ci si possible.

Answer 1

Je pense que votre problème est dans l'attribut title de la balise link. Vous ne pouvez pas avoir plusieurs fichiers CSS avec des titres différents (je vois que vous nommez dynamiquement les titres pour les thèmes). Ils doivent tous avoir le même titre - ou seulement la première feuille de style peut avoir un titre. Ceci est et bug étrange - bien mieux expliqué ici:

http://blogs.telerik.com/dimodimov/posts/08-05-15/title_attributes_in_css_link_tags_prevent_styles_from_being_applied.aspx

Mais je devine enlever l'attribut title résoudra complètement votre problème. Cela m'a fait trébucher avant.

Answer 2

Dans le concept qui devrait fonctionner IF la règle dans le deuxième style a le même niveau de specificity comme règle dans la première feuille de style. Par exemple:

/*stylesheet 1 */ 
#somediv { 
    width: 300px; 
} 

/*stylesheet 2 */ 
#somediv { 
    width: 500px; 
} 

Dans ce cas, la règle dans la seconde feuille de style devrait prendre Presidence sur la règle dans la première feuille de style car ils ont tous deux la spécificité.

/*stylesheet 1 */ 
div#somediv { 
    width: 300px; 
} 

/*stylesheet 2 */ 
#somediv { 
    width: 500px; 
} 

Dans ce cas, la règle de la première feuille de style a Presidence sur la deuxième feuille de style comme l'élément div dans la règle ajoute plus presidence à la règle.

Vous pouvez augmenter presidence en utilisant importante à une règle qui lui donne pratiquement le plus presidence, peu importe quoi que ce soit (un peu):

/*stylesheet 1 */ 
div#somediv { 
    width: 300px; 
} 

/*stylesheet 2 */ 
#somediv { 
    width: 500px !important; 
} 

Dans le cas ci-dessus la règle dans la seconde stylehseet prend Presidence grâce à la! déclaration importante. Gardez à l'esprit que si vous n'écrasez pas explicitement une règle, elle s'applique à toutes les feuilles de style suivantes.

Answer 3

Je commencerais par utiliser FireBug avec FireFox pour voir quelles règles sont gagnantes. Firebug vous montrera également si votre fichier css secondaire est en train de se charger. De plus, les règles du second fichier css peuvent ne pas avoir assez de force pour battre le fichier css principal. Utilisez le ! Important mot-clé sur les règles individuelles pour voir si cela est un problème. J'utiliserais seulement! Important pour le débogage.

Voir ce lien à propos css specificity scoring

Exemple main.css

#content a.mylink { color:red } 

thème Exemple.

css

#content .mylink { color:blue } 

règle de la main.css pour MyLink va gagner parce que son plus spécifique

Answer 4

Non, il devrait fonctionner comme prévu qu'il fonctionne. Il est possible que la faute de frappe dans votre code provoque le chargement de votre deuxième feuille de style?

<link rel="stylesheet" type="text/css" href="css/main.css" title=main" media="screen" /> 
                   ^forgot the quote 

Si après la fixation que cela ne fonctionne toujours correctement, essayez de ne pas utiliser un rendu comme outil Firebug pour afficher les styles que vous essayez de passer outre et de voir ce qui se passe.

Answer 5

Vous devez vous assurer d'utiliser les mêmes sélecteurs dans la feuille de style de thème. CSS donne la priorité aux plus sélecteurs « spécifiques », peu importe quel ordre les feuilles sont

Par exemple:.

#content p { 
    color: #000; 
} 
body #content p { 
    color: #ccc; 
p { 
    color: #999; 
} 

Ici la couleur calculée sera #ccc, puisqu'il est défini dans le plus spécifique sélecteur. Si vous voulez la remplacer, il suffit de mettre dans votre feuille de thème:

body #content p { 
    color: #000; 
} 

Answer 6

me semble la valeur à vos éléments css est pas la même chose, vous pouvez plus monter le style avec la deuxième feuille de style en faisant Assurez-vous que les règles ont la même valeur ou une valeur plus élevée.

par exemple. 1er feuille de style

div.content h1 {my rules} //score 12 

feuille de style 2ème

div.container div.content h1 {new rules} //score 23 

La seconde feuille de style en cas Theis a une valeur plus élevée sera donc utilisée. notation Css suivant ces règles simples

• élément HTML - Ones
• classe - Des dizaines
• ID - Des centaines
• Styles Inline - Des milliers

Utilisez également Firebug pour inspecter les elemtens et voir qui est surmonté.