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

U

unique23

Aktives Mitglied
Thread Starter
Dabei seit
03.03.2004
Beiträge
759
Reaktionspunkte
2
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
 
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.
 
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.
 
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.
 
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…
 
unique23 schrieb:
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…
Zum Vergrößern anklicken....

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!
 
WOW!!!
Alle Fragen und Unklarheiten beseitigt. Vielen Dank erneut. Jetzt bleiben leider keine Fragen mehr offen und ich kann nicht weiter rumposten… :)
 
unique23 schrieb:
Wenn wir schon beim Thema sind dürfte folgender Link ganz interessant sein:
http://erraticwisdom.com/2006/01/18/5-tips-for-organizing-your-css
Zum Vergrößern anklicken....

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.
 
asylum schrieb:
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.
Zum Vergrößern anklicken....

also wenn du die oberen Sachen wirklich im CSS niederschreibst und da definierst, machst du irgendwas nicht richtig...

wieso sollte man font (gross schreiben ist glaube ich nicht zulaessig oder ist nicht "schick" ;) ) per css definieren? der Fontbefehl ist ja einer der uebelsten Beweise der Mischung von Struktur und Design im HTML - also font raus :)

Das mit den Tabellen mag in Ordnung gehen, solang du sie nicht zum Design verwendest...was ich mir aber schwerlich vorstellen kann, da du sie ja gleich am Anfang definierst...

Falls ich was falsch verstanden habe, dann tut es mir leid. Aber bei FONT wurde ich hellhoerig :)

mfg
m0mo
 
warum font ist doch design, also css. das muß man mir erklären warum das nicht ins css soll! danke
 
Hilarious schrieb:
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. */
....
Zum Vergrößern anklicken....

Noch gerade eine Zwischenfrage: Was bewirkt es, wenn ich das Tag "HTML"
im Stylesheet formatiere?
 
Ich glaube der IE war es der margin-Angaben für das HTML-Tag benötigt um die gesammte Seite ohne Ränder anzuzeigen. Definitionen für den body ziehen in dem Fall nicht.

Und ja, das Font-Tag ist veraltet. Mit dem Font-Tag hat man früher Schriftart, -farbe, -grösse bestimmt. Heute macht man das mit CSS. Es sind somit zwei verschiedene Techniken, die hier vermischt werden. Das Font-Tag dient nur noch als Platzhalter um CSS-Formatierungen anzuwenden. Dafür sollte man ein Span oder semantische Tags verwenden.
 
@ moses_78

html zu definieren macht meines Erachtens auch nicht viel Sinn, es sei denn man moechte eine dynamische Hoehe von 100% erreichen. Da braucht beispielsweise der div zu der angabe height:100% eine relation, also wozu 100%...

ein gutes beispiel dafuer gibt es hier:

http://www.frixon.de/tuts/dheight.html

@borsti

vielleicht verwechselst du da was: die font angaben wie font-style, font-size, font-weight usw. sind natuerlich css angaben. Das <font> Element an sich ist aber kein css mehr. Da HTML im Grunde nur fuer die logische Anordnung des Inhaltes einer Webseite genutzt werden sollte, passt Font nicht mehr herein, da man hier mit einem HTML Element das Design veraendert.

<font> Befehle werden, genauso wie <b>, <u>, <i> (fett, unterstrichen, kursiv) am besten mit CSS und einem inlineelement wie dem <span> geloest.

Beispiel

<font face="verdana" size="5" color="#ff0000">Beispiel</font>

wird zu

<span style="color:#f00;font-size:14px;font-family:verdana, sans-serif;">Beispiel</span>

Wer sich jetzt ueber das Sans-serif wundert, dem sei gesagt, das in jeder font-family auch eine Serifenschrift angegeben werden muss, wenn das ganze css2.0 konform sein soll.

Hoffe die Frage ist geklaert. :) Wenn nicht, dann frag weiter. :)

mfg
m0mo
 
jo nochmals danke m0no, war ne verwechslung, war ziemlich verwirrt, nu is alles klar!
 
m0mo schrieb:
@ moses_78

html zu definieren macht meines Erachtens auch nicht viel Sinn, es sei denn man moechte eine dynamische Hoehe von 100% erreichen. Da braucht beispielsweise der div zu der angabe height:100% eine relation, also wozu 100%...
...
mfg
m0mo
Zum Vergrößern anklicken....

Genau dafür ist der Selektor "html" zu nennen, sonst gibt es wenig Anwendungsgebiete. In der Praxis taucht der sonst nur bei CSS-Hacks auf mit dem Ziel, die eine oder andere MSIE-Version zu umgehen.
 
Hilarious schrieb:
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.
Zum Vergrößern anklicken....
Oder man nimmt einfach den DOM Inspector, der bereits Bestandteil von Firefox ist.

Pingu
 
Pingu schrieb:
Oder man nimmt einfach den DOM Inspector, der bereits Bestandteil von Firefox ist.

Pingu
Zum Vergrößern anklicken....

Naaa guuuut, der ist aber nicht schwarz.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben Unten