Stylesheet im Code ändern

[PhoenixDH]

Ich habe folgendes Problem:
Ich will in mein Design etwas einbauen. Das heißt ich habe 2 Stylesheets für mein Design verwendet werden.
Jetzt kommt aber irgendwo der Punkt wo etwas per include() eingebunden wird. Ab diesem Punkt soll ein anderes Stylesheet nur für den Bereich gelten. Wenn der Bereich rum ist sollen wieder die 2 vom Design gelten.

Geht das? Wenn ja wie? oder muss man das mit Frames oder sowas arbeiten?

Dank euch!

 

[Dörti.Hermi]

Hallo,

du könntest für die Elemente, die in der Include-Datei vorkommen, eigene CSS-IDs/Klassen anlegen, die sonst nirgendwo vorkommen.
Oder du schreibst bei jedem Element eine style="" - Attribut dazu. Dann bist du völlig unabhängig von den Stylesheets. Die CSS-Styles direkt beim HTML Tag (die eben mit style="" geschrieben werden) haben die höchste Priorität. Grundsätzlich gilt für diese Elemente das Stylesheet, aber die Styles, die direkt beim Element stehen, überschreiben evtl. durch das Stylesheet bereits vorhandene Styles.

Mfg

 

[Maik]

Hi,

wenn du den Bereich mit einem eindeutigen ID-Bezeichner ausstattest, kannst du auch über ihn in einem der beiden Stylesheets die gewünschten Formatierungen vornehmen.

Hier steht dir dann beispielsweise der Selektor für Nachfahrenelemente zur Verfügung, mit dem du ganz bequem alle Elemente innerhalb des Elternelements ansprechen und vom übrigen Seitenlayout gesondert gestalten kannst.

Von dem style-Attribut in den HTML-Tags würde ich persönlich abraten, da du dich ansonsten bei zukünftigen Layoutänderungen zusätzlich durch den HTML-Code wühlen musst, um dort die in der Vergangenheit gesetzten Formatierungen wieder umzustellen, was bei einem umfangreichen Webprojekt doch sehr arbeits- und zeitintensiv ins Gewicht fällt.

 

[PhoenixDH]

Dank euch!
Wie würde denn das aussehen mit den Klassen?
Das hört sich für mich sehr plausibel an!

 

[Maik]

Okay, hier mal ein vereinfachtes Beispiel anhand des h1- und p-Elements, die in diesem Bereich enthalten sind, und eine von der übrigen Seite abweichende Formatierung erhalten sollen:

<div id="include">
     <h1>Überschrift 1.Ordnung</h1>
     <p>Textabsatz</p>
</div>

#include { /* CSS-Formatierungen */ }
#include h1 { /* CSS-Formatierungen */ }
#include p { /* CSS-Formatierungen */ }

Diese Selektoren finden nun ausschliesslich eine Übereinstimmung mit einem Element, das die ID #include besitzt, sowie seinen enthaltenden Nachfahrenelementen.

Wichtig hierbei: Immer den gewählten ID-Namen im Selektor vorne anstellen, damit die Regel im Stylesheet nicht die anderen zuvor angegebenen Regeln für die übrigen Elemente der Seite, wie z.B. das h1- und/oder p-Element, überschreibt.