Also divs (<div></div>) sind einfache Kästchen, wo du deinen Inhalt reinschreiben kannst. Ein Div (<div> inhalt </div>) wäre also ähnlich wie folgendes:
<table>
<tr>
<td>
inhalt
</td>
</tr>
</table>
Das mit class und ID hab ich vor kurzem mal irgendwo erklärt, wenn ich mich nicht irre. Also mal mit Suchfunktion versuchen und wenn du nix findest, noch mal hier fragen 
Zitat von "Detlef"
Kann mir jemand sagen, wo ich Nachlesen kann, wie die Befehle:
div, /div, class, span, /span, id mit einer CSS Datei
imm zusammen hang funkitoner ?
Hallo Detlef,
ganz frisch die 2 Artikel für dich:
http://www.html-seminar.de/div_und_spans.htm
und
http://www.html-seminar.de/class_und_id.htm
Über eine Rückmeldung, ob diese verständlich sind bzw. was verbessert werden kann, würde ich mich freuen.
Grüße
Axel
Zitat von "axel"
Hier steht anstelle von "Sinn und Zweck von ID" ein zweites mal die Überschrift "Sinn und Zweck von CLASS"
Und noch ein allgemeiner Tipp zur Verbesserung:
Du solltest, meiner Meinung nach, etwas mehr darauf pochen, dass die CSS-Informationen in eine ausgelagerte Datei geschrieben werden. Am Ende von "Class und ID" wird es zwar auch erwäht, ich würde es aber besser finden, wenn in Form eines Kommentar auch mal folgendes im Code steht: "am besten ihr schreibt diese CSS-Daten in eine ausgelagerte Datei" o.ä.
Merci - jetzt steht sauber "Sinn und Zweck von ID"
Und das nächste Kapitel ist fertig.
<!-- m --><a class="postlink" href="http://www.html-seminar.de/design_per_css_-_float.htm">http://www.html-seminar.de/design_per_css_-_float.htm</a><!-- m -->
Wenn du Lust hast, zum schauen, ob es verständlich ist (und Fehler finden ist auch super).
So, jetzt Abendessen
cu Axel
PS: Für ausgelagerte CSS dachte ich, das ich ein extra-Kapitel schreibe.
ID
- IDs werden in CSS mit #id-name definiert und werden in der Rangordnung am niedrigsten gereiht. Sie können in einer HTML-Seite auch nur einmal angewandt werden
Class
- Klassen werden in CSS mit .klassennamen definiert und diese werden einer höheren Priorität zugeordnet. Klassen können in HTML-Seiten beliebig oft benutzt werden.
Elemente an sich, wie p, body etc. haben die höchste Priorität und dann kommst auch noch an, wie CSS eingebunden wird. Inline, Embedded oder Extern.
Span
- Span definiert eher einen kleinen Bereich in einer HTML-Seite wie zB eine beliebige Zeichenfolge
<p>Das ist ein Mustertext: Hallo, mein <span class="klassennamen">Name</span> ist Alex und ich bin aus Wien.</p>
Div
- Divs definieren einen grossen Bereich einer HTML-Seite in denen unterschiedlichste Elemente wie Bilder, Überschriften, Absätze etc. gemeinsam positioniert werden können. Man kann Divs mit Klassen und IDs formatieren.
Das sind halt die einfachsten Erklärungen und das versuch ich auch so meinen Schülern beizubringen.
Zitat von "axel"
PS: Für ausgelagerte CSS dachte ich, das ich ein extra-Kapitel schreibe.
Das wäre natürlich noch besser! 
ZitatAlles anzeigenID
- IDs werden in CSS mit #id-name definiert und werden in der Rangordnung am niedrigsten gereiht. Sie können in einer HTML-Seite auch nur einmal angewandt werden
Class
- Klassen werden in CSS mit .klassennamen definiert und diese werden einer höheren Priorität zugeordnet. Klassen können in HTML-Seiten beliebig oft benutzt werden.
Das würde doch bedeuten, dass:
ich beispielsweise jedem Bild der Klasse "pic" zuordne. Darin schreibe ich dann, die auch sinnvolle Information "border: 0px solid #000000" (vorallem sinnvoll bei Bilderlinks). Nun möchte ich aber auch ein Bild haben, das extra einen schönen buten Rahmen hab. Wenn ich nun in der HTML-Datei schreibe:
<a href="index.htm"><img src="bild.jpg" class="pic" id="linkzurhomepage" /></a>
Würde das ja heißen, dass aufgrund der geringen Priorität von ID das Merkmal "rahmenlos" von der Zuordnung in die Klasse "pic" vererbt wird und das Bild trotz ID-Information eines Rahmens rahmenlos bleibt.
Ist das so korrekt? (Ich hoffe ich hab es nicht zu umständlich beschrieben :D)
Du kannst dich nur für eine Sache entscheiden.
Entweder ID oder Klasse, wobei aus der Erfahrung heraus Bilder immer mit Klassen formaitiert werden.
zB so:
/* CSS für Bilder */
.pic {boder: 2px solid black;}
<!-- HTML -->
<img class="pic" src="pfadunbildname.gif" width="" height="" alt="">
Somit wird diesem Bild deine Klasse zugewiesen.
Eine ID ist also nicht mehr nötig. Vor allem, weil du ID nur einmal verwenden kannst.
Aber möchtest du ALLEN Bildern so aussehen lassen, dann verwende eine globale Formatiereung:
zB so:
img {boder: 2px solid black;}
Dann haben alle deine Bilder dieses aussehen und du brauchst dich nicht um Klassen oder IDs kümmern.
Was wäre in dem Fall in der CSS-Datei höherwertig?
Das
img {boder: 2px solid black;}
oder
.pic {boder: 0px solid black;}
Mit anderen Worten:
Hätte ein Bild von folgendem Code einen Rahmen, oder nicht?
<img src="bild.jpg" class="pic" />Zitat von "Foster"Alles anzeigenWas wäre in dem Fall in der CSS-Datei höherwertig?
Das
img {boder: 2px solid black;}
oder
.pic {boder: 0px solid black;}
Mit anderen Worten:
Hätte ein Bild von folgendem Code einen Rahmen, oder nicht?Code<img src="bild.jpg" class="pic" />
img hat immer die höchste Priorität!!
Danakch klassen und dann IDs
Und dann kommts drauf an, wie die CSS eingebunden wird, denn auch da gibt Proiritätsunterschiede.
Und zu deiner Frage: Beide haben einen Rahmen.
die Klasse .pic, die du haben willst, ist halt eine Priorität weiter unten und kannst somit in der HTML-Seite für ein Bild zuweisen.
Hier ein Beispiel:
Sagen wir mal, du hast 3 Bilder in deiner HTML-Seite, die gleich groß sind ...
Dem ersten und den dritten Bild weisen wir die klasse .pic zu.
Was passiert?
Nur das erste und das dritte Bild haben einen schwarzen Rahmen.
Nur nummero zwei hat keinen.
Weist du jetzt in der CSS dem img die Eigenschaft zu, was passiert dann?
Alle 3 Bilder haben einen schwarzen Rahmen
Versuchs mal aus.
Dann kannst du zB .pic einen grünen Rahmen geben und scheibst in der CSS follgenden Code:
img {border: 2px solid green;}
.pic {border: 2px solid black;}
Und nun schau dir dein Ergebnis an:
Wichtig, du hast dem ersten und dem dritten Bild noch immer die Klasse .pic zugewiesen!!!
Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!