Kurzreferenz CSS
    
 HomeCSS • Kurzreferenz CSS Referenz    drucken  Seite drucken

 8) Kurzreferenz

01 02 2a 03 04 05 06 07 7a 08 09 10 11 12 13 14   Einführung

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
BeschreibungWert
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
BeschreibungWert
em für elementeigene Schrifthöhe 0.8em
ex für elementeigene Höhe der Buchstaben 1.1ex
% für Prozent 90%

 
[Farbangabe]
BeschreibungWert
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
BeschreibungSelektorWert
Schriftname Schriftfamilie font-family: Arial, sans-serif
Schriftname Schriftfamilie font-family: Tims, sans
Schriftfamilie font-family: "Arial Black", sans-serif

 
Schriftstil
BeschreibungSelektorWert
gerade font-style: normal
kursiv font-style: italic
schräg font-style: oblique

 
Schriftvariante
BeschreibungSelektorWert
normal font-variant: normal
kleine Großbuchstaben font-variant: small-caps

 
Schriftgewicht
BeschreibungSelektorWert
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
BeschreibungSelektorWert
Schrifthöhe font-size: [numerischer Wert]


Textfarbe
BeschreibungSelektorWert
Farbangabe color: [Farbwert]


Hintergrundfarbe
BeschreibungSelektorWert
Farbangabe background-color: [Farbwert]

 
Textdekoration
BeschreibungSelektorWert
ohne text-decoration: none
Überstrich text-decoration: overline
Unterstrich text-decoration: underline
duchgestrichen text-decoration: line-through
blinkend text-decoration: blink

 
Textwandlung
BeschreibungSelektorWert
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
BeschreibungSelektorWert
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
BeschreibungSelektorWert
links text-align: left
rechts text-align: right
mittig text-align: center
block text-align: justify



 
3  Abstände (nur Text)

Textabstände
BeschreibungSelektorWert
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
BeschreibungSelektorWert
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
BeschreibungSelektorWert
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
BeschreibungSelektorWert
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
BeschreibungSelektorWert
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
BeschreibungSelektorWert
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 ...

01 02 2a 03 04 05 06 07 7a 08 09 10 11 12 13 14   Einführung