TITEL

====== Klassen & IDs ====== Zur Verknüpfung von CSS mit (X)HTML werden primär sogenannte Klassen und IDs verwendent, womit einzelne und Gruppen von Elementen gestaltet werden können. * **IDs**: * weist man einem einzigen Element im XHTML-Code zu, es darf nur einmal vorkommen und bestimmt ein Element somit eindeutig (was auch bei Javascript wichtig ist). * werden im XHTML-Code mit dem Attribut **id** angegeben. * im CSS-Code werden sie mit dem Rautezeichen (#) angesteuert. * Verwendung z.B. für ein DIV, in dem der Footer der Website liegt - dieser kommt nur einmalig vor * **Klassen**: * werden bzw. können mehreren Elementen im XHTML-Code zugewiesen werden * werden im XHTML-Code mit dem Attribut **class** angegeben. * im CSS-Code werden sie mit einem Punkt (.) angesteuert * Verwendung z.B. für Überschriften, eine Überschrift des gleichen Ranges (z.B. h3) kann auf der selben Seite mehrmals vorkommen ===== Deklarierung ===== ==== ... in (X)HTML als Attribut ====



eins
zwei
drei
vier
...

==== ... in CSS ====


#menueliste {
/* CSS-Eigenschaften für Elemente mit ID menueliste */
}

.menuepunkt {
/* CSS-Eigenschaften für Elemente mit Klasse menuepunkt*/
}

**auch möglich:**


ul#menueliste {
/* CSS-Eigenschaften */
}

li.menuepunkt {
/* CSS-Eigenschaften */
}

===== Beispiel =====


p.merksatz {
   font-style: italic;
   border: 4px solid #EE0000;
}


/* hätte man auch ohne ID-Tag ansteuern können, da h1 ohnehin nur einmal vorkommt */
h1#ueberschrift {
   font-size: 0.9em;
   color: darkred; 
}



 

   
   
   
   TITEL
   


 
Merksatz
Text im Absatz ohne CSS-Formatierung
Das ist ein Merksatz, der per CSS als solcher Formatiert wird. Man sollte ihn nie vergessen.

===== DIV und SPAN ===== Die beiden HTML-Elemente

und haben besondere Bedeutung für Stylesheets. Der Grund ist, dass sie selber eigenschaftslos sind. Der einzige Unterschied besteht darin, dass das div-Element eine neue Zeile im Textfluss erzwingt, während span innerhalb eines Textes verwendet werden kann und keinen neuen Absatz erzeugt. Unter Verwendung von div oder span ist es also möglich, beliebigen Textabschnitten Klassenstyles zuzuweisen. ===== Links ===== * [[http://4webmaster.de/wiki/CSS-Selektoren#Klassen-Selektoren|Klassen/Klassen-Selektoren auf 4webmaster.de]] * [[http://4webmaster.de/wiki/CSS-Selektoren#ID-Selektoren|IDs/ID-Selektoren auf 4webmaster.de]]