CSS - Alles rund um Text

Habe ich hier hauptsächlich als eigenes Nachschlagewerk aufgeführt - die Sachen werden gebraucht um das design dieser Webseite anzupassen.

font

Schrifarten:

• font-family:
  • "Name der Schriftart" - z.B. "Times New Roman"
  • Teil des Namens - z.B. Times
  • Schriftartenfamilie
    • Serif - z.B. Times New Roman
    • San-serif - z.B. Arial
    • Monospace - Consolenschriftarten, z.B. Courier New

font-family:"Times New Roman", Times, serif;

Stil (normal oder italic

• font-style:
  • normal - ja- normal halt
  • italic - Schräge Schrift

font-style: normal;

Stil (fett etc.)

• font-weight:
  • normal
  • bold -> fett
  • bolder -> extra fett
  • lighter -> Dünner als normal
  • 100, 200, 300, 400, 500, 600, 700, 800, 900 -> wobei 400 normal sein sollte und 700 bold

font-weight: bold;

Stil (Unterstreichen etc.)

• text-decoration:
  • normal
  • underline - unterstrichen
  • overline - Linie über dem Text
  • line-through - durchgestrichen

text-decoration:underline;
text-decoration:line-through;

Größe

• font-size:
  • in Pixel, z.B. 20px
  • in "em", z.B. 2em (wobei 1em der normalen Schriftgröße entsprechen soll, 1em sollten 16px sein)
  • in %, z.B. 100%

font-size: 2em;

Farbe

• color:
  • Farbwert als Hexadezimal: ##ffffff ist weiss, #000000 ist schwarz
  • Farbenname, z.B. red, black, white, grey, lightgrey

color: #fc0000;
color: white;

Ausrichtung

• text-align:
  • left = links
  • center = zentriert
  • right = rechts
  • justify = Blocksatz

text-align: center;
text-align: left;
text-align: right;
text-align: justify;

Umwandeln (GROSS/klein)

• text-transform:
  • none
  • capitalize - erster Buchstabe groß, Rest klein
  • uppercase - alles in GROSSBUCHSTABEN
  • lowercase - alles in kleinbuchstaben

text-transform: uppercase;
text-transform: lowercase;
text-transform: capitalize;

Einzug (~TAB)

• text-indent:
  • Wert in px, em oder % -> gibt den Abstand zum eigentlichen Textrand an, so ähnlich wie TAB. Die umgebrochenen Zeilen fangen aber wieder normal an.

text-indent:20px