CSS

Aus ProgrammingWiki
< EGE
Archivierte Version vom 2019-04-29T09:13:43+00:00. Aktuelle Version

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

Eigenschaften

Eigenschaft Beschreibung Werte

direction 	 Schreibrichtung 	 ltr, rtl, Inherit
letter-spacing  Zeichenabstand 	 normal, Längenangabe, Inherit
line-height 	 Zeilenhöhe 	         normal, Zahl, Längenangabe oder Prozentangabe, Inherit
text-align 	 Horizontale Ausrichtung left,right,center,justify, Inherit
text-decoration Textdekoration 	 none, underline, overline, line-through, blink, Inherit
text-indent 	 Texteinrückung 	 Längen- oder Prozentangabe, Inherit
text-transform  Großschreibung 	 lowercase, uppercase, capitalize, none, Inherit
unicode-bidi 	 Vertikale Ausrichtung 	 normal, embed, bidi-override, Inherit
vertical-align  Vertikale Ausrichtung 	 Längen- oder Prozentangabe, sub,super, baseline, top, bottom, middle, text-top, text-bottom, Inherit
white-space 	 Textumbruch 	         normal, pre, nowrap, pre-line, pre-wrap, Inherit
word-spacing 	 Wortabstand 	         Längenangabe, normal, Inherit
text-shadow 	 Textschatten 	         Farbangabe, Längenangabe