it-swarm.com.de

Verwenden Sie mehrere CSS-Stylesheets auf derselben HTML-Seite

Wie würde ich mehrere CSS-Stylesheets auf derselben HTML-Seite verwenden, auf denen beide Stylesheets beispielsweise eine Bannerklasse haben. Wie geben Sie an, auf welche Klasse Sie sich beziehen?

22
Lilz

Stylesheets werden effektiv in der Reihenfolge, in der sie in der HTML-Quelle angezeigt werden, zu einem einzelnen Stylesheet verkettet.

Es gelten die normalen Regeln für das Anwenden von Regelsätzen (d. H. Nach Spezifität mit dem letzten Regelsatz, der eine bestimmte Eigenschaft definiert, die im Falle eines Gleichstandes gewinnt und ! Wichtig einen Schlüssel in die Werke wirft).

19
Quentin

Ja, Sie können mehrere Stylesheets einschließen. Sie müssen sie jedoch als alternative Stylesheets kennzeichnen und dem Benutzer eine Möglichkeit geben, sie mithilfe von JavaScript zu aktivieren - beispielsweise durch Klicken auf einen Link. 

So erstellen Sie ein alternatives Stylesheet: 

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

Als Nächstes erstellen Sie eine Methode in Ihrer Javascript-Datei, die Folgendes tun wird: 1. Laden Sie alle Stylesheets in ein Array. 2. Beispiel:

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;
}

Durchlaufen Sie dann das Array mit einer Art if/else-Schleife, die die gewünschten Stylesheets deaktiviert und die gewünschten Stylesheets aktiviert. (Sie können eine separate Methode schreiben oder die Schleife in die obige Methode einfügen. Ich möchte den Befehl onload verwenden, um das CSS-Array mit der Seite zu laden, und dann die printView-Methode aufzurufen.)

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;
    }

Erstellen Sie schließlich Code in Ihrem HTML-Dokument, mit dem der Benutzer die JavaScript-Methode aktivieren soll, z.

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

Sie können nicht steuern, auf was Sie sich beziehen, wenn Sie dasselbe Maß an Spezifität in der Regel verwenden (z. B. sind beide einfach .banner). Das zuletzt enthaltene Stylesheet gewinnt. 

Wenn es sich um eine Kombination handelt (zum Beispiel hat eine Variable background, die andere Variable color), erhalten Sie die Kombination ... wenn eine Eigenschaft in beiden definiert ist, unabhängig davon, wann sie zuletzt angezeigt wird in Stylesheet-Reihenfolge gewinnt.

5
Nick Craver

Du kannst nicht und nicht.

Alle CSS-Regeln auf der Seite werden angewendet (der HTML-Code "kennt" nichts über diesen Prozess) und die einzelnen Regeln mit der höchsten Spezifität "haften". Die Spezifität wird vom Selektor und von der Reihenfolge bestimmt, in der sie im Dokument erscheinen. Alles in allem ist der Punkt, dass dies Teil der Kaskadierung ist. Sie sollten auf eines der vielen CSS-Tutorials im Internet verweisen.

3
annakata

Sie beziehen sich nie auf ein bestimmtes Stylesheet. Alle CSS-Regeln in einem Dokument werden intern zu einer Einheit verschmolzen. 

Bei Regeln in beiden Stylesheets, die für dasselbe Element mit derselben Spezifität gelten, überschreibt das später eingebettete Stylesheet das vorherige.

Sie können einen Elementinspektor wie Firebug verwenden, um zu sehen, welche Regeln gelten und welche von anderen überschrieben werden.

1
Pekka 웃

Die letzte, die Sie einschließen, wird diejenige sein, die verwendet wird. Beachten Sie jedoch, dass Regeln, die im ersten Stylesheet wichtig sind, Vorrang haben. 

1
Mikael Eliasson

Stellen Sie sich das als Stylesheet (s) vor, das sich auf Elemente ("Auswählen") in Ihrer HTML-Seite bezieht (nicht "umgekehrt").

1
David Oliver