Struppi: Erste CSS Versuche

Beitrag lesen

Neiiin!
In der (X)HTML-Datei einfach nur <body> ohne jede weitere Angabe, und im CSS ebenso schlicht:
body { eigenschaft: wert; }
Beim h1 weiter unten hast du doch auch verstanden, wie ich es gemeint habe. Super Ingo!  ;-)

Yep, ich habs nun geschnallt.
Aber das mit dem <body>-Tag muss ich wohl doch so machen, weil ...
... ich werde auf meinen Seiten 2 unterschiedliche Hintergrundfarben verwenden
(auf den meisten hellblau und auf einigen dunkelblau).
Darum hatte ich das so gemacht:
body { background-color : #235f70; }
.hintergrund-2 { background-color : #004559; }
<body class="hintergrund-1"> bzw <body class="hintergrund-1">

Nach Deinen Ausführungen unten ist dann aber ja eine ID für den
<body>-Tag richtiger als eine Klasse ... gelle?

Richtig ist in so einem Fall immer schwer zu sagen (wie ich schon erwähnt hatte, es kommt letztlich drauf an, wie die komplette Seite aussieht)

Wenn es dir tatsächlich nur um die Farbe geht, würde ich Klassen bevorzuegn, da du dies dann evtl. für andere Elemente einsetzen kannst (jedes element kann sowohl eine ID als auch eine (oder mehrere) CSS Klassen haben.

Also z.b. so:

/* z.b. die Abstände */
body
{
margin:0;
padding: 1em;
}

.aussehen-1
{
background-color: #XXXXX;
color:#XXXXXX;
}
.aussehen-2
{
background-color: #XXXXX;
color:#XXXXXX;
}

So richtig habe die Unterschiede bzw. Vor- und Nachteile
von KLassen und IDs nicht nicht begriffen.

id sind oft geeigneter, wenn du einen Bereich definieren möchtest, z.b. den Header, dann sammelst du alle Elemente in einem DIV (wenn es mehrere sind, z.b. eine Text und ein Bild) und gibst ihm eine id. z.b. so:

#header
{
    border:1px solid black;
}

üblicherweise ist der Text dort die Hauptüberschrift:

#header h1
{
... das aussehen des Texte
}
#header img
{
... z.b. float:right;
}

Klassen sind gut geeignet um z.b. einen Bereich hervorzuheben

.achtung
{
   color:red;
}

<p class="achtung">Bitte beachten Sie..... </p>

usw.

Du musst dir, wenn du mit CSS arbeitest zuerst Gedanken über die zukünftige Struktur deiner Seite machen und welche Elemente du dort einbauen möchtest. Dann versuchst du dies in HTML umzusetzten (erstmal ohne CSS einfach untereinander, dann hast du auch schon mal die Seite wie sie alte Browser und auch Suchmaschinen lesen) und dann startet der Versuch das mit CSS zu gestalten. D.h. du solltest mal eine reine HTML Seite ohne irgendein Design machen wo alle Elemente die auf deinen Seiten vorkommen sollen vorhanden sind. Und dann Schritt um Schritt die Hürden von CSS und seiner Darstellung in den verschiedenen Browsern gehen.

Struppi.

0 98

Erste CSS Versuche

Ingo Siemon
  • css
  1. 2
    Ashura
    • xml-derivat
    1. 0
      Ingo Siemon
      1. 0
        Der Martin
        1. 0
          Ingo Siemon
          1. 0
            Længlich
            1. 0
              Ingo Siemon
              1. 0
                Længlich
                1. 0
                  Ingo Siemon
                  1. 0
                    Struppi
                    1. 0
                      Ingo Siemon
                  2. 0
                    Længlich
                    1. 0
                      Ingo Turski
                      1. 0
                        Længlich
                    2. 0
                      Ingo Siemon
          2. 0
            Cheatah
            1. 0
              Ingo Siemon
              1. 0
                Cheatah
                1. 0
                  Ingo Siemon
        2. 0
          Ingo Siemon
    2. 0
      Ingo Siemon
      1. 0
        Ashura
        1. 0
          Ingo Siemon
  2. 2
    Eternius
    1. 0
      Ingo Siemon
  3. 2
    Gunnar Bittersmann
    1. 0
      Ingo Siemon
      1. 0
        Struppi
        1. 0
          Ingo Siemon
          1. 0
            Struppi
          2. 0
            Der Martin
            1. 0
              Ingo Siemon
              1. 0
                Der Martin
                1. 0
                  Ingo Siemon
                  1. 0
                    Struppi
                    1. 0
                      Ingo Siemon
                  2. 0
                    Auge
                    1. 0
                      Ingo Siemon
                      1. 0
                        Jens Holzkämper
                        1. 0
                          Ingo Siemon
                          1. 0
                            Jens Holzkämper
                            1. 0
                              Ingo Siemon
  4. 0
    Cheatah
    1. 0
      MudGuard
      1. 0
        Cheatah
    2. 0
      Ingo Siemon
      1. 0
        Cheatah
        1. 0
          Ingo Siemon
          1. 0
            Jens Holzkämper
            1. 0
              Ingo Siemon
              1. 0
                Gunnar Bittersmann
                1. 0
                  Ingo Siemon
                  1. 0
                    Gunnar Bittersmann
                2. 0
                  Gunnar Bittersmann
              2. 0
                Jens Holzkämper
                1. 0
                  Ingo Siemon
                  1. 0
                    Gunnar Bittersmann
                    1. 0
                      Ingo Siemon
                      1. 0
                        Gunnar Bittersmann
                        1. 0
                          Ingo Siemon
                          1. 1
                            Gunnar Bittersmann
                            1. 0
                              Ingo Siemon
                              1. 0
                                Der Martin
                                1. 0
                                  Ingo Siemon
                              2. 0
                                Jens Holzkämper
                                1. 0
                                  Ingo Siemon
                          2. 0
                            Jens Holzkämper
                            1. 0
                              Ingo Siemon
                  2. 0
                    Jens Holzkämper
                    1. 0
                      Ingo Siemon
                      1. 0
                        Der Martin
                        1. 0
                          Ingo Siemon
                          1. 0
                            Der Martin
                            1. 0
                              Ingo Siemon
                              1. 0
                                Detlef G.
                                1. 0
                                  Ingo Siemon
                2. 0
                  Ingo Siemon
                  1. 0
                    Gunnar Bittersmann
                    1. 0
                      Jens Holzkämper
                      1. 0
                        Ingo Siemon
                        1. 0
                          Gunnar Bittersmann
                          1. 0
                            Ingo Siemon
                            1. 0
                              Gunnar Bittersmann
                              1. 0
                                Ingo Siemon
                                1. 0
                                  Jens Holzkämper
                                  1. 0
                                    Ingo Siemon
                    2. 0
                      Ingo Siemon
              3. 0
                Jens Holzkämper
                1. 0
                  Ashura
                  1. 0
                    Jens Holzkämper
                    1. 0
                      Ashura
                    2. 0
                      Gunnar Bittersmann
                2. 0
                  Gunnar Bittersmann
                3. 0
                  Gunnar Bittersmann
                4. 0
                  Ingo Siemon
          2. 0
            Gunnar Bittersmann
            1. 0
              Ingo Siemon
              1. 0
                Gunnar Bittersmann