Wie baut man ein CSS "richtig" auf? . oder #

Dieses Thema im Forum "Web-Programmierung" wurde erstellt von unique23, 16.02.2006.

  1. unique23

    unique23 Thread Starter MacUser Mitglied

    Beiträge:
    752
    Zustimmungen:
    2
    MacUser seit:
    03.03.2004
    Hallo zusammen,
    ich versuche schon seit längerem durchzusteigen wie man nun ein CSS
    "richtig" aufbaut. Dabei meine ich die Verschachtelung durch Classes
    oder Ids. Aber wie macht das denn nun der richtige Webdesigner?
    Soweit ich weiß zuerst die Classen und dann die Ids. Aber wie verschachtelt
    man das am ebsten und wie kann man zum Beispiel das Linkverhalten
    in verschiedenen Bereichen einer Seite unterschiedlich behandeln? Das
    wäre dann doch so ein Fall, oder?


    Mit besten Dank und erwartungsvoll,
    Johannes
     
  2. pichfl

    pichfl MacUser Mitglied

    Beiträge:
    134
    Zustimmungen:
    2
    MacUser seit:
    03.08.2005
    ich glaube das ist eine frage des persönlichen geschmacks.

    für mich hat sich folgendes bisher als recht praktisch herausgestellt:
    1. basics (z.b. erste angaben zu schrift, farbe, etc, vor allem um browser-voreinstellungen aufzuheben)
    2. hauptteil für das design (sortiert nach dem vorkommen in der html)
    (untergliedert in die einzelnen abschnitte)
    3. allgemeine klassen (also class-elemente, die häufiger vorkommen, bzw an mehreren stellen verwendet werden können, etc)
    4. extras, also z.b. schmuckelemente



    EDIT:
    hab mir deinen post gerade nochmal durchgelesen:
    classes und ids haben verschiedene aufgaben. IDs sind "unikate" und eben nur einmal pro html-datei zu verwenden, classes lasen sich beliebig wiederholen. in den kaskadierungen einer css ist eine ID stärker als eine Class.
     
  3. asylum

    asylum MacUser Mitglied

    Beiträge:
    747
    Zustimmungen:
    1
    MacUser seit:
    10.06.2005
    zuerst mach ich immer:
    BODY,TABLE,TD,TR,FONT {}
    dann die Links A / A:hover
    und dann kommen die divs.
    Nachher teile ich die css datei auf in Bereiche wie
    /******
    GB
    ******/
    usw.
     
  4. Hilarious

    Hilarious MacUser Mitglied

    Beiträge:
    2.195
    Zustimmungen:
    5
    MacUser seit:
    25.11.2004
    Zuerst definierst Du, wie asylum schon sagt, die Grundeinstellungen. Hier werden die HTML-Tags genannt, wie "html", oder "body":
    Code:
    html { ... }
    body { font-size: 100.1%; background-color: white }
    a:link { }
    a:hover { }
    a:visited { }
    /* usw. */
    
    Anschließend definierst Du Deine IDs und Klassen, wobei die Reihenfolge der Definitionen maßgeblich sein kann.

    IDs sollten nur einmal in Deinem Dokument vorkommen, Klassen können hingegen mehrfach auf HTML-Tags (Selektoren) angewendet werden.

    Zum Beispiel:
    Code:
    <div id="kopfbereich"> <!-- kommt nur einmal vor -->
      <div class="blauer_hintergrund">
        <ul>
          <li class="gerade">Erster Punkt</li>
          <li class="ungerade">Zweiter Punkt</li>
          <li class="gerade">Dritter Punkt</li>
          <li class="ungerade">Vierter Punkt</li>
        </ul>
      </div>
    </div>
    <div id="inhalt">
    ...
    </div>
    
    Wie Du siehst, kommen die IDs jeweils nur einmal vor, hingegen können die Klassen mehrfach vorkommen, und werden dementsprechend in den CSS-Stilen definiert.

    IDs können auch ganz praktisch sein, wenn man mit Hilfe von JavaScript Inhalte »nachträglich« ändern möchte, wie zum Beispiel bei AJAX (XmlHttpRequest) oder anderen Technologien. Hier wird schnell klar, warum IDs nur einmal im Dokument auftauchen sollten.

    Weiteres bei Eric Meyer.
     
  5. unique23

    unique23 Thread Starter MacUser Mitglied

    Beiträge:
    752
    Zustimmungen:
    2
    MacUser seit:
    03.03.2004
    Vielen Dank. Also kann ich das Verhalten der Links nur einmalig festlegen. Somit
    sehen alle Links auf einer Seite gleich aus und können nicht gesondert behandelt
    werden, richtig?

    Aber mir wurde bestens geholfen. Danke nochmals…
     
  6. Hilarious

    Hilarious MacUser Mitglied

    Beiträge:
    2.195
    Zustimmungen:
    5
    MacUser seit:
    25.11.2004
    Nein, Du kannst das auch sehr vielfach einstellen. Am einfachsten formulierst Du mit Hilfe der CSS-Definitionen Reihenfolgen (so genannte Selektoren).

    Zum Beispiel:
    Code:
    <a href="#">Das ist ein normaler Link</a>
    <a class="nackig">Das ist ein Link ohne Unterstreichung</a>
    <div id="torte">
       <a href="#">Dieser Link ist schon wieder anders</a></div>
    
    Würdest Du hier jetzt nichts in Dein Stylesheet schreiben, würden alle drei Links wahrscheinlich blau eingefärbt und unterstrichen sein.

    Du kannst aber auch Regeln formulieren:
    Code:
    a { color: #333 } /* grau, unterstrichen */
    a.nackig { text-decoration: none } /* auch grau, weil oben schon definiert, aber ohne Unterstreichung */
    div#torte a { padding: 5px; background-color: red; text-decoration: none; display: block } /* sozusagen ein einfacher Button */
    
    Je nachdem, was in Deinem Code passt, werden die Regeln im Stylesheet angewendet. Wie Du siehst, stehen mehrere Selektoren in der dritten Regel nacheinander. Das liest sich so: "Kommt erst ein <div>, welches mit der ID "torte" ausgezeichnet wurde, und folgt dann auch noch ein Anchor-Tag <a>, dann seh folgendermaßen aus...".

    Und jetzt: fröhliches Dranrumspielen!
     
  7. unique23

    unique23 Thread Starter MacUser Mitglied

    Beiträge:
    752
    Zustimmungen:
    2
    MacUser seit:
    03.03.2004
    WOW!!!
    Alle Fragen und Unklarheiten beseitigt. Vielen Dank erneut. Jetzt bleiben leider keine Fragen mehr offen und ich kann nicht weiter rumposten… :)
     
  8. unique23

    unique23 Thread Starter MacUser Mitglied

    Beiträge:
    752
    Zustimmungen:
    2
    MacUser seit:
    03.03.2004
  9. Hilarious

    Hilarious MacUser Mitglied

    Beiträge:
    2.195
    Zustimmungen:
    5
    MacUser seit:
    25.11.2004
    Nett, aber in der Praxis schwer einzuhalten... ;)

    Zwei handliche Empfehlungen für Dich und alle Mitleser: Wie kann man »sehen« welche Klasse oder ID gerade den einen oder anderen Bereich beeinflusst? Die Frage ist meist nur durch einen Blick in den Quelltext zu lösen, einfacher geht es mit einem dieser beiden Tools:

    Xyle scope, kostet nach der Erprobungsphase nur schlappe EUR 17,95 und hat einen festen Platz bei mir im Dock.

    Safari Web Inspector Eine praktische Erweiterung für Safari, die eine halbtransparente Palette mit den richtigen Infos rund um DOM und CSS zeigt. Kost nix.
     
  10. borsti

    borsti MacUser Mitglied

    Beiträge:
    114
    Zustimmungen:
    1
    MacUser seit:
    16.08.2005
Die Seite wird geladen...

Diese Seite empfehlen