Sonstige Eigenschaften
display | cursor | outline | scrollbar | filter
displayzur Übersicht 
Mit display wird der Anzeigemodus eines Elementes kontrolliert.
Werte
none | block | inline | inline-block | list-item | run-in | inline-table | table | table-caption | table-cell | table-column | table-row | table-columns-group | table-footer-group | table-header-group | table-row-group
none |
Das Element wird nicht angezeigt. Im Gegensatz zu der Eigenschaft visibility
wird dem Element auch kein Platz eingeräumt. |
block |
Das Element wird als Block-Element dargestellt. |
inline |
Das Element wird als Inline-Element dargestellt. Damit lassen sich Blockelemente
wie z.B. Überschriften (<h1>) in den Textfluß zwingen. |
inline-block |
Dieser Wert erstellt eine Mischung aus einem Block- und einem Inline-Element. Es wird als Block-Element formatiert, es können Höhe, Breite und Außenabstände angegeben werden, es fliesst aber wie ein Inline-Element in der Zeile. |
list-item |
Das Element wird als Listenelement dargestellt und hat ein Aufzählungszeichen. |
run-in |
Je nach weiteren Inhalten wird ein Block- oder Inline-Element erzeugt. |
inline-table |
Wird als Tabelle dargestellt, allerdings ohne den bei <table> üblichen Absatz. |
table |
Darstellung als Tabelle mit dem üblichen Absatz - entspricht HTML <table> |
table-caption |
Darstellung als Tabellenüberschrift - entspricht HTML <caption> |
table-cell |
Darstellung als Tabellenzelle - entspricht HTML <td> |
table-column |
Darstellung als Tabellenspalte - entspricht HTML <col> |
table-row |
Darstellung als Tabellenreihe - entspricht HTML <tr> |
table-columns-group |
Darstellung als Gruppierung von Tabellenspalten - entspricht HTML <colgroup> |
table-footer-group |
Darstellung als Gruppierung von Tabellenzellen als Fusszeile in einer Tabelle - entspricht HTML <tfooter> |
table-header-group |
Darstellung als Gruppierung von Tabellenzellen als Kopfzeile in einer Tabelle - entspricht HTML <thead> |
table-row-group |
Darstellung als Gruppierung von Tabellenreihen - entspricht HTML <tbody> |
Standardwert ist entweder block (CSS1) oder inline (CSS2)
Vererbung
Nein
Beispiel
h2{
font-size: 12px;
font-weight: bold;
display: inline;
}
cursorzur Übersicht
Die Anweisung cursor legt das Aussehen des Mauszeigers für das formatierte Element fest. Fährt
der Mauszeiger über das Element, verändert er sich in der angegebenen Form.
Werte
auto | default | crosshair | help | pointer | wait | text | n-resize | e-resize | s-resize | w-resize | ne-resize | nw-resize | se-resize | sw-resize | url()
Der Wert url() erlaubt die Angabe eines eigenen Cursors und den Dateiformaten: *.ani, *.cur, *.ico, *.gif und *.jpg. Da Browser die Angaben unterschiedlich interpretieren, sollten mehrere, alternative Werte zu setzen: cursor:url(curs.jpg), url(curs.ani), url(curs.cur), default;
Standardwert ist auto
Vererbung
Ja
Beispiel
td{ cursor: pointer;}
outlinezur Übersicht
outline-style | outline-width | outline-color | inherit
Mit outline wird eine Umrandung um ein Elemente gezeichnet. Im Gegensatz zu
border wird outline nicht in der Breiten- und Höhenberechnung berücksichtigt.
Werte
outline-style
none | dotted | dashed | double | groove | inset | outset | ridge | solid
outline-width
thin | medium | thick | [Breite]
outline-color
[Farbwert] | invert
Standardwerte sind
outline-style: none
outline-width: medium
outline-color: invert
Vererbung
Nein
Beispiel
<p style="outline: 1px dashed #ff0000;">Ein Text mit Rand</p>
scrollbarzur Übersicht
scrollbar-3dlight-color | scrollbar-arrow-color | scrollbar-base-color | scrollbar-darkshadow-color | scrollbar-face-color | scrollbar-highlight-color | scrollbar-shadow-color | scrollbar-track-color
Diese Eigenschaft ist ein Microsoft spezifisches StyleSheet und kein offizieller CSS-Standard. Die Angaben verändern
das Aussehen der Scrollbalken. Dies wird aber nur vom Internet Explorer und Opera 7+ dargestellt. Andere Browser ignorieren
diese Eigenschaften. Die Eigenschaft kann im Internet Explorer auf <applet>, <body>,
<html>, <div>, <embed>, <object> und
<textarea> angewendet werden, im Opera nur auf <body>. Mit scrollbar-base-color
kann eine Basisfarbe gesetzt werden - die einzelnen Eigenschaften setzt der Browser an Hand dieser Farbangabe.
Werte
Alle Eigenschaften erwarten einen Farbwert.
Standardwerte sind nicht gesetzt.
Vererbung
Nein
Beispiel
textarea{
scrollbar-base-color: #a6a637;
scrollbar-3dlight-color: #fff;
scrollbar-arrow-color: #000;
scrollbar-darkshadow-color: #626220;
scrollbar-face-color: #b9b679;
scrollbar-highlight-color: #999933;
scrollbar-shadow-color: #333;
scrollbar-track-color: #f0f3e4;
}
filterzur Übersicht
Alpha | Blur | Chroma | DropShadow | FlipH | FlipV | Glow | Gray | Invert | Mask | Shadow | Wave | XRay
filter ist eine weitere Microsoft-proprietäre Eigenschaft und gehört ebenfalls nicht zum CSS-Standard.
Die filter-Effekte sind einigen Filtern aus der Bildbearbeitung nachempfunden. Da diese Eigenschaften nur vom Internet Explorer
interpretiert werden, empfiehlt es sich Bilder mit Filtereffekten direkt in einem Bildbearbeitungsprogramm zu erstellen.
filter: Alpha() |
Transparenzeffekt |
filter: Blur() |
Verwischen |
filter: Chroma() |
Farbtransparenz |
filter: DropShadow() |
Schattenrand |
filter: FlipH() |
horizontale Spiegelung |
filter: FlipV() |
vertikale Spiegelung |
filter: Glow() |
glühender Rand |
filter: Gray() |
Graustufeneffekt |
filter: Invert() |
kehrt Farbwerte um |
filter: Mask() |
Transparenzmaske |
filter: Shadow() |
Schattenwurf |
filter: Wave() |
Welleneffekt auf der X-Achse |
filter: XRay() |
Fotonegativeffekt |
Werte
Die Werte richten sich nach den entsprechenden Filtern. Die genauen Werte sind auf selfHTML nachzulesen.
Standardwerte sind nicht gesetzt.
Vererbung
Nein
Beispiel
<img src="farn.jpg" style="filter:Wave(freq=3, lightstrength=40, phase=25, strength=8);" width="260" height="120" alt="" />
