Wahrscheinlich ein Anfängerproblem...

T

TichaWutz

Grünschnabel
Hallo zusammen,

hoffentlich könnt ihr mir mal einen Tip gegeben, ich habe da so ein kleines - na sagen wir - Verständnisproblem.

Folgendes: Ich habe mir ein template rutergeladen welches CSS basierend ist. Läuft gut.
In dieses Template habe ich nun eine slideshow eingebaut. Und hier fängt das delämmer an: auch die slideshow benutzt natürlich eine css datei.
Kurze Rede, langer sinn, das ganze klappt nicht zusammen.
Im head der Website mache ich folgendes:

<link rel="stylesheet" href="slideshow/css/layout.css" type="text/css" media="screen" charset="utf-8" /> ... und
<link href="Newstyle.css" rel="stylesheet" type="text/css" media="screen" />
<style type="text/css">

Und natürlich wird der erste Eintrag (der slideshow) von dem zweiten überschrieben. Soweit ist mir das klar. Aber wie kann ich nun beide benutzen?

Vielen Dank für euere Mithilfe.
 
So natürlich ist das nicht, dass das erste CSS vom nachfolgenden (gänzlich) überschrieben wird, denn hierfür müssen in beiden Stylesheets auch "Schnittmengen" bezüglich der Selektoren und ihrer Regeln vorliegen.

Hier ein kleines Beispiel mit zwei <div>-Blöcken, die jeweils eine unsortierte Liste <ul> enthalten:

HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
    <head>
        <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
        <title>...</title>
        <link rel="stylesheet" href="layout.css" type="text/css" />
        <link rel="stylesheet" href="Newstyle.css" type="text/css" />
    </head>
    <body>
        <div id="nav"> 
            <ul>
                <li>test 1.1</li>
                <li>test 1.2</li>
            </ul>
        </div>
        <div>
            <ul>
                <li>test 2.1</li>
                <li>test 2.2</li>
            </ul>
        </div>
     </body>
</html>

und per CSS wie folgt formatiert werden:

  • Stylesheet layout.css:
CSS: 
div#nav {
border:1px solid red;
}
div#nav ul {
list-style:square;
}
div#nav ul li {
font-weight:normal;
}
  • Stylesheet Newstyle.css:
CSS: 
div {
border:none;
}
div ul {
list-style:disc;
}
div ul li {
font-weight:bold;
}
Du würdest demnach annehmen, dass beide <div>-Elemente nun ohne Rahmen, und die Listeneinträge mit einem runden Bullet-Zeichen, sowie deren Inhalt im fettem Schriftgewicht dargestellt werden.

Dem ist aber nicht so, da im ersten Stylesheet die höhere Spezifität (Gewichtung) der Selektoren gegenüber denen im nachfolgenden Stylesheet zum Tragen kommt, der Grund ist der deklarierte ID-Bezeichner #nav.

Wann werden CSS-Regeln konkret überschrieben?

Bei gleichlautenden Selektoren in den Stylesheets (z.B. "div#nav ul"), wo eine unmittelbare Übereinstimmung vorliegt, oder um bei meinem Beispiel zu bleiben, im zuletzt aufgerufenen CSS die Regeln mit einer !important-Deklaration ergänzt werden.

CSS: 
div {
border:none !important;
}
div ul {
list-style:disc  !important;
}
div ul li {
font-weight:bold  !important;
}

Weiterführende Links:
  1. Eigenschaftswerte zuweisen, Kaskaden und Vererbung
  2. Die Kaskade
  3. Kaskade - Anwendung von Stylesheets auf Dokumente
 
Zuletzt bearbeitet:
Schon mal vielen Dank für deine Antwort, das muss ich nun erstmal aufarbeiten.
Womit ich am meisten probleme habe ist, das beider Stylesheets einen Bereich "body" haben
und ich dachte das das eine von dem anderen Überschrieben wird...

Aber Grundsätzlich gilt doch, das ich aus beiden CSS Dateien auch eine machen könnte, oder?

LG
 
TichaWutz hat gesagt.:
Womit ich am meisten probleme habe ist, das beider Stylesheets einen Bereich "body" haben
und ich dachte das das eine von dem anderen Überschrieben wird...
Zum Vergrößern anklicken....
In diesem Fall liegst du mit deiner Einschätzung absolut richtig.

Aber was hindert dich daran, die Stylesheets aufeinander abzustimmen?

Sei's durch deren unmittelbare Zusammenführung, wodurch diverse Regeln unter den Tisch fallen dürften, oder dem getrennten Sondieren der überschüssigen Regeln, die aus den beiden CSS-Dateien zu entfernen sind.
 
Zuletzt bearbeitet:
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück