Tag 12

Für .ico-Dateien: http://www.favicon-generator.de/

Wiederholung:
padding: Innenabstände festlegen
Browser gibt von sich aus Abstände: margine 0 padding 0 border 0 um das zu vermeiden
Body feste Größe geben, margine und padding rechnet sich dazu
Div-Wrapper erstellen

Div-Wrapper mit relative Breite erstellt (Min.-Breite/Min.-Höhe)
Bei Min-Höhe (min.-height) wächst der Inhalt mit

CSS läßt sich Einbinden als

1. externe CSS-Datei (globales Stylesheet) gilt für die gesamte Webseite
   <link rel="stylesheet" href="css/thaitours.css" type="text/css">
2. Style-Block im Kopf der jeweiligen Datei gilt nur für die eine Webseite
   Werden externe Datei und Styleblock verwendet, sollte der Block nach der externen Datei eingebunden werden (Reihenfolge).
   <style type> {background-color: #FFFFC6;} </style>
   
3. als CSS-Eigenschaft mit HTML-Attribut: style gilt nur für das eine HTML-Element
   wird in der Praxis selten genutz
   <p style="font-size: .5cm;"> Sylvia wagt quick den Jux bei Pforzheim.</p>

 <style type="text/css">
*{margin: 0; border 0; padding 0;}
Globalselektor = setzte alles auf 0, oben im Header im style type angeben
</style>

Schriften bei Google/freie Fonts: http://www.google.com/fonts
Grundsätzlich: mit jeder geladenen Schriftart wird die Webseite langsamer

Nach use den link unten in das html-Dolkument kopieren über den <style-Block>:

<link href='http://fonts.googleapis.com/css?family=Ribeye|Englebert|Engagement|Unica+One' rel='stylesheet' type='text/css'>

<style type="text/css">

oder mit @import kopieren in den <style-Block>: @import 
url(http://fonts.googleapis.com/css?family=Ribeye|Englebert|Engagement|Unica+One);etwas eleganter!

Textformatierung mit CSS

• text-aling (Textausrichtung): left, right, center, justify
• text-decoration: none, underline, overline, line-through 
• text-transform (Groß- und Kleinschreibung): lowercase, uppercase, capitalize 
• letter-spacing (Buchstabenabstand): Wert 
• word-spacing (Wortabstand): Wert
• text-indent (Erstzeileneinzug): Wert
• vertical-align: top, middle, bottom, sub, super

Textschatten mit CSS (Schöne Beispiele: pixeltuner.de)
test-shadow: x-versatz y-versatz blur colorblur colortext
text-shadow: 3px 3px 3px #7F0000; color: transparent;

1. .schatten1 {text-shadow: 3px 3px #7F0000;} Versatz nach rechts
2. .schatten2 {text-shadow: -3px -3px #7F0000;}Versatz nach links
3. .schatten3 {text-shadow: 3px 3px 3px #7F0000;}
   (Weichzeichnen)
4. .schatten4 {text-shadow: 3px 3px 3px #7F0000; color: transparent;}
   (Weichzeichnen/Schriftfarbe durchsichtig)
5. .schatten5 {text-shadow: 3px 3px 3px #7F0000; color: #fff;}
   (Weichzeichnen/Schriftfarbe weiß)
6. .schatten6 {text-shadow: 3px 3px 3px #7F0000; color:-3px -3px 3px #FF00FF, 6px 6px 6px #00FFFF, -6px -6px 6px #00AFFF;}
   ( mehreren Optionen in einer Formatierung, Weichzeichnen immer positiv!)

   
Boxschatten mit CSS
box-shadow: x-versatz y-versatz blur größe innen/außen
 {box-shadow: 0                 0         3px  3px        inset;}

1. .schatten1 {box-shadow: 3px 3px #ccc;}Versatz nach rechts
2. .schatten2 {box-shadow: -3px -3px #ccc;}Versatz nach links
3. .schatten3 {box-shadow: 3px 3px 3px #ccc;}(Weichzeichnen)
4. .schatten4 {box-shadow: 0 0 3px 3px #ccc;}(Weichzeichnen Größe/Größe des Schattens)
5. .schatten5 {box-shadow: 0 0 3px 3px #ccc inset;} Schatten Innen
6. .schatten6 {box-shadow: 0 0 9px 3px red, 0 0 12px 3px green inset; border-color:#fff;}mehreren Optionen in einer Formatierung
7. .schatten7 {box-shadow: 0 0 0 6px red; border: 6px;} 

floating
float: left; right (spiegelverkehrt);
clear: left; right; both; (hebt das floaten auf!)

Float (engl. (im Wasser) treiben, schweben) ist eine CSS-Eigenschaft. Elemente welche mit dieser Eigenschaft versehen werden, lassen andere Elemente um sich herumfließen. Ein beliebtes Einsatzgebiet sind Texte, in welche eine Grafik eingefügt wird, ohne dass dadurch unschöne Absätze oder Zeilenumbrüche entstehen. Unabhängig davon, ob die vertikale Ausrichtung nach links oder rechts erfolgt, muss das zu umfließende Objekt im Quelltext zuerst aufgeführt werden.