 8) Kurzreferenz
Hier finden Sie einen (unvollständigen) Überblick der gängigen CSS-Anweisungen für Eigenschaften + Werte und eine Kurzbeschreibung. Für ausführliche Informationen empfehle ich  SELFHTML  und die Seite css4you.de .
|
|
Kurzreferenz - Selektoren + Werte
Syntax - Regeln
erst den Selektor (gefolgt von einem Doppelpunkt) notieren,
dann den Wert und die Einheit (ohne Leerzeichen),
dann ein Semikolon (Strichpunkt).
Beispiele für den Schriftgrad:
Wird als Wert eine Kommazahl eingetragen,
ist das Dezimalzeichen immer ein Punkt!
|
font-size: 12px;
font-size: 0.4cm;
font-size: 80%;
|
Beispiele für Kurzschreibweise:
|
font: Arial, sans-serif 12px #6F6F6F;
margin: 5px 2px 5px 2px;
border: 1px solid #FF00FF;
|
 beispiele zu Kurzschreibweisen / Kurzformen (Seite 14)
Werte - Maßeinheiten - Farbangaben
ausführliche Erklärungen zu den Werten (Seite 10)
[numerischer Wert] - absolute Werte
| Beschreibung | Wert |
|---|
| pt für Punkt (= 1/72 inches) |
12pt |
| pc für Pica (= 12 Punkt) |
12pc |
| px für Pixel |
12px |
| in für Inch (= 2.54 cm) |
0.4in |
| mm für Millimeter |
6mm |
| cm für Zentimeter |
0.7cm |
[numerischer Wert] - relative Werte
Verhältnis zur Normalgröße
| Beschreibung | Wert |
|---|
| em für elementeigene Schrifthöhe |
0.8em |
| ex für elementeigene Höhe der Buchstaben |
1.1ex |
| % für Prozent |
90% |
[Farbangabe]
| Beschreibung | Wert |
|---|
| Farbnamen (englische) |
blue |
| hexadezimale Notation |
#0000FF |
| dezimal RGB-Werte |
rgb(0,0,255) |
| Prozentangaben RGB-Werte |
rgb(0%,0%,100%) |
1 Texte - Schrift
Eine oder mehrere (durch Komma getrennt) Schriftarten und Schriftfamilien. Schriftarten und Schriftfamilien, die ein Leerzeichen beinhalten, in Anführungszeichen.
Schriftfamilie
| Beschreibung | Selektor | Wert |
|---|
| Schriftname Schriftfamilie |
font-family: |
Arial, sans-serif |
| Schriftname Schriftfamilie |
font-family: |
Tims, sans |
| Schriftfamilie |
font-family: |
"Arial Black", sans-serif |
Schriftstil
| Beschreibung | Selektor | Wert |
|---|
| gerade |
font-style: |
normal |
| kursiv |
font-style: |
italic |
| schräg |
font-style: |
oblique |
Schriftvariante
| Beschreibung | Selektor | Wert |
|---|
| normal |
font-variant: |
normal |
| kleine Großbuchstaben |
font-variant: |
small-caps |
Schriftgewicht
| Beschreibung | Selektor | Wert |
|---|
| normal |
font-weight: |
normal |
| fett |
font-weight: |
bold |
| fetter |
font-weight: |
bolder |
| leichter |
font-weight: |
lighter |
| fett |
font-weight: |
bold |
| Abstufung |
font-weight: |
100 |
| Abstufung |
font-weight: |
900 |
Schriftgröße
| Beschreibung | Selektor | Wert |
|---|
| Schrifthöhe |
font-size: |
[numerischer Wert] |
Textfarbe
| Beschreibung | Selektor | Wert |
|---|
| Farbangabe |
color: |
[Farbwert] |
Hintergrundfarbe
| Beschreibung | Selektor | Wert |
|---|
| Farbangabe |
background-color: |
[Farbwert] |
Textdekoration
| Beschreibung | Selektor | Wert |
|---|
| ohne |
text-decoration: |
none |
| Überstrich |
text-decoration: |
overline |
| Unterstrich |
text-decoration: |
underline |
| duchgestrichen |
text-decoration: |
line-through |
| blinkend |
text-decoration: |
blink |
Textwandlung
| Beschreibung | Selektor | Wert |
|---|
| keine |
text-transform: |
none |
| erster Buchstabe groß |
text-transform: |
capitalize |
| Großbuchstaben |
text-transform: |
uppercase |
| Kleinbuchstaben |
text-transform: |
lowercase |
2 Ausrichtungen
anschauliche Erklärung zu vertical-align (Seite 11)
Ausrichtung in Relation zum Nachbarelement
vertikale Ausrichtung
| Beschreibung | Selektor | Wert |
|---|
| Grundlinie |
vertical-align: |
baseline |
| tiefgestellt |
vertical-align: |
sub |
| hochgestellt |
vertical-align: |
super |
| oben |
vertical-align: |
top |
| Textoberkante |
vertical-align: |
text-top |
| Mittellinie |
vertical-align: |
middle |
| Basislinie |
vertical-align: |
bottom |
| Textunterkante |
vertical-align: |
text-bottom |
horizontale Ausrichtung
| Beschreibung | Selektor | Wert |
|---|
| links |
text-align: |
left |
| rechts |
text-align: |
right |
| mittig |
text-align: |
center |
| block |
text-align: |
justify |
3 Abstände (nur Text)
Textabstände
| Beschreibung | Selektor | Wert |
|---|
| Wortabstand |
word-spacing: |
[numerischer Wert] |
| Zeichenabstand |
letter-spacing: |
[numerischer Wert] |
| Zeilenhöhe |
line-height: |
[numerischer Wert] |
| Texteinrückung |
text-indent: |
[numerischer Wert] |
4 Abstände alle Elemente
Außen-Abstand
| Beschreibung | Selektor | Wert |
|---|
| Abstand oben |
margin-top: |
[numerischer Wert] |
| Abstand rechts |
margin-right: |
[numerischer Wert] |
| Abstand unten |
margin-bottom: |
[numerischer Wert] |
| Abstand links |
margin-left: |
[numerischer Wert] |
Innen-Abstand
| Beschreibung | Selektor | Wert |
|---|
| Abstand oben |
padding-top: |
[numerischer Wert] |
| Abstand rechts |
padding-right: |
[numerischer Wert] |
| Abstand unten |
padding-bottom: |
[numerischer Wert] |
| Abstand links |
padding-left: |
[numerischer Wert] |
5 Rahmen / Ränder
Rahmen
| Beschreibung | Selektor | Wert |
|---|
| kombi |
border: |
[Breite] [Typ] [Farbwert] |
| Beispiel |
border: |
1px solid #FFB9C0 |
| Rahmenbreite |
border-width: |
thin |
| Rahmenbreite |
border-width: |
medium |
| Rahmenbreite |
border-width: |
thick |
| Rahmenbreite |
border-width: |
[numerischer Wert] |
| Rahmenfarbe |
border-color: |
[Farbwert] |
| kein Rahmen |
border: |
none |
| Rahmen gepunktet |
border-style: |
dotted |
| Rahmen gestrichelt |
border-style: |
dashed |
| Rahmen duchgezogen |
border-style: |
solid |
| Rahmen Doppellinie |
border-style: |
double |
| 3D-Rahmen |
border-style: |
groove |
| 3D-Rahmen |
border-style: |
ridge |
| 3D-Rahmen |
border-style: |
inset |
| 3D-Rahmen |
border-style: |
outset |
6 Hintergrund Farbe / Grafik
ausführliche Erklärungen, Grafik als Seitenhintergrund
Hintergrund
| Beschreibung | Selektor | Wert |
|---|
| Hintergrundfrabe |
background-color: |
[Farbwert] |
| Hintergrundgrafik |
background-image: |
url([Dateiname]) |
| Positionierung |
background-position: |
[Positionsangaben] |
| kombi |
background: |
[Quelle] [Farbwert] [Positionsangaben] |
| Beispiel |
background: |
url(dateiname.jpg) #FFB9C0 top left |
7 Kommentare
Ein Kommentar wird eingeleitet mit /* , und beendet mit */ .
/* das ist eine Kommentarzeile */
margin:0px; /* auch ein Kommentar */
8 Scrollbars / Bildlaufleisten
Scollbars
| Beschreibung | Selektor | Wert |
|---|
| unterdrücken |
overflow: |
hidden |
| erzwingen |
overflow: |
show |
| horizontal unterdrücken |
overflow-x: |
hidden |
| vertikal unterdrücken |
overflow-y: |
hidden |
Scrollbarfarben
Scrollbars - ausführliche Erklärungen
  
body {
/* scrollbar-Formatierung */
scrollbar-face-color: #FFFFFF;
scrollbar-shadow-color: #FFFFFF;
scrollbar-highlight-color: #FFFFFF;
scrollbar-3dlight-color: #7AAFF1;
scrollbar-darkshadow-color: #808080;
scrollbar-track-color: #FFFFFF;
scrollbar-arrow-color: #000000;
}
Bemerkung: Der FF ignoriert die Anweisungen (Versionsabhängig)
Download
Überblick der wichtigsten CSS-Anweisungen für Eigenschaften + Werte. Identisch mit den auf dieser Seite gelisteten Anweisungen. Für weitere Info empfehle ich SELFHTML.
 Download
anzeigen / ausdrucken / abspeichern
Kurzreferenz als PDF-Datei
Eigenschaften + Werte
Format: DIN A4
Dateigröße: 29 kB
Weiter gehts auf der Seite 9 ...
|
Home • CSS • Kurzreferenz CSS
Referenz
drucken 