EGE/CSS

Aus ProgrammingWiki

Wiki-Quelltext dieser Seite.

== '''Definition''' == 
[[Bild:MoritzSchreiber2002_CSS-Logo.png|miniatur|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''' ==

 <link hrel="stylesheet" type="text/css" href="Style.css>
[[Bild:SteveApel2310_Wiki2.png]]
=== '''HTML-Tags Formatieren (intern)''' ===
 <nowiki>
 <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>
 </nowiki>
[[Bild:SteveApel2310_Css.png|500px|]]

=== '''CSS Formatierung (extern)''' ===

 body {background-color:#FFFFCC;
       margin-left:100px;}
 h1   {font-size:200%;
       color:#FFCC00;
       font-style:italic;}
[[Bild:SteveApel2310_Css1.png|500px|]]

=== '''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''' ===

{|
| ''Eigenschaften'' || Wert
|-
| #rrggbb || Hexadezimale RGB-Angabe
|-
| #rgb || Hexadezimale RGB-angabe z.B.: #C09 anstelle von #CC0099
|-
| Farbnamen || wie 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%)
|}
[[Bild:SteveApel2310_Css3.png|500px|]]

=== '''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