web-dev-qa-db-fra.com

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

Comment utiliser plusieurs feuilles de style CSS dans la même page HTML où les deux feuilles de style ont une classe bannière, par exemple. Comment spécifiez-vous la classe à laquelle vous vous référez?

htmlcssstylesheet
22
Lilz

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

Les règles normales d’application des ensembles de règles s’appliquent ensuite (c’est-à-dire par spécificité avec le dernier ensemble de règles qui définit une propriété donnée gagnante en cas d’égalité et ! Important en lançant une clé.)

19
Quentin

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

Pour créer une autre feuille de style: 

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

Créez ensuite une méthode dans votre fichier Javascript qui va: 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;
}

Parcourez ensuite le tableau en utilisant un type de boucle if/else qui désactive les feuilles de style que vous ne voulez pas et active la feuille de style souhaitée. (Vous pouvez écrire une méthode distincte ou 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 dans votre document HTML un code dans lequel l'utilisateur activera la méthode JavaScript, telle que:

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

Vous ne pouvez pas contrôler lequel vous faites référence, avec le même niveau de spécificité dans la règle (par exemple, les deux sont simplement .banner), la dernière feuille de style incluse gagnera. 

C'est par propriété, donc s'il y a une combinaison (par exemple, l'une a background, l'autre l'autre color), alors vous obtiendrez la combinaison ... si une propriété est définie dans les deux, quelle que soit sa dernière apparition dans l'ordre des feuilles de style gagne.

5
Nick Craver

Vous ne pouvez pas et ne faites pas.

Toutes les règles CSS de la page seront appliquées (le code HTML "ne sait rien" de ce processus), et les règles individuelles ayant la plus haute spécificité "resteront". La spécificité est déterminée par le sélecteur et par l'ordre dans lequel ils apparaissent dans le document. En résumé, cela fait partie du cascading . Vous devriez vous référer à l'un des très nombreux tutoriels CSS sur le net.

3
annakata

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 remplacera le précédent.

Vous pouvez utiliser un inspecteur d'élément tel que Firebug pour voir quelles règles s'appliquent et lesquelles sont remplacées par d'autres.

1
Pekka 웃

Celui que vous avez inclus en dernier sera celui qui est utilisé. Notez cependant que si des règles sont importantes dans la première feuille de style, elles seront prioritaires. 

1
Mikael Eliasson

Pensez-y comme à votre (vos) feuille (s) de style se référant aux éléments ("sélection") de votre page HTML, et non l'inverse.

1
David Oliver