Webmaster-Crashkurs

Aufbau CSS-Anweisung

Die Syntax, also der Aufbau und Struktur von CSS-Formierungen sind sehr einfach. Man hat Eigenschaften, die man beeinflussen möchte und gibt diesen dazu Werte mit.

        Eigenschaft: Wert;

Die Trennung zwischen der Eigenschaft und dem Wert geschieht durch einen Doppelpunkt. Bisher sind wir von HTML bei den Attributen die Gleichheitszeichen gewohnt! Hier haben wir CSS und der Syntax ist der der Doppelpunkt. Wird gerne am Anfang falsch gemacht!

Nach dem Wert sollte immer ein Semikolon am Ende folgen. Das fehlende Semikolon kann sich rächen und ist ein beliebter Fehler. Man wundert sich, warum etwas nicht klappt obwohl die Definition und Syntax richtig ist. Dabei rächt sich dann in der Zeile darüber das fehlende Semikolon.

Es können auch mehrere Eigenschaften und Werte mitgegeben werden. Zur Übersicht am besten immer eine neue Zeile anfangen:

	Eigenschaft-1: Wert-1;
	Eigenschaft-2: Wert-2;

Damit klar ist, was zusammengehört, kommt um diese CSS-Eigenschaften und Werte und noch eine geschweifte Klammer. Genau die, die Sie bisher vielleicht noch nie benötigt haben. Diese ist zu finden rechts neben der 7 und der 0. Diese erhält man über die Tastenkombination „Alt Gr“ + 7 bzw. 0. Wichtig ist, dass es die rechts neben der Leertaste befindliche „ALT Gr“-Taste ist. Die andere ist nur die „Alt“-Taste.

{
	Eigenschaft-1: Wert-1;
	Eigenschaft-2: Wert-2;
}

kompletter Syntax CSS-Anweisung

Und nun müssen wir noch sagen, für wen oder was diese Eigenschaften-Werte gelten sollen. Im einfachsten Fall geben wir den HTML-TAG ohne die Kleiner-größer-Zeichen an. Dazu bei Selektoren später mehr. Der Fachbegriff dafür ist Selektor.

Selektor 
{
	Eigenschaft-1: Wert-1;
	Eigenschaft-2: Wert-2;
}

Und nun mir einem realen CSS-Befehl, der die Vordergrundfarbe auf Grün setzt und die Hintergrundfarbe auf Silber für alle H2-Überschriften.

h2
{
	color: green;
	background-color: silver;
}
HTML5-Video-Kurs:
hier klicken für
mehr Informationen
© 2008-2024   •   www.webmaster-crashkurs.de - HTML5 Tutorial mit VideosImpressumDatenschutzerklärung
weitere eigene Projekte: