Weitere CSS-Eigenschaften

Auf dieser Seite stellen wir ein paar CSS-Eigenschaften vor, welche sich in keine der bisherigen Themen einordnen lässt. Dies kommt zum einen daher, da diese zu keinem der Themen passt oder da es sich um elementspezifische Eigenschaften von HTML-Elementen handelt.

Cursor

Mit Hilfe der Eigenschaft cursor lässt sich der Mauszeiger (auch als Cursor bezeichnet) festlegen. Hierfür muss als Wert eines der verfügbaren Schlüsselwörter angegeben werden, welche Sie aus der unten stehenden Tabelle entnehmen können. Für die meisten Elemente entspricht der Wert default dem angezeigten Cursor. Bei Hyperlinks ist es der Cursor des Typs pointer. Die Tabelle enthält die wichtigsten und meist benutzten Cursor-Typen.

auto	Der Cursor wird automatisch vom Browser gewählt.
none	Der Cursor wird ausgeblendet.
default	Der normale "Standard" Cursor.
pointer	Der Cursor zeigt auf etwas.
grab	Der Cursor greift etwas.
move	Der Cursor zeigt ein Symbol zum Verschieben.
no-drop	Der Cursor zeigt ein Symbol, dass das Element hier nicht abgelegt werden kann.
text	Der Cursor für Texteingaben.
wait	Der Cursor zeigt ein Wartesymbol.
progress	Der Cursor zeigt ein Wartesymbol in Verbindung mit dem Standard-Cursor.

div
{
	background-color: red;
	width: 200px;
	height: 200px;
	cursor: pointer;
}

Listen

Die Eigenschaft list-style-type definiert den Typ einer Liste. Hiermit ist es möglich, das Aufzählungszeichen von Aufzählungslisten oder die Aufzählungsart einer nummerierten Liste zu ändern. Für Aufzählungslisten sind hier die folgenden Werte erlaubt: none (kein Zeichen), disc (Kreis gefüllt), circle (Kreis ungefüllt) und square (Rechteck). Für nummerierte Listen stehen hingegen folgende Werte zur Verfügung: none (keine Aufzählung), decimal (Dezimalzahlen), lower-greek (kleine griechische Buchstaben), lower-latin (kleine lateinische Buchstaben), lower-roman (kleine römische Zahlen), upper-latin (große lateinische Buchstaben) und upper-roman (große römische Zahlen).

Die Eigenschaft list-style-image gibt die Möglichkeit, mit Hilfe des Schlüsselworts url eine Grafik als Aufzählungszeichen anzuzeigen. Wird zusätzlich die Eigenschaft list-style-type angegeben, so erhält die Grafik den Vorzug. Sollte die Grafik jedoch nicht geladen werden können oder unterstützt der Browser die Grafik nicht, so kann der Browser trotzdem das angegebene Aufzählungszeichen anzeigen. Es handelt sich hierbei um einen sogenannten „Fallback“.

Standardmäßig werden die Aufzählungszeichen (egal ob Aufzählungsliste oder nummerierte Liste) außerhalb des Elements angezeigt. Diese Einstellung kann mittels der Eigenschaft list-style-position geändert werden. Über den Wert inside ist es damit möglich, die Zeichen innerhalb der Liste zu platzieren. Der Wert outside ist der Standardwert und muss nicht explizit angegeben werden.

Die Eigenschaft list-style dient als universelle Eigenschaft. Bei der Notation der Werte in der Eigenschaft list-style muss dabei auf die Reihenfolge Typ (list-style-type), Position (list-style-position) und Bild (list-style-image) geachtet werden. Es ist möglich, ein oder mehrere Werte davon wegzulassen.

ul
{
	padding: 0;
	list-style-type: square;
	list-style-image: url("/Bilder/Icons/right.svg");
	list-style-position: inside;
}

Tabellen

Mit Hilfe der Eigenschaft caption-side ist es möglich, die im caption-Element notierte Überschrift zu platzieren. Als Werte sind top und bottom möglich, wovon der Wert top dem Standardwert entspricht. Über den Wert bottom lässt sich die Überschrift unterhalb der Tabelle, an Stelle von oberhalb der Tabelle, platzieren.

Die Eigenschaft table-layout ermöglicht das Verändern des Tabellenlayouts. Als Werte sind auto (Standard-Wert) und fixed möglich. Die Breite von Tabellenspalten werden normalerweise automatisch ermittelt. Haben Sie jedoch eine Breite für eine Zelle festgelegt und diese enthält einen nicht umbrechbaren Inhalt, so wird die Zelle automatisch vergrößert, sodass der Inhalt hineinpasst. Dies kann dazu führen, dass eine Tabelle breiter als „erlaubt“ ist. Über den Wert fixed lässt sich dieses Problem „lösen“. Damit wird die angegebene Breite immer eingehalten. Dies hat aber u. U. Überlappungen zur Folge (siehe Beispiel).

table
{
	table-layout: fixed;
	caption-side: bottom;
	width: 100px;
}

td
{
	height: 30px;
	vertical-align: top;
}

td:first-child
{
	width: 60%;
}

td:last-child
{
	width: 40%;
}