Utilisez plusieurs feuilles de style css dans la même page html

les feuilles de Style sont, en fait, concaténées en une seule feuille de style dans l'ordre où elles apparaissent dans la source HTML.

règles normales d'application des règles puis appliquer (c'est à dire par spécificité avec le dernier jeu de règles qui définit une propriété donnée gagnant en cas d'égalité et !important jeter une clé dans les travaux)

Oui, vous pouvez inclure plusieurs feuilles de style, mais vous devez les étiqueter comme feuilles de style alternatives et donner à l'utilisateur un moyen de les activer en utilisant JavaScript - peut-être en cliquant sur un lien.

Pour créer une feuille de style:

<link type="text/css" href="nameOfAlterateStyleSheet.css" rel="alternate stylesheet" title="Blue" />

suivant créez une méthode dans votre fichier Javascript qui: 1. Charger toutes les feuilles de style dans un tableau 2. Exemple:

function getCSSArray()
{
var links = document.getElementsByTagName("link");
var link;
for(var i = 0; i < links.length; i++)
{
    link = links[i];
    if(/stylesheet/.test(link.rel))
    {
        sheets.push(link);
    }
}

    return sheets;
}

puis passer par le tableau en utilisant un type de boucle if/else qui désactive le style feuilles que vous ne voulez pas et permet la feuille de style que vous voulez. (Vous pouvez écrire une méthode séparée ou d'insérer la boucle dans la méthode ci-dessus. J'aime utiliser la commande onload pour charger le tableau CSS avec la page, puis appeler la méthode printView.)

function printView()
{
var sheet;
var title1 = "printVersion";
for(i = 0; i < sheets.length; i++)
{
    sheet = sheets[i];
            if(sheet.title == title1)
    {
        sheet.disabled = false;
    }
    else
    {
        sheet.disabled = true;
    }

enfin, créez du code dans votre document HTML que l'utilisateur activera la méthode JavaScript telle que:

 <a href="#" onClick ="methodName();">Link Name</a>

vous ne pouvez pas contrôler ce que vous faites référence, étant donné le même niveau de spécificité dans la règle (par ex. les deux sont simplement .banner) la feuille de style inclue last gagnera.

C'est par propriété, donc s'il y a une combinaison en cours (par exemple on a background, l'autre a color) vous obtiendrez alors la combinaison...si une propriété est définie dans les deux, ce qui est la dernière fois qu'elle apparaît dans l'ordre de la feuille de style gagne.

Vous ne pouvez pas et ne le font pas.

toutes les règles CSS sur la page seront appliquées (le HTML "ne sait" rien de ce processus), et les règles individuelles avec la plus grande spécificité "coller". La spécificité est déterminée par le sélecteur et par l'ordre qu'ils apparaissent dans le document. Dans l'ensemble, le point est que cela fait partie de la cascade. Vous devriez vous référer à l'un des très nombreux tutoriels CSS sur le net.

vous ne faites jamais référence à une feuille de style spécifique. Toutes les règles CSS d'un document sont fusionnées en une seule.

dans le cas de règles dans les deux feuilles de style qui s'appliquent au même élément avec la même spécificité, la feuille de style incorporée plus tard l'emportera sur la première.

vous pouvez utiliser un inspecteur d'éléments comme Firebugg pour voir quelles règles s'appliquent, et lesquelles sont supplantées par d'autres.

celui que vous incluez en dernier sera celui qui est utilisé. Notez cependant que si des règles ont !important dans la première feuille de style, ils seront prioritaires.

pensez à cela comme votre feuille de style (s) se référant aux éléments ("sélection") dans votre page HTML, pas l'inverse.