- Wortabstand
- word-spacing
- Dieser Text wird
künstlich durch word-spacing auseinander gezogen. Dieser Trick ist sehr
gut wenn du in Word eine Diplomarbeit schreiben musst, die eine
festgesetzte Seitenzahl hat, die für dich sehr schwer ist zu füllen,
aber im html bringt dir das Auseinanderziehen der Wörter nichts. es sei
denn du möchtest einen Text auf diese Weise hervorheben.
- Buchstabenabstand
- letterspacing
- Natürlich kannst du nicht nur die Wörter auseinander ziehen
sonder auch die Buchstaben in deinem Text. Dieser Trick kann sehr gut
angewendet werden, bei einer Unterüberschrift. Es sieht schön aus, wenn
die Texte bündig abschließen. Aber auch hier solltest du dir das gut
überlegen, denn wie du bereits weist, haben nicht alle Leser das
gleiche Betriebssystem und die gleiche Monitorauflösung.
- Texteinrückung
- text-indent
- Beispiel: text-indet: 50px;
Dieser Text ist auf 50px eingerückt. Die Formatierung wurde dem Element zugewiesen.
- Vertikale Ausrichtung
- vertical-align
- Beispiel: vertical-align: middle; Dieses Element hat eine Höhe von 70px und wurde als Anzeige Tabellenzelle formatiert.
- Kapitälchen
- font-variant: small-caps
- Beispiel: font-variant: small-caps;
Dieser Text in in Kapitälchen formatiert.
- Schriftgewichtung
- font-weight: 100, 200, 300, ..., 900
- Beispiel: font-weight: 100
Beispiel: font-weight: 600
- Konturen
- outline-color
- outline-style
- outline-width
- Konturen sind Rahmen die um ein Inline-Element gelegt werden. Du
hast sie auch schon einmal gesehen. z.B. bei Links. Wenn du einen Link
anklickst, wird immer eine dünne Linie um den klickbaren Bereich
angezeigt. Dies sind Konturen, die du entweder wie einen Rahmen
formatieren oder auch deaktivieren kannst.
- outline: none;
- Cursor-Anzeige
- coursor: crosshair, pointer, move, resize, text, wait, help, progress
- Mit diesen Einstellungen lässt sich das Verhalten des Cursors verändern. Du kennst die verschiedenen Cursor-Anzeigen:
- cursor: crosshair
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
sint occaecat cupidatat non proident, sunt in culpa qui officia
deserunt mollit anim id est laborum.
- cursor:pointer
Sed ut perspiciatis unde omnis iste natus error sit voluptatem
accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae
ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt
explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut
odit aut fugit, sed quia consequuntur magni dolores eos qui ratione
voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum
quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam
eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat
voluptatem.
- cursor:move
Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis
suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis
autem vel eum iure reprehenderit qui in ea voluptate velit esse quam
nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo
voluptas nulla pariatur?
- cursor:e-resize
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit
in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
officia deserunt mollit anim id est laborum.
- cursor:text
Sed ut perspiciatis unde omnis iste natus error sit voluptatem
accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae
ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt
explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut
odit aut fugit, sed quia consequuntur magni dolores eos qui ratione
voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum
quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam
eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat
voluptatem.
- cursor:wait
Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis
suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis
autem vel eum iure reprehenderit qui in ea voluptate velit esse quam
nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo
voluptas nulla pariatur?
- cursor:help
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
sint occaecat cupidatat non proident, sunt in culpa qui officia
deserunt mollit anim id est laborum.
- cursor:progress
Sed ut perspiciatis unde omnis iste natus error sit voluptatem
accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae
ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt
explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut
odit aut fugit, sed quia consequuntur magni dolores eos qui ratione
voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum
quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam
eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat
voluptatem.
Kurzformen
CSS-Angaben können in Kurzformen angegeben werden. Anstatt z.B. in
den Boxeigenschaften alle Abstände auf 0px zu setzen, kannst du dies
mit einer Angabe im Register Allgemein:
- Außenabstand: oben 0px, rechts 0px, unten 0px, links 0px
- margin: 0px;
- Innenabstand: oben 0px, rechts 0px, unten 0px, links 0px
- padding: 0px;
- Schrift: Schriftstil, Schrift Case, Schriftschnitt, Schriftgröße, Zeilenhöhe, Schriften-Familie
- font: italic, small-caps, bold 14px 1,5em Arial, Helvetica, Sans
- Rahmen: Rahmen Typ, Stärke Farbe
- border: solid 2px #990000;
- Kein Rahmen
- border: none;
- Eine Generalklasse ist das *
- Möchtest du alle automatischen Abstände auf 0 setzen, verwendest du das Sternchen als Klassenbezeichnung.
- * {margin: 0; padding:0;}