/* Kommentare werden in Sternchen-Schrägstrichkombinationen gepackt (genauso wie hier!) */
/* ####################
## SELEKTOREN
####################*/
/* Eigentlich ist das grundlegende CSS-Statement sehr simpel */
selektor { eigenschaft: wert; /* mehr Eigenschaften...*/ }
/* Der Selektor wird dazu benutzt, ein Element auf der Seite auszuwählen.
Man kann aber auch alle Elemente auf einer Seite auswählen! */
* { color:red; } /* farbe:rot */
/*
Angenommen, wir haben folgendes Element auf einer Seite:
*/
/* kann man es so über seine Klasse auswählen */
.eine-klasse { }
/* oder über beide Klassen! */
.eine-klasse.klasse2 { }
/* oder über den Namen des Tags */
div { }
/* oder über seine Id */
#eineId { }
/* oder darüber, dass es ein Attribut hat! */
[attr] { font-size:smaller; }
/* oder auch darüber, dass das Attribut einen bestimmten Wert hat */
[attr='wert'] { font-size:smaller; }
/* beginnt mit dem übergebenen Wert */
[attr^='we'] { font-size:smaller; }
/* endet damit */
[attr$='rt'] { font-size:smaller; }
/* oder beinhaltet einen Teil davon */
[attr~='er'] { font-size:smaller; }
/* Noch wichtiger ist aber die Möglichkeit, all das miteinander kombinieren
zu können - man sollte hierbei nur mit der Leerzeichensetzung vorsichtig sein,
ein Leerzeichen macht es zu zwei verschiedenen Selektoren */
div.eine-klasse[attr$='rt'] { } /* so ist es richtig */
/* Man kann auch ein Element über seine Elternelemente auswählen */
/* > wählt ein direktes Kind aus */
div.ein-elternteil > .klassen-name {}
/* Mit einem Leerzeichen getrennt kann man alle Elternelemente ansprechen */
/* Das folgende heißt also, dass jedes Element mit der Klasse 'klassen-name'
und dem Elternteil IN JEDER TIEFE ausgewählt wird */
div.ein-elternteil .klassen-name {}
/* Achtung: das selbe ohne das Leerzeichen hat eine andere Bedeutung,
kannst du mir sagen, was? */
div.ein-elternteil.klassen-name {}
/* Man kann ein Element auch nach seinem direkten Nachbarelement
auswählen */
.ich-bin-vorher + .dieses-element { }
/* Oder über jedes Geschwisterelement davor */
.ich-kann-jeder-davor-sein ~ .dieses-element {}
/* Mit Pseudoklassen lassen sich Elemente anhand ihres momentanen Zustands
auf der Seite auswählen (anstatt über die Seitenstruktur) */
/* Zum Beispiel, wenn über ein Element mit dem Mauszeiger gefahren wird */
:hover {}
/* Oder einen bereits besuchten Link*/
:visited {}
/* Oder einen noch nicht besuchten Link*/
:link {}
/* Oder ein Eingabeelement, das zurzeit im Fokus steht */
:focus {}
/* ####################
## EIGENSCHAFTEN
####################*/
selector {
/* Einheiten */
width: 50%; /* in Prozent */
font-size: 2em; /* mal der derzeitigen Schriftgröße */
width: 200px; /* in Pixeln */
font-size: 20pt; /* in Punkten */
width: 5cm; /* in Zentimetern */
width: 50mm; /* in Millimetern */
width: 5in; /* in Zoll */
/* Farben */
background-color: #F6E /* in kurzem Hex */
background-color: #F262E2 /* in langem Hex */
background-color: tomato /* kann auch eine benannte Farbe sein */
background-color: rgb(255, 255, 255) /* in RGB */
background-color: rgb(10%, 20%, 50%) /* in RGB Prozent */
background-color: rgba(255, 0, 0, 0.3); /* in semi-transparentem RGB */
/* Bilder */
background-image: url(/pfad-zum-bild/image.jpg);
/* Schriften */
font-family: Arial;
font-family: "Courier New"; /* wenn der Name ein Leerzeichen enthält, kommt er in
Anführungszeichen */
font-family: "Courier New", Trebuchet, Arial; /* wird die erste Schriftart
nicht gefunden, wird die zweite benutzt, usw. */
}
/*A*/
p.klasse1[attr='wert']
/*B*/
p.klasse1 {}
/*C*/
p.klasse2 {}
/*D*/
p {}
/*E*/
p { property: wert !important; }