CSS

Aus ProgrammingWiki
< EGE

Inhaltsverzeichnis

Definition

MoritzSchreiber2002_CSS-Logo.png
CSS LOGO

Cascading Style Sheets, kurz CSS genannt, ist eine Stylesheet-Sprache für elektronische Dokumente und zusammen mit HTML eine der Kernsprachen des World Wide Webs. Sie ist ein sogenannter „living standard“ (lebendiger Standard). Mit CSS werden Gestaltungsanweisungen erstellt, die vor allem zusammen mit der Auszeichnungssprache HTML eingesetzt wird. (vgl. https://de.wikipedia.org/wiki/Cascading_Style_Sheets)

Stylesheet Einbindung

HTML-Tags Formatieren (intern)
 <p style="color:#ff0000;">Ein Absatz in Rot</p>

 <h1 style="color:#00FF00;">Eine Grüne Überschrift</h1>

 <td style="color:'0000FF; background-color:'CCCCCC;">Ein blauer Text in einer Grauen Zelle</td>
 

SteveApel2310_Css.png

CSS Formatierung (extern)

body {background-color:#FFFFCC;
      margin-left:100px;}
h1   {font-size:200%;
      color:#FFCC00;
      font-style:italic;}

SteveApel2310_Css1.png

Maßeinheiten

  • pt
    • Punkt, 1pt = 1/72 inch
  • pc
    • Pica, 1pc = 12 pt
  • in
    • Inch, 1in= 2,45 cm
  • mm
    • Milimeter
  • cm
    • Centimeter
  • em
    • relativ zur Schriftgröße des Elements
  • ex
    • relativ zur höhe des Buchstaben
  • px
    • Pixel, relativ zur auflößung
  • %
    • Prozent

Farbangaben

EigenschaftenWert
  1. rrggbb
Hexadezimale RGB-Angabe
  1. rgb
Hexadezimale RGB-angabe z.B.: #C09 anstelle von #CC0099
Farbnamenwie bei HTML
rgb(R,G,B)RGB-Werte Dezimal (0-255,0-255,0-255)
rgb(%,%,%)RGB-Anteile prozentual (0-100%,0-100%,0-100%)

SteveApel2310_Css3.png

Texteigenschaften

EigenschaftBeschreibungWerte
directionSchreibrichtungltr, rtl, Inherit
letter-spacingZeichenabstandnormal, Längenangabe, Inherit
line-heightZeilenhöhenormal, Zahl, Längenangabe oder Prozentangabe, Inherit
text-alignHorizontale Ausrichtungleft,right,center,justify, Inherit
text-decorationTextdekorationnone, underline, overline, line-through, blink, |Inherit
text-indentTexteinrückungLängen- oder Prozentangabe, Inherit
text-transformGroßschreibunglowercase, uppercase, capitalize, none, Inherit
unicode-bidiVertikale Ausrichtungnormal, embed, bidi-override, Inherit
vertical-alignVertikale AusrichtungLängen- oder Prozentangabe, sub,super, baseline, top, |bottom, middle, text-top, text-bottom, Inherit
white-spaceTextumbruchnormal, pre, nowrap, pre-line, pre-wrap, Inherit
word-spacingWortabstandLängenangabe, normal, Inherit
text-shadowTextschattenFarbangabe, Längenangabe