tutorials.de Buch-Aktion 05/2012
ERLEDIGT
NEIN
ANTWORTEN
3
ZUGRIFFE
262
EMPFEHLEN
  • An Twitter übertragen
  • An Facebook übertragen
AUF DIESES THEMA
ANTWORTEN
  1. 05.11.10 19:31 #1
    TichaWutz TichaWutz ist offline Rookie
    Registriert seit
    Nov 2010
    Beiträge
    7
    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.
     
    Zitieren Zitieren
  2. 05.11.10 20:14 #2
    Avatar von spicelab
    spicelab spicelab ist offline ZENmechanic
    Registriert seit
    Feb 2010
    Beiträge
    1.744
    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:

    Code xhtml:
    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

    <!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:
    1. Stylesheet layout.css:
      Code css:
      1
2
3
4
5
6
7
8
9

      div#nav {
border:1px solid red;
}
div#nav ul {
list-style:square;
}
div#nav ul li {
font-weight:normal;
}
    2. Stylesheet Newstyle.css:
      Code css:
      1
2
3
4
5
6
7
8
9

      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.

    Code css:
    1
2
3
4
5
6
7
8
9

    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
    Geändert von spicelab (06.11.10 um 00:02 Uhr) Grund: Tipp-Ex
     
    Zitieren Zitieren
  3. 06.11.10 21:02 #3
    TichaWutz TichaWutz ist offline Rookie
    Registriert seit
    Nov 2010
    Beiträge
    7
    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
     
    Zitieren Zitieren
  4. 06.11.10 22:13 #4
    Avatar von spicelab
    spicelab spicelab ist offline ZENmechanic
    Registriert seit
    Feb 2010
    Beiträge
    1.744
    Zitat Zitat von TichaWutz Beitrag anzeigen
    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...
    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.
    Geändert von spicelab (06.11.10 um 22:17 Uhr)
     
    Zitieren Zitieren
« no-repeat, usw angeben oder optional? | Div Links und rechts gleichmäßig ausblenden beim Browser verkleinern »

Ähnliche Themen

  1. CSS wahrscheinlich Vererbungsproblem
    Von skywalkerluk im Forum CSS
    Antworten: 18
    Letzter Beitrag: 08.01.10, 22:05
  2. iptables + wahrscheinlich Win XP DNS Blockade
    Von exitboy im Forum Netzwerke
    Antworten: 1
    Letzter Beitrag: 23.02.09, 10:10
  3. Session, wahrscheinlich die x-te
    Von c-bob im Forum PHP
    Antworten: 3
    Letzter Beitrag: 23.07.08, 15:42
  4. unbekanntes Problem (wahrscheinlich this)
    Von tinella im Forum Javascript & Ajax
    Antworten: 1
    Letzter Beitrag: 18.04.07, 13:39
  5. Wahrscheinlich simples Problem
    Von balrog05 im Forum Javascript & Ajax
    Antworten: 3
    Letzter Beitrag: 15.03.05, 14:49