7. Tag HTML 17.10.2014

HTML/CSS
Ralf Herbst


HTML-Editor
im Ordner sites anlegen:
18.css_hyperlinks.html = Reihenfolge (w3c) der Links (a) festgelegt:
a:visited
a:hover
a:active (erscheint beim Mausklick in dieser Farbe, eher NO)
Browserchache löschen: Strg+Shift+Ent-Tasten
a img { border: ridge 10px; } = 3D-Rahmen um das Bild 

19.css_font_family.html = Schriftarten vergeben
ol { color: #F00; width: 600px; }
= der Liste eine Breite geben, damit kein Zeilenumbruch (Verteilung auf zwei Zeilen) erfolgt
Google Schriftarten
Schrift/Style + Charakter/Standard auswählen - Funktion: 2) quick-use - 3) Link kopieren und im html-Dokument unter  <link rel=...> einfügen; 4) Code in CSS einfügen unter <style type="">
body {  font-family: Lobster, cursive; font-size: 12pt; }
oder
pre { font-family: Lobster, cursive;  }
wichtig: im Link ersetzen ` gegen "

20.css_font_weight.html = Wichtung der Schrift

21.css_text_align.html = Text ausrichten, wie , wo
.textGross  {  text-transform: uppercase; } = Grossschreibung
.textKlein  { text-transform: lowercase; } = Kleinschreibung
.textAnfang  { text-transform: capitalize; } = alle Anfangsbuchstaben groß
.gedichtText  { margin: -74 0 20px 32px; } = Positionierung Text
.obenTabelle { .... border-style: inset; border-Color: red, Border-width: 5px;  }
geht auch in einem Befehl:
.mittigTabelle  {border: dottet 5px blue;  }
dh. erst den Rahmen bauen, dann Rahmen entsprechend abändern

22.css_wordspacing.html  = Wordabstand
Bilder-Hintergrund auf weiß stellen unter
body { background-color: #FFF; }
Bilder mittig Text setzen, dh. Außenabstand Werte oben/rechts/unten/links:
img { vertival-align: middle; margin: -2px 5px 0 0; }
festlegung des Wortabstandes im oberen Bereich oder im Text
 h1  { word-spacing: 15px;  }
<span style="word-spacing:Maßeinheit">text</span> = Festlegen des Wortabstandes im Text

23.css_letterspacing.html = Buchstabenabstand

24.css_masseinheiten.html = Maßeinheiten
absolut dh. fester Wert
relativ dh. Bezug zu etwas
beachten: für website oder handy!
Browser automatisch eingestellt auf 12pt!



Pixel-Umrechner etc.


EMPFEHLUNGEN: 

Webfarben