id vs. class

[Mr.Tom1976]

Hallo Leute, ich habe vor einigen Wochen "wieder" mit html angefangen und im Zuge dessen kam ich
natürlich auch an css (glücklicherweise*g) nicht vorbei.
Allerdings gibts da ne Sache, die ich nicht ganz verstanden habe, trotz googlen und suche im Forum.

Hier mal mein Problem:

Ich verstehe den pratischen Ensatz von "class" nicht so ganz. ich weiß das man "class" benutzt, weil man eine "id" nur einmal vergeben darf.
Allerdings verstehe ich nicht so ganz für welche bereiche ich "class" einsetzen sollte. Ich könnte ja auch immerwieder verschiedene "id´s" vergeben.
oder liege ich da falsch.

hier mal ein beispiel:

html

<div id="navibereich">
<ul>

<li class="sie-sind-hier"><a href="index.html">Startseite</a></li>
<li><a href="info.html">Info</a></li>
<li><a href="kontakt.html">Kontakt</a></li>
<li><a href="impressum.html">Impressum</a></li>
</ul>

zugehöriges css

div#navibereich li.sie-sind-hier a {
color: black;
background-color: white;
border-bottom-color: white;
}

ich könnte ja auch anstatt "class= sie-sind-hier" verschiedene id´s zum Beispiel: id="sie-sind-hier1" id="sie-sind-hier2" usw vergeben, oder ?
jetzt wo ich das hier schreibe stellt sich mir eigentlich nur noch die Frage, ob das das selbe ist.... falls ja, hab ichs verstanden. dann hat man
einfach weniger arbeit, wenn man eine class vergibt.

Für ne Antwort wäre ich sehr dankbar ;-) und hoffe ich hab meine wirre Frage hier verständlich beschrieben :-D


LG und schönen Tag noch


Tom

 

[Stryke123]

Wie du selbst gesagt hast kan eine id nur einmal benutzt werden, class mehrmals. Ein Element kann auch mehrere Klassen haben. z.B. <element class="bla1 bla2"...>
Greez
Stryke

 

[mermshaus]

Klassen sind der Standardfall.

Klassen fassen CSS-Eigenschaften, die verschiedenen Elementen gesetzt werden sollen, zusammen. Wenn du auf einer Seite beispielsweise drei umrahmte Boxen darstellen möchtest, definierst du eine Klasse .box mit den passenden Eigenschaften, die du den jeweiligen Elementen zuweist.

IDs kannst du verwenden, um einzelne Elemente individuell zu stylen. Ich rate meist davon ab, IDs „unnötig“ einzusetzen.

Ein Elemente, das eine ID gesetzt hat, ist im Browser per fragment identifier (index.php#meine-id) direkt anspringbar. ID sind deshalb für mich in erster Linie Anker für die Navigation innerhalb einer Seite.

<h2 id="einleitung">Einleitung</h2>

[…]

<h2 id="hauptteil">Hauptteil</h2>

[…]

<h2 id="schluss">Schluss</h2>

[…]

Das hat bei dieser Nutzung wenig mit CSS zu tun.

 

[prm]

Wenn die Formatierung identisch ist und mehrmals benötigt wird, dann ist es in jedem Fall sinnvoller eine Klasse zu verwenden, anstelle mehrerer ID's mit gleicher Formatierung.
Der Grund liegt neben der "Legaldefinition" dass ID's nur einmal je Seite verwendet werden dürfen auch darin, dass der Quelltext schlanker wird: Weniger CSS- und HTML-Code bedeuten auch kürzere Ladezeit für die Seite, auch wenn das bei den heutigen Übertragungsraten nicht mehr so sehr ins Gewicht fällt.