Unterschied class / id

[Jerome]

Hallo,

ich benutze CSS mit Klassen. Beispielsweise definiere ich mit .betont, dass ein Textelement dick gedruckt werden soll, wenn ich etwa <p class="betont">...</p> notiere. Das gleiche geht mit #betont und id im Element, wie ich in Selfhtml gelesen habe. Warum gibt es diese beiden Notationen, wo liegt der Unterschied. Wann macht es Sinn class, wann id zu gebrauchen?

Jerome

[Ole]

hi Jerome

id müssen einmalig sein, class dürfen mehrfach verwendet werden.
außerdem...
ein element kann mehrere classen besitzen, darf aber immer nur eine id haben.

um ein element eindeutig zu identifizieren nimmst du id, hast du gruppen von elementen die ähnliche bis identische eigenschaften haben (sollen) nimmst du class.

so long
ole
(8-)>

[Tobias Kloth]

Hallo,

ein element kann mehrere classen besitzen,

nur um Missverständnisse vorzubeugen - bitte nicht so:
<element class="bla1" class="bla2"...> sondern so:
<element class="bla1 bla2"...> - das class-Attribut darf nämlich nur einmal vorhanden sein.

Grüße aus Nürnberg
Tobias

[at]

Hallo.
Jede id darf genau einmal auf eienr Seite auftauchen, Klassen können hingegen beliebig oft Verwendung finden.
MfG, at

[Struppi]

Hallo,

ich benutze CSS mit Klassen. Beispielsweise definiere ich mit .betont, dass ein Textelement dick gedruckt werden soll, wenn ich etwa <p class="betont">...</p> notiere. Das gleiche geht mit #betont und id im Element, wie ich in Selfhtml gelesen habe. Warum gibt es diese beiden Notationen, wo liegt der Unterschied. Wann macht es Sinn class, wann id zu gebrauchen?

Du solltest dir das Konzept von CSS nochmal zu Gemüte führen.

Klassen sollten nur dafür verwendet werden, um besondere Gestaltungelemente zu benutzen. Ansonsten verwendest du die vorhandenen Dokumentbeschreibungstags.

Also um einen fetten Text zu erzielen nimmst du <b></b> um eine Überschrift zu beschreiben ein <Hx> usw. Und diese gestaltest du dann mit CSS.

Klassen sollten eher die Ausnahme sein. Mit id bezeichnest du eindeutige Bereiche, die bestimmte Regionen deines Dokumentes darstellen, z.b. Fuß- oder Kopfzeile.

Struppi.

[at]

Hallo.

Also um einen fetten Text zu erzielen nimmst du <b></b> um eine Überschrift zu beschreiben ein <Hx> usw. Und diese gestaltest du dann mit CSS.

Im Sinne der semantischen Auszeichnug, sollte man gerade auf das <b>-Tag verzichten. Stattdessen kannst du ja <strong> oder <em> per CSS definieren.
MfG, at

[Ole]

hi

Also um einen fetten Text zu erzielen nimmst du <b></b> um eine Überschrift zu beschreiben ein <Hx> usw. Und diese gestaltest du dann mit CSS.

<;)>
wenn überhaupt, dann <strong></strong> da <b> afaik veraltet ist und nicht mehr verwendet werden soll.
</;)>

ich finde es etwas unlogisch was du schreibst...zumindest für mich.
ist CSS nicht dafür gedacht layout von inhalt zu trennen?

das bedeutet für mich, das ich auf tags wie <b> <em> <i> etc. komplett verzichte und das mit CSS löse.
auch die formatierung von elementen die einer gruppe zugehören (z.B. tabellenzellen die eine identische formatierung erhalten sollen) sollten imho über eine class formatiert werden.

ich interpretiere das so, das, wenn man konsequent ist ,sogar das IMG tag auseinandernimmt, so das im quelltext nurnoch <img src="bild.gif" alt="mein bild" id="bild1"> steht und ich via CSS alle angaben wie höhe, breite, rahmen etc. angebe.

so long
ole
(8-)>

[Struppi]

<;)>
wenn überhaupt, dann <strong></strong> da <b> afaik veraltet ist und nicht mehr verwendet werden soll.
</;)>

Stimmt.

ich finde es etwas unlogisch was du schreibst...zumindest für mich.
ist CSS nicht dafür gedacht layout von inhalt zu trennen?

das bedeutet für mich, das ich auf tags wie <b> <em> <i> etc. komplett verzichte und das mit CSS löse.

Genau das gegeteil ist der Fall.
Mit den HTML Tags kennzeichnest du die verschiedenen Regionen, genau wie mit einem  Absatzlayout im Textverarbeitungprogramm.
Wenn du die Schriftart oder - farbe in deinem Text ändern möchtest tust du das (wenn du mit einem Textverarbeitungsprogrammm umgehen kannst) über das Absatzlayout.

CSS ist ja nur ein Layoutvorschlag, eine Überschrift H1 bleibt aber immer eine Überschrift und wie die dargestellt wird, schlägst du mit CSS vor oder der User stellt es bei sich ein oder der Browser kann kein CSS und stellt es einfach nur gross dar.

auch die formatierung von elementen die einer gruppe zugehören (z.B. tabellenzellen die eine identische formatierung erhalten sollen) sollten imho über eine class formatiert werden.

ich interpretiere das so, das, wenn man konsequent ist ,sogar das IMG tag auseinandernimmt, so das im quelltext nurnoch <img src="bild.gif" alt="mein bild" id="bild1"> steht und ich via CSS alle angaben wie höhe, breite, rahmen etc. angebe.

Quatsch, die Bildgröße ist ja kein gestalterisches Element sondern eine fixe Größe.

Struppi.

[Struppi]

ich finde es etwas unlogisch was du schreibst...zumindest für mich.
ist CSS nicht dafür gedacht layout von inhalt zu trennen?

das bedeutet für mich, das ich auf tags wie <b> <em> <i> etc. komplett verzichte und das mit CSS löse.

Gut das Michael nich mal kam. Der kann das wesentlich besser erklären:

Markup bedeutet zu deutsch "Textauszeichnung". HTML ist als Markup Language also weder eine Programmiersprache noch eine Seitenbeschreibungssprache, sondern eine Textauszeichnungssprache. Sie zeichnet die logischen Bestandteile eines Dokumentes aus, wie zum Beispiel Überschriften, Textabsätze, Tabellen, Listen oder Grafikreferenzen. Mit HTML erfolgt also lediglich eine Einteilung des Dokumentes in seine einzelnen strukturellen Bereiche, genannt Elemente. HTML wird daher nicht "programmiert", sondern schlicht "geschrieben".
http://jendryschik.de/wsdev/einfuehrung/websprachen.html

Struppi.

[Ole]

hi

Mit HTML erfolgt also lediglich eine Einteilung des Dokumentes in seine einzelnen strukturellen Bereiche, genannt Elemente. HTML wird daher nicht "programmiert", sondern schlicht "geschrieben".
http://jendryschik.de/wsdev/einfuehrung/websprachen.html

von programmieren hat afaik ja keine was geschriebe, oder? *brilleputz*

klar teile ich (zeichne ich aus) mit den elementen die seite ein, aber sämtliche formatierung läuft über CSS. auf formatierende elemente wie z.b. <center> oder <b> gilt es doch daher zu verzichten.

so long
ole
(8-)>

[Struppi]

klar teile ich (zeichne ich aus) mit den elementen die seite ein, aber sämtliche formatierung läuft über CSS. auf formatierende elemente wie z.b. <center> oder <b> gilt es doch daher zu verzichten.

JA.

ich geb ja zu bin nicht 100% auf dem Damm und drücke mich offensichtlich nicht richtig aus.

Mit ging's eigentlich nur darum, dass ein <p class="fett"> nicht die richtige Wahl ist da dafür <em> oder <strong> zu verfügung steht.

Struppi.

[Herbalizer]

Hi!

Mit ging's eigentlich nur darum, dass ein <p class="fett"> nicht die richtige Wahl ist da dafür <em> oder <strong> zu verfügung steht.

Falsch. em und string heisen auf deutsch Betonung und stärkere Betonung http://www.w3.org/TR/html4/struct/text.html#h-9.2.1. Diese Betonungen können mit CSS verschiedenartig formatiert werden: kursiv, unterstrichen, andersfarbig oder fett. Das Browser ohne CSS-Angaben em-Elemente kursiv und strong-Elemente fett darstellen hat sich halt eingebürgert, da diese Betonungen ja auch sichtbar gemacht werden mußten, diese Formatierungen hätten aber auch anders herum sein können.
Wenn man davon ausgeht, das der obige Abschnitt durchgängig einer starken Betonung unterliegen soll, wäre <p><strong>...</strong></p> sicherlich möglich. Damit ist aber keine fette Schriftformatierung festgelegt!!!! Soll der Abschnitt aber einfach in fetter Schrift dagestellt werden soll, weil der Designer  es sich halt aus unerfindlichen layoutzentrierten Gesichtpunkten so gedacht hat, ist die obige Klassenversion sinnvoller, wenngleich fett als Klassenname etwas fragwürdig ist, dient doch das class-Attribut auch zur zusätzlichen Strukturierung von HTML.

Gruß Herbalizer

[Ole]

nochmal ich

Gut das Michael nich mal kam. Der kann das wesentlich besser erklären:

der tippfehler hat mich echt vor ein rätsel gestellt...
mein erster interpretationsversuch landete bei:

Gut das Michael mich mal kann.

da machte mich der nachsatz nur ein wenig stutzig *gg*

so long
ole
(8-)>

[Michael Jendryschik]

Hallo,

das bedeutet für mich, das ich auf tags wie <b> <em> <i> etc. komplett verzichte und das mit CSS löse.

Genau das gegeteil ist der Fall.

Die Informationen "fett" und "kursiv" bezeichnen die *Darstellung* eines Textes, die richtige Sprache, um das auszudrücken, ist also CSS. Das gleiche gilt für die Schriftfarbe oder -familie. Was auch immer du mit "Absatzlayout" in Textverarbeitungsprogrammen meinst, allein das Wort "Layout" sollte dir verdeutlichen, dass nur CSS dafür in Frage kommen kann.

Gruß,

MI

[Guillermo]

das bedeutet für mich, das ich auf tags wie <b> <em> <i> etc. komplett verzichte und das mit CSS löse.

Genau das gegeteil ist der Fall.

Das sehe ich teilweise anders. Ich verzichte auf "b", weil dadurch eine saubere Trennung von Gestaltung und Textbeschreibung unmöglich ist. Ich verwende aber em, weil dadurch diese Trennung möglich ist, und per CSS beschrieben werden kann, was em denn dann für ein Aussehen hat.

Guillermo

[molily]

Hallo Guillermo,

Ich verzichte auf "b", weil dadurch eine saubere Trennung von Gestaltung und Textbeschreibung unmöglich ist.

Zu welchem Zweck, um was zu erreichen? Das ist der entscheidende Punkt.

Mathias

[Michael Jendryschik]

Hallo,

Also um einen fetten Text zu erzielen nimmst du <b></b> um eine Überschrift zu beschreiben ein <Hx> usw. Und diese gestaltest du dann mit CSS.

<;)>
wenn überhaupt, dann <strong></strong> da <b> afaik veraltet ist und nicht mehr verwendet werden soll.
</;)>

Um *fetten* Text zu erzielen, gibt es das Element 'b' (oder natürlich besser das entsprechende CSS-Äquivalent), um *stark betonten* Text auszuzeichnen, gibt es das Element 'strong'.

Gruß,

MI

[Michael Jendryschik]

Hallo,

ich benutze CSS mit Klassen. Beispielsweise definiere ich mit .betont, dass ein Textelement dick gedruckt werden soll, wenn ich etwa <p class="betont">...</p> notiere. Das gleiche geht mit #betont und id im Element, wie ich in Selfhtml gelesen habe. Warum gibt es diese beiden Notationen, wo liegt der Unterschied. Wann macht es Sinn class, wann id zu gebrauchen?

Bitte lies http://jendryschik.de/wsdev/einfuehrung/xhtml/strukturen.html#identifier.

Gruß,

MI