michaelsinterface.de

css.documentation

Vorwort

'Cascading Style-Sheets' (CSS) definieren Formateigenschaften für HTML-Elemente und sind das Werkzeug zur Gestaltung von HTML-Seiten. Neben der Auswahl von Schriftarten, Farben oder Hintergrundbildern bietet CSS dem Autor und Designer Formatieroptionen, die weit über die Möglichkeiten von HTML hinausgehen, wie z.B. das Positionieren von Elementen, die Gestaltung von Listen und Formularen, u.v.m. Es gibt drei Methoden, um Stylesheet-Formatierungen mit HTML-Elementen zu verbinden: als Inline-Style mit dem style-Attribut im einleitenden HTML-Tag <body style=" ... "> </body> als internes Stylesheet im Dokumentheader einer HTML-Datei mit dem style-Element <style type="text/css"> body { ... } </style> als externes Stylesheet in einer CSS-Datei <link rel="stylesheet" type="text/css" href="formate.css"> Die Techniken können in einem HTML-Dokument auch kombiniert werden. Hierbei gilt: die innere Formatdefinition hat immer Vorrang vor der Äusseren!
Inline-Style: das style-Attribut Mit dem Universalattribut style="..." können HTML-Elemente direkt formatiert werden. Die Formatdefinitionen gelten dann nur für dieses Element.
Internes Stylesheet: das style-Element Mit dem style-Element wird im Dokumentheader einer HTML-Datei ein zentrales internes Stylesheet angelegt.
Externes Stylesheet: die CSS-Datei Über das link-Element wird eine externe CSS-Datei in die HTML-Seiten geladen. Diese Technik empfiehlt sich für umfangreiche Projekt-Seiten, die ein einheitliches Layout erhalten sollen. Zum Erstellen von CSS-Dateien kann neben speziellen CSS-Editoren auch ein herkömmlicher Text-Editor (z.B. Notepad) verwendet werden - einfach "Speichern unter..." wählen und als Dateiendung *.css eingeben.
Klassen Es lassen sich CSS-Klassen für Elemente definieren, die in den Tags mit dem Universalattribut class=["Klassen-Name"] aufgerufen werden. Dazu werden im zentralen Style-Sheet Namen für die CSS-Klassen vergeben - hier: .demo1 und .demo2
Individualformate Mit dem Universalattribut id=["ID-Name"] können Individualformate für bestimmte Elemente erzeugt werden. Solche Formate beginnen mit dem Rautenzeichen #, gefolgt von dem id-Namen.
Vorwort Angaben zur Schriftart, -grösse, -farbe, usw. lassen sich auf alle HTML-Elemente anwenden, die Text enthalten können, also der Textstrukturierung dienen: * Körper / anzuzeigender Inhalt = body * Überschriften = h1 - h6 * Textabsätze = p * Listen = ol, ul, li * Tabellen = table, td, th, tr * Zitate / Adressen = blockquote, address * Präformatierter Text = pre * Block- & Inline-Element = div, span
font-family Mit font-family wird eine oder mehrere Schriftarten definiert. Auch Schriftfamilien wie Sans Serif, Serif, usw. können bestimmt werden.
font-size Mit font-size wird die Darstellungsgröße der Schrift definiert. Erlaubt ist eine numerische Angabe.
font-weight Mit font-weight wird das Schriftgewicht definiert. Das Schriftgewicht bezeichnet die Dicke und Stärke einer Schrift. Folgende Angaben sind möglich: normal = normal bold = fett bolder = extra-fett lighter = dünner 100,200,300,400,500,600,700,800,900 = extra-dünn bis extra-fett
font-style Mit font-style wird der Schriftstil definiert. Schriftstil bedeutet die Neigung der Schrift. Folgende Angaben sind möglich: normal = normaler Schriftstil. italic = Schriftstil kursiv. oblique = Schriftstil kursiv.
font-variant Mit font-variant wird die Schriftvariante definiert. Als Schriftvariante stehen Kapitälchen (kleine Grossbuchstaben) zur Verfügung. Folgende Angaben sind möglich: small-caps = Kapitälchen. normal = normale Schriftvariante
font Diese Eigenschaft ist eine Zusammenfassung der Einzelangaben, und ermöglicht das Kombinieren der einzelnen Eigenschaften.
text-decoration Mit text-decoration wird die Textdekoration definiert. Folgende Angaben sind möglich: underline = unterstrichen overline = überstrichen line-through = durchgestrichen blink = blinkend none = normal (keine Text-Dekoration)
color Mit color wird die Textfarbe definiert. Erlaubt sind alle Farbangaben.
word-spacing Mit word-spacing kann der Abstand zwischen Wörten festgelegt werden. Erlaubt ist eine numerische Angabe. Prozentuale Angaben sind hiervon ausgenommen.
letter-spacing Mit letter-spacing kann der Abstand zwischen Buchstaben bzw. Zeichen festgelegt werden. Erlaubt ist eine numerische Angabe. Prozentuale Angaben sind hiervon ausgenommen.
Vorwort Textblöcke und -absätze besitzen absatztypische Eigenschaften, wie z.B. eine links- oder rechtsbündige Ausrichtung, den Einzug, oder eine Zeilenhöhe.
text-align Mit text-align lassen sich Elemente für Textinhalte horizontal ausrichten. Folgende Angabe sind möglich: left = linksbündig ausrichten (Voreinstellung) center = zentriert ausrichten right = rechtsbündig ausrichten justify = als Blocksatz ausrichten. Textabsätze und andere Blockelemente mit Fliesstext ausrichten.
text-indent Mit text-indent wird die Einrückung der ersten Textzeile definiert. Erlaubt ist eine numerische Angabe.
line-height Mit line-height wird die Zeilenhöhe definiert. Erlaubt ist eine numerische Angabe.
vertical-align Mit vertical-align wird die vertikale Ausrichtung bestimmt. Erlaubt sind folgende Angaben: top = obenbündig ausrichten middle = mittig ausrichten bottom = untenbündig ausrichten baseline = an der Basislinie ausrichten sub = tieferstellen super = höherstellen text-top = am oberen Schriftrand ausrichten text-bottom = am unteren Schriftrand ausrichten
white-space Mit white-space kann das Verhalten für den Zeilenumbruch festgelegt werden. Folgende Angaben sind möglich: normal = automatischer Zeilenumbruch pre = Zeilenumbruch wie im Editor eingegeben nowrap = Kein automatischer Zeilenumbruch
Vorwort Die hier vorgestellten Angaben zum Aussenabstand lassen sich auf alle HTML-Elemente anwenden, die einen eigenen Absatz bzw. einen Block im Textfluss bilden, also etwa für: * Vorwort Blockelement = div * Überschriften = h1 - h6 * Textabsätze = p * Listen = ol, ul, li * Tabellen = table, td, th, tr * Formulare = form, input, textarea, select * Zitate / Adressen = blockquote, address * Präformatierter Text = pre
margin-top Mit margin-top wird der obere Aussenabstand zum Vorgänger- oder Elternelement definiert. Erlaubt sind alle numerischen Angaben.
margin-right Mit margin-right wird der rechte Aussenabstand zum Vorgänger- oder Elternelement definiert. Erlaubt sind alle numerischen Angaben.
margin-bottom Mit margin-bottom wird der untere Aussenabstand zum Vorgänger- oder Elternelement definiert. Erlaubt sind alle numerischen Angaben.
margin-left Mit margin-left wird der linke Aussenabstand zum Vorgänger- oder Elternelement definiert. Erlaubt sind alle numerischen Angaben.
margin Mit margin wird der Abstand zu allen Seiten definiert. Erlaubt sind alle numerischen Angaben.
Vorwort Die hier vorgestellten Angaben zum Innenabstand lassen sich auf alle HTML-Elemente anwenden, die einen eigenen Absatz bzw. einen Block bilden, also etwa für: * Vorwort Blockelement = div * Überschriften = h1 - h6 * Textabsätze = p * Listen = ol, ul, li * Tabellen = table, td, th, tr * Formulare = form, input, textarea, select * Zitate / Adressen = blockquote, address * Präformatierter Text = pre
padding-top Mit padding-top wird der Innenabstand zwischen Elementinhalt und der oberen Elementgrenze definiert. Erlaubt sind numerische Angaben.
padding-right Mit padding-top wird der Innenabstand zwischen Elementinhalt und der rechten Elementgrenze definiert. Erlaubt sind numerische Angaben.
padding-bottom Mit padding-bottom wird der Innenabstand zwischen Elementinhalt und der unteren Elementgrenze definiert. Erlaubt sind numerische Angaben.
padding-left Mit padding-left wird der Innenabstand zwischen Elementinhalt und der linken Elementgrenze definiert. Erlaubt sind numerische Angaben.
padding Mit padding kann ein einheitlicher Innenabstand zwischen dem Elementinhalt und den vier Elementgrenzen bestimmt werden. Erlaubt sind numerische Angaben.
Vorwort Die hier vorgestellten Angaben zum Hintergrund lassen sich auf alle HTML-Elemente anwenden, die einen eigenen Absatz erzeugen bzw. einen Block bilden, also etwa für: * Vorwort Blockelement = div * Überschriften = h1 - h6 * Textabsätze = p * Listen = ol, ul, li * Tabellen = table, td, th, tr * Formulare = form, input, textarea, select * Zitate / Adressen = blockquote, address * Präformatierter Text = pre
background-color Mit background-color wird eine Hintergrundfarbe für ein Element definiert. Erlaubt ist eine Farbangabe.
background-image Mit background-image: url([Dateiname]) wird ein Hintergrundbild für ein Element definiert. Beim Referenzieren von Grafiken können relative oder absolute Pfadnamen verwendet werden: * relative Pfadnamen background-image: url(verzeichnis/grafik.jpg) background-image: url(verzeichnis/unterverz/grafik.jpg) background-image: url(grafik.jpg) background-image: url(../grafik.jpg) background-image: url(../../../grafik.jpg) background-image: url(../verzeichnis/grafik.jpg) * absolute Pfadnamen background-image: url(http://domain.de/verzeichnis/grafik.jpg) background-image: url(http://domain.de/verzeichnis/unterverz/grafik.jpg) background-image: url(http://domain.de/grafik.jpg)
background-repeat Mit background-repeat wird das Wiederholungsverhalten einer Hintergrundgrafik kontrolliert. Erlaubt sind folgende Angaben: repeat = wiederholen (Voreinstellung) repeat-x = nur "eine Zeile lang" waagerecht wiederholen repeat-y = nur "eine Spalte lang" senkrecht wiederholen no-repeat = nicht wiederholen, nur als Einzelbild anzeigen
background-attachment Mit background-attachment wird bestimmt, ob ein Hintergrundbild beim Scrollen stehen bleibt (Wasserzeichen-Effekt), oder nicht. Erlaubt sind folgende Angaben: scroll = mitscrollen (Voreinstellung) fixed = Hintergrundbild bleibt stehen
background-position Mit background-position wird bestimmt, wo die linke obere Ecke der Hintergrundgrafik positioniert wird. Erlaubt sind numerische Angaben und folgende Angaben: top = vertikal obenbündig center = horizontal zentriert middle = vertikal mittig bottom = vertikal untenbündig left = horizontal linksbündig right = horizontal rechtsbündig
background Mit background lassen sich die unterschiedlichen Hintergrund-Angaben kombinieren, hierbei sind sie mit Leerzeichen zu notieren.
Vorwort Die hier vorgestellten Angaben zum Rahmen lassen sich auf alle HTML-Elemente anwenden, die einen eigenen Absatz erzeugen bzw. einen Block bilden, also etwa für: * Körper / anzuzeigender Inhalt = body * Vorwort Blockelement = div * Überschriften = h1 - h6 * Textabsätze = p * Listen = ol, ul, li * Tabellen = table, td, th, tr * Formulare = form, input, textarea * Zitate / Adressen = blockquote, address * Präformatierter Text = pre
border-width Mit border-width wird die Rahmendicke um ein Element definiert. Erlaubt sind numerische Angaben oder einer der folgenden Werte: thin = dünn medium = mittelstark thick = dick
border-color Mit border-color wird die Rahmenfarbe um ein Element definiert. Erlaubt ist eine Farbangabe oder der Wert transparent (durchsichtiger Rahmen).
Mit border-style wird der Rahmentyp definiert. Erlaubt sind folgende Angaben: none = kein Rahmen (bzw. unsichtbar) dotted = gepunktet dashed = gestrichelt solid = durchgezogen double = doppelt durchgezogen groove = 3D-Effekt ridge = 3D-Effekt inset = 3D-Effekt outset = 3D-Effekt
border Mit border wird das Aussehen eines Rahmens um ein Element definiert. Angaben zu Linienstärke, Rahmentyp und Rahmenfarbe sind mit Leerzeichen zu notieren.
Vorwort Die in diesem Kapitel vorgestellten CSS-Eigenschaften beziehen sich speziell auf die HTML-Elemente: * Aufzählungsliste ul * nummerierte Liste ol So stehen erweiterte Möglichkeiten zum Formatieren von Listen zur Verfügung, wie z.B. den Darstellungstyp der Liste, oder eine eigene Grafik als Aufzählungssymbol zu definieren.
list-style-type Mit list-style-type wird das Layout von Listenzeichen bestimmt. Folgende Angaben sind möglich: decimal = für ol-Listen: Nummerierung 1.,2.,3.,4. lower- / upper-roman = für ol-Listen: Nummerierung i.,ii.,iii.,iv. lower- / upper-alpha = für ol-Listen: Nummerierung a.,b.,c.,d. disc = für ul-Listen: Dateisymbol als Bulletzeichen circle = für ul-Listen: rundes Bulletzeichen square = für ul-Listen: rechteckiges Bulletzeichen none = kein Bulletzeichen, keine Nummerierung
list-style-position Mit list-style-position wird das Einrückungsverhalten der Listenpunkte definiert. Folgende Angaben sind möglich: inside = eingerückt outside = ausgerückt
list-style-image Mit list-style-image: url([Dateiname]) wird eine Grafik als Bulletzeichen definiert. Beim Referenzieren von Grafiken können relative oder absolute Pfadnamen verwendet werden: * relative Pfadnamen list-style-image: url(verzeichnis/grafik.jpg) list-style-image: url(verzeichnis/unterverz/grafik.jpg) list-style-image: url(grafik.jpg) list-style-image: url(../grafik.jpg) list-style-image: url(../../../grafik.jpg) list-style-image: url(../verzeichnis/grafik.jpg) * absolute Pfadnamen list-style-image: url(http://www.domain.de/verzeichnis/grafik.jpg) list-style-image: url(http://www.domain.de/verzeichnis/unterverz/grafik.jpg) list-style-image: url(http://www.domain.de/grafik.jpg)
list-style Mit list-style lassen sich die CSS-Formate für Listen kombinieren. Hierbei sind sie mit Leerzeichen zu notieren.
Vorwort Mit der Einführung von CSS2 erhielten Tabellen spezielle CSS-Eigenschaften. Aber auch die Eigenschaften von CSS1 lassen sich auf die HTML-Elemente table, tr, colgroup, col, thead, tbody, tfoot, th und td anwenden, wie beispielsweise: * Schriftformatierung * Ausrichtung - Absätze * Aussenabstand * Innenabstand * Hintergrund * Rahmen
table-layout Mit table-layout kann die Tabellenanzeige bei Breitenangaben beeinflusst werden. Folgende Angaben sind erlaubt: auto = Zelleninhalt hat Vorrang vor Breitenangaben (Voreinstellung) fixed = Breitenangaben haben Vorrang vor dem Zelleninhalt
caption-side Mit caption-side lässt sich für das caption-Element die Position der Tabellenüberschrift bestimmen. Folgende Angaben sind möglich: top = oberhalb der Tabelle. bottom = unterhalb der Tabelle
border-collapse Mit border-collapse wird die Art, wie Einzelrahmen benachbarter Tabellenzellen reagieren, festgelegt. Folgende Angaben sind möglich: separate = Zellenrahmen fallen nicht zusammen (Ausgangswert seit CSS 2.1) collapse = Zellenrahmen fallen zusammen (Ausgangswert in CSS2).
border-spacing Mit border-spacing kann für ein table-Element der Abstand zwischen den Zellenrahmen bestimmt werden. Erlaubt ist eine numerische Angabe.
empty-cells Mit empty-cells lässt sich festlegen, ob Rahmen leerer Tabellenzellen angezeigt werden oder nicht. Folgende Angaben sind möglich: show = Zellenrahmen leerer Tabellenzellen werden angezeigt hide = Zellenrahmen leerer Tabellenzellen werden unterdrückt (Voreinstellung)
Vorwort Cascading Stylesheets bieten für Formulare eine Reihe von Gestaltungsmöglichkeiten: * Schriftformatierung * Ausrichtung - Absätze * Aussenabstand * Innenabstand * Hintergrund * Rahmen * Positionierung - Anzeige Durch Anwendung dieser CSS-Eigenschaften kann das 'weiß-graue' Standard-Layout von Formularen abgewandelt und beispielsweise an das Farbset der Webseite angepasst werden.
Formular ohne CSS-Formatierung - herkömmliche Darstellung:
Formular mit CSS-Formatierung - frei wählbares Layout:
form Formularbereich
input type='button' Schaltflächen für 'Submit', 'Reset' und ähnlichen Funktionen.
input type='checkbox' Checkboxen sind ankreuzbare Quadrate, bei denen der Anwender keine, eins oder mehrere auswählen kann.
input type='radio' Radiobuttons sind eine Gruppe von beschrifteten Knöpfen, von denen der Anwender einen auswählen kann.
input type='text' Einzeilige Eingabefelder für einzelne Wörter oder Zahlen.
textarea Mehrzeilige Eingabefelder für Kommentare, Nachrichten usw.
select Auswahlliste, aus der ein Eintrag gewählt werden kann.
Vorwort * Pseudoelemente Pseudoelemente erzeugen zunächst virtuelle, gedachte Elemente innerhalb des Dokumentstammbaumes, die nicht der Auszeichnungssprache des Dokuments entstammen und in der Regel nur Teile der tatsächlich im Dokumentstammbaum stehenden Elemente einschließen. Danach werden diese abstrakten Elemente mit den notierten Eigenschaften/Werten formatiert. Im Unterschied zu Pseudoklassen werden also nicht ganze Elemente mit virtuellen Klassen versehen, sondern neue virtuelle Elemente eingeführt bzw. neue Inhalte generiert, die nicht im Quelldokument stehen, die aber dennoch Kindelemente tatsächlich vorhandener Elemente sind. * Pseudoklassen Pseudoklassen definieren Merkmale, die sich prinzipiell nicht von einem Dokumentstammbaum ableiten lassen. Darüber hinaus treten Pseudoklassen weder im Quellcode noch im Dokumentstammbaum auf. Sie sind keine tatsächlich vorhandenen Klassen, sondern nur Klassen, die man sich vorstellt, daher der Begriff 'Pseudoklassen'. In der Praxis bedeutet dies, dass, basierend auf Interaktionen des Benutzers, einem Element wechselnde Pseudoklassen zugeordnet sein können. Für jede dieser Pseudoklassen lassen sich andere Eigenschaften und Werte definieren. Pseudoklassen dürfen innerhalb eines Selektors an beliebiger Stelle auftreten und sind nicht abhängig von Groß-/Kleinschrift. Pseudoklassen haben denselben Einfluß auf die Spezifizität eines Selektors wie einfache Klassen.
:first-line, :first-letter, :first-child Diese Pseudoelemente definieren das Erscheinungsbild für die erste Zeile von mehrzeiligen Textabsätzen, das erste Zeichen einer Zeile und für das erste Kindelement innerhalb eines HTML-Elements. :first-line = die erste Textzeile des Elements :first-letter = der erste Buchstabe des Textes :first-child = das erste Kindelement des Elements
:link, :visited, :focus, :hover, :active Mit den Pseudoklassen für Verweise lässt sich das Erscheinungsbild zu noch nicht besuchten Seiten, zu bereits besuchten Seiten und für Verweise, die gerade mit der Maus überfahren oder angeklickt werden, definieren: :link = für Verweise zu noch nicht besuchten Seiten :visited = für Verweise zu bereits besuchten Seiten :focus = für Verweise, die den Fokus erhalten :hover = für Verweise, die mit der Maus überfahren werden :active = für gerade angeklickte Verweise
:before, :after Mit den Pseudoelementen :before, :after lässt sich vor oder nach einem Element automatisch Inhalt einfügen. Es kann sich hierbei um Text, beliebige Ressourcen, wie z.B. Grafiken, aber auch um variable Inhalte handeln.
Vorwort Die in diesem Kapitel vorgestellten CSS-Eigenschaften dienen dem Positionieren und Anzeigen von HTML-Elementen. So gibt es differenzierte Angaben, um Elemente im Anzeigefenster zu positionieren, die Element-Dimension zu bestimmen oder das Anzeigen, Umfliessen und Überlappen von Elementen zu steuern. Diese Angaben lassen sich auf alle HTML-Elemente anwenden, die einen eigenen Absatz bzw. einen Block bilden, also etwa für: * Block- & Inline-Element = div, span * Überschriften = h1 - h6 * Textabsätze = p * Listen = ol, ul, li * Tabellen = table, td, th, tr * Formulare = form, input, textarea, select * Zitate / Adressen = blockquote, address * Präformatierter Text = pre
position Mit position wird die Positionsart für ein Element bestimmt. Folgende Angaben sind erlaubt: static = keine Positionierung, das Element befindet sich im normalen Textfluss (Normaleinstellung) absolute = absolute Position zum Rand des Elternelements relative = relative Position zur Normal- o. Anfangsposition des Elements fixed = absolute Position im Browserfenster, das Element behält beim Scrollen seine Position
top Mit top wird für ein HTML-Element die Startposition von oben definiert. Erlaubt sind numerische Angaben.
right Mit right wird die rechte Startposition für ein Element definiert. Erlaubt sind numerische Angaben.
bottom Mit bottom wird die untere Startposition für ein Element definiert. Erlaubt sind numerische Angaben.
left Mit left wird die linke Startposition für ein Element definiert. Erlaubt sind numerische Angaben.
width Mit width wird die Breite für ein Element definiert. Erlaubt ist eine numerische Angabe, oder der Wert auto für eine automatische Breite.
height Mit height wird die Höhe für ein Element definiert. Erlaubt ist eine numerische Angabe, oder der Wert auto für eine automatische Höhe.
min[-width, -height] Mit min[-width, -height] wird die Mindestbreite bzw. -höhe für ein Element definiert. Erlaubt ist eine numerische Angabe.
max[-width, -height] Mit max[-width, -height] wird die Maximalbreite bzw. -höhe für ein Element definiert. Erlaubt ist eine numerische Angabe.
overflow Mit overflow kann definiert werden, wie übergrosse innere Elemente dargestellt werden. Folgende Angaben sind möglich: visible = übergrosser Inhalt ist komplett sichtbar hidden = übergrosser Inhalt wird abgeschnitten - nicht scrollfähig scroll = übergrosser Inhalt wird abgeschnitten - scrollfähig auto = Browser soll entscheiden, wie das Element angezeigt wird.
float Mit float kann definiert werden, daß nachfolgende Elemente das aktuelle Element umfliessen. Folgende Angaben sind möglich: left = Element steht links und wird rechts von nachfolgenden Elementen umflossen right = Element steht rechts und wird links von nachfolgenden Elementen umflossen none = Kein Umfluss (Normaleinstellung)
clear Mit clear wird ein Textumfluss abgebrochen und unterhalb des umflossenen Elements fortgesetzt. Folgende Angaben sind möglich: left = erzwingt bei float: left die Fortsetzung unterhalb right = erzwingt bei float: right die Fortsetzung unterhalb both = erzwingt in jedem Fall die Fortsetzung unterhalb none = erzwingt keine Fortsetzung unterhalb (Normaleinstellung)
z-index Mit z-index wird die Schichtposition von überlappenden Elementen bestimmt. Je höher die Zahl, desto weiter oben (vorne) ist das Element - je niedriger, desto weiter unten (hinten) ist das Element.
display Mit display kann die Anzeige von Elementen unterdrückt und die Art der Anzeige definiert werden. Folgende Angaben sind möglich: block = erzwingt einen Block, Element erzeugt eine neue Zeile inline = erzwingt die Anzeige im laufenden Textfluss inline-block = Element besitzt Blockelement-Eigenschaften, wird aber im laufenden Textfluss angezeigt list-item = wie block, jedoch mit einem Aufzählungszeichen davor run-in = das Element wird im Kontext als Block- oder Inline-Element dargestellt none = Element wird nicht angezeigt und es wird auch kein Platzhalter freigelassen Spezielle Tabelleneigenschaften: table = wirkt wie das table-Element inline-table = wirkt wie das table-Element in HTML, aber inline table-row = wirkt wie das tr-Element in HTML table-cell = wirkt wie die Elemente th und td in HTML table-row-group = wirkt wie das tbody-Element in HTML table-header-group = wirkt wie das thead-Element in HTML table-footer-group = wirkt wie das tfoot-Element in HTML table-column = wirkt wie das col-Element in HTML table-column-group = wirkt wie das colgroup-Element in HTML table-caption = wirkt wie das caption-Element in HTML
visibility Mit visibility wird festgelegt, ob ein Element zunächst angezeigt wird, oder nicht. Folgende Angaben sind möglich: hidden = Element-Inhalt wird zunächst versteckt visible = Element-Inhalt wird zunächst angezeigt collapse = Spalten oder Reihen einer Tabelle werden versteckt und geben den zuvor benötigten Platz frei
clip Mit clip wird ein Ausschnitt für die sichtbare Anzeige bestimmt. Dahinter folgt rect (Rechteck), und in runden Klammern vier numerische Werte o. das Schlüsselwort auto zur Bestimmung des Ausschnitts. Die numerischen Angaben definieren folgende Werte: 1. Wert = oberer Wert zur oberen Elementgrenze 2. Wert = rechter Wert zur linken Elementgrenze - Breite 3. Wert = unterer Wert zur oberen Elementgrenze - Höhe 4. Wert = linker Wert zur linken Elementgrenze Damit ein Ausschnitt sichtbar ist, muss der 3. Wert grösser sein als der 1. und der 2. Wert grösser als der 4. Wert.