CSS, HTML und Javascript mit {stil}

Tabelle CSS-Eigenschaften

Conditional Comments für Internet Explorer

CSS3 bringt nicht nur neue CSS-Eigenschaften, sondern ergänzt Eigenschaften aus CSS2 und CSS2.1 um neue Werte. Besonders die alte CSS-Eigenschaft background hat Zuwachs bekommen: background-origin, background-size und background-clip.

Für einige Eigenschaften hat CSS3 neue Werte gebracht: border-image erzeugt einen Schmuckrahmen aus einem Pixelbild, gradient erzeugt eine Verlauf.

Die Eigenschaften sind in Gruppen eingeteilt:

Animation
@keyframes Keyframes-Regel
animation
Kurzschrift
animation-name, animation-delay, animation-duration, animation-direction, animation-play-state, animation-iteration-count,animation-fill-mode, animation-timing-function
background and color – Hinter- und Vordergrundfarben
color
Farbe des Vordergrundes
Hex-Wert, RGB-Wert, HSL-Wert, linear-gradient, radial-gradient, transparent
opacity
Transparenz
0 – 1
background
Kurzschrift: Fasst Eigenschaften zusammen
background-color , background-image , background-repeat , background-attachment , background-position
background-attachment
Hintergrund steht fest oder scrollt
scroll, fixed
background-clip
Hintergrund unter border
padding-box, border-box, content-box
background-color
Hintergrundfarbe eines Elementes
transparent, Hex-Wert, RGB-Wert, HSL-Wert, Gradient
background-image
Hintergrundbild
uri | none
background-origin
Ursprung und Reichweite
padding-box, border-box, content-box
background-position
anfängliche Position
px, pt, pc, cm, in, em, ex, % {1,2} | [ [ top | center | bottom ] und / oder [ left | center | right ] ]
background-repeat
Hintergrundbild wiederholen
repeat | repeat-x | repeat-y | no-repeat
background-size
Hintergrundbild skalieren
px, pt, pc, cm, in, em, ex, %, contain, cover
box-shadow
erzeugt einen oder mehrere Schlagschatten
border – sichtbarer Rahmen um ein Element
border
Kurzschrift für alle Eigenschaften
border-width , border-style , border-color
border-color
Farbe des Rahmens an allen vier Seiten
Hex-Wert, RGB-Wert, HSL-Wert, linear-gradient, linear-gradient, transparent
border-top-color, border-right-color, border-bottom-color, border-left-color
Farbe des Rahmens
Hex-Wert, RGB-Wert, HSL-Wert, linear-gradient, linear-gradient, transparent
border-style
Stil aller vier Rahmenseiten
none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset
border-top
border-right, border-bottom, border-left
border-top-style, border-right-style, border-bottom-style, border-left-style
Rahmenlinie
hidden, dotted, dashed, solid, double, groove, ridge, inset, outset
border-width
Breite aller vier Rahmenseiten
thin, medium, thick, px, pt, pc, cm, in, em, ex, %
border-top-width, border-right-width, border-bottom-width, border-left-width
Breite des Rahmens
thin, medium, thick, px, pt, pc, cm, in, em, ex, %
border-image
Schmuckrahmen aus einem Bild, SVG-Grafik oder Verlauf
border-image-source, border-image-slice, border-image-width, border-image-repeat, none
border-radius
rundet die Ecken von HTML-Boxen ab
border-bottom-left-radius, border-bottom-right-radius, border-top-left-radius, border-top-right-radius
margin – der äußere Rand erzeugt den Abstand gegen den umgebenden Block
margin
Abstand von benachbarten Elementen
px, pt, pc, cm, in, em, ex, %, auto ] {1,4}
margin-top, margin-right, margin-bottom, margin-left
margin an den einzelnen Seiten
px, pt, pc, cm, in, em, ex, %, auto
padding – Abstand der Inhalte gegen den Rand des Elements.
padding
Kurzschrift
px, pt, pc, cm, in, em, ex, % {1,4}
padding-top, padding-right, padding-bottom, padding-left px, pt, pc, cm, in, em, ex, %
Effekte, Shadow, Gradient
text-shadow
setzt einen Schatten hinter den Text
linear-gradient
Linearer Verlauf ohne Hintergrundbild
radial-gradient
Kreis-Verlauf ohne Hintergrundbild
transition
ändert den Wert einer CSS-Eigenschaft über die Zeit
transition-property , transition-duration, transition-timing-function, transition-delay
transform
ändert die Position, Größe und Form von HTML-Elementen
translate, translateX, translateY, scale, scaleX, scaleY, scaleZ, scale3d, rotate, rotate3d, skew, skewX, skewY, matrix, matrix3d, perspective, transform-origin
Generated Content – für die automatische Erzeugung von Inhalten und deren Nummerierung sind die Eigenschaften der Gruppe content verantwortlich.
content
automatisch generierte Inhalte (z.B. Zeichenketten, Hochkommas, Zähler)
attr(x), counter(name), counter(name, list-style-type), counters(name, string), counters(name, string, list-style-type), no-close-quote, no-open-quote, close-quote, open-quote, string, uri("urladdress")
counter-increment
generiert Zähler
none, normal, [ identifier number? ]+
counter-reset
Zähler auf Anfangswert zurücksetzen
none, [ identifier number? ]+
quotes
Liste von Anführungszeichen
none | [ string string? ]+
Horizontale und vertikale Abmessung eines Elements, z.B. die Höhe und Breite eines Absatzes, einer Tabelle, eines <div>-Containers und der Zeilenhöhe.
height
Höhe eines Blockelements
px, pt, pc, cm, in, em, ex, %, auto
width
Breite eines Elements
px, pt, pc, cm, in, em, ex, %, auto
line-height
Abstand aufeinander folgenden Zeilen
normal , number , px, pt, pc, cm, in, em, ex, %
max-height
bestimmt die maximale Höhe eines Elements.
none, px, pt, pc, cm, in, em, ex, %
max-width
gibt die maximale Breite eines Elements an.
none , px, pt, pc, cm, in, em, ex, %
min-height
gibt die minimale Höhe eines Elements an.
px, pt, pc, cm, in, em, ex, %
min-width
gibt die minimale Breite eines Elements an.
px, pt, pc, cm, in, em, ex, %
box-sizing
Vereinfacht das CSs-Box-Modell
box-sizing: border-box, box-sizing: content-box
font und text – Darstellung von Schrift (Schriftart, -größe, -stile und -varianten) und Text
font
Kurzfassung für alle Eigenschaften der Schrift
[ [ font-style &| font-variant &| font-weight ]? font-size [ / line-height ]? font-family ] | caption | icon | menu | message-box | small-caption | status-bar | inherit
font-family
wählt eine spezielle Schrift
[ [ family-name | generic-family], ]* [family-name | generic-family] | inherit
font-size
Größe der Schrift
cm (Zentimeter), em (ems), ex (x-Höhe), in (Inch), mm (Millimeter), pc (Pica), pt (Punkt), px (Pixel), %, larger, smaller, xx-small, x-small, small, medium, large, x-large, xx-large
font-style
Schriftstil
normal | italic | oblique
font-variant
stellt die Schrift in Kapitälchen dar
normal, small-caps
font-weight
Abstufungen von fett
normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
direction
Richtung des Textflusses
ltr | rtl
letter-spacing
Abstand zwischen den Zeichen eines Textes
normal, px, pt, pc, cm, in, em, ex, %
text-align
Text-Ausrichtung
left | right | center | justify
text-decoration
Unterstreichen (wie Links)
none, text-decoration-line, text-decoration-color, text-decoration-style, text-decoration-skip
text-indent
Text einrücken
px, pt, pc, cm, in, em, ex, %
text-transform
Groß- und Kleinschreibung
capitalize, uppercase, uppercase, lowercase, none
unicode-bidi
Richtung des Textes
bidi-override , embed, normal
vertical-align
Vertikale Ausrichtung
baseline, sub, super, top, text-top, middle, bottom, text-bottom, px, pt, pc, cm, in, em, ex, %
white-space
Weißraum innerhalb eines Elements
normal, pre, pre-wrap, pre-line, nowrap
word-spacing
Weißraum zwischen Wörtern.
normal , px, pt, pc, cm, in, em, ex, %
List – ungeordnete Aufzählungen werden typischerweise durch gefüllte Kreise eingeleitet, gefolgt von einem Einzug und einem Text. Alternativ können eigene Bilder anstelle des gefüllten Kreises benutzt werden. Geordnete Aufzählungen werden typischerweise durch eine Folge von Zahlen oder Buchstaben eingeleitet, gefolgt von einem Einzug und einem Text.
list-style-image
Adresse eines Bildes als Aufzählungssymbol
url ("urladdress") | none
list-style-position
Einziehen von Listenelementen
inside | outside
list-style-type
Aufzählungssymbol in einer Liste
disc, circle, square, decimal, lower-roman, upper-roman, lower-alpha, upper-alpha, armenian, cjk-ideographic, georgian, lower-greek, hebrew | hiragana | hiragana-iroha | katakana | katakana-iroha, lower-latin, upper-latin
list-style
Kurzschrift
list-style-image &| list-style-position &| list-style-type
CSS Positionieren: absolute und relative Positionierung, float und display: flex
float
setzt ein Element an den linken oder rechten Rand
left, right, none
clear
beendet float
both, left, right, none
position
Art der Positionierung
absolute, fixed, relative, static, sticky
top, right, bottom, left Position auto , px, pt, pc, cm, in, em, ex, %
display
Typ des Elements
block, flex, inline, inline-block, inline-table, list-item, marker, run-in, table, table-caption, table-cell, table-column, table-column-group, table-footer-group, table-header-group, table-row, table-row-group, none
z-index
Ebene für positionierte Elemente
auto | number
flex
Layout und Positionieren in Zeilen und Spalten
Die Stile der Gruppe Visual Effects geben den Maßen eines Elements Vorrang vor den Inhalten (ähnlich wie die Stile für Tabellen) und beschneiden übergroße Inhalte.
clip
Beschneiden
auto | rect (top, right, bottom, left)
overflow
Verhalten beim Überfließen des Inhalts
auto, hidden, scroll, visible
visibility
Sichtbarkeit
collapse, hidden, visible
Die Stile für Tabellen liefern eine Mechanismus, um den vorgegebenen Maßen der Tabelle Vorrang vor den Inhalten zu geben und modernisieren das sichtbare Gitternetz der Tabelle
border-collapse
Tabellenrahmen zusammenlegen
collapse, separate
border-spacing
Raum zwischen Tabellenrahmen
px, pt, pc, cm, in, em, ex, %
caption-side
Position einer Tabellenbeschriftung
bottom, top
empty-cells
unterdrückt die Darstellung leerer Zellen
hide, show
table-layout
feste Breite
auto, fixed
User Interface – Stile für die Gestaltung von Elementen der Benutzerschnittstelle
cursor
Grafik für den Mauszeiger
auto | crosshair | default | pointer | move | e-resize | ne-resize | nw-resize | n-resize | se-resize | sw-resize | s-resize; w-resize; text; wait; help | <uri> | progress
outline-color
zusätzlicher Rahmen ohne Platzanspruch
color
outline-style
Form eines zusätzlichen Rahmens
wie border-style
outline-width
Breite eines zusätzlichen Rahmens
wie border-width
outline
Kurzschrift
outline-color
outline-style
outline-width
Paged Media – Während die Ausgabe auf dem Monitor und auch die Sprachausgabe als "fortlaufende" Ausgabe betrachtet werden kann, muss der Druck ein HTML-Dokument in eine oder mehrere Seiten unterteilen. Die Seitenausgabe erweitert das Modell der visuellen Formatierung um die Seitenbox und Seitenumbrüche.
page-break-before
page-break-after

Seitenumbruch
auto | always | avoid | left | right
page-break-inside auto | avoid
orphans
Absätze umbrechen: Hurenkinder
integer
widows
Absätze umbrechen: Schusterjungen
integer
:left :right :first
linke, rechte, erste Seite
first | left | right