1. Grundlagen
1.1. Ergänzung zum HTML
1.2. Beschreibung von ... von HTML Dokumenten
1.2.1. Layout
1.2.2. Präsentation
1.3. Sprache zur Definition von Formateigenschaften
1.4. ... kann in HTML oder in einem seperaten File sein
1.5. Vereinheitlichung der Formatierung der Dokumenten
1.6. aktuelle Version: CSS 3
1.7. wird vom Browser intepretiert
1.8. Vererbung
1.8.1. generell werden ässere Selektoren auf die inneren Selektoren vererbt z.B. color
1.8.2. bei denen es keim Sinn macht, werden nicht vererbt z.B. margin-top
2. Schriftarten
2.1. font-family: arial;
2.2. font-family: arial, helvetica, garamond;
2.2.1. Alternative Schriftarten werden dran gehängt
2.3. Wichtige Eigenschaften
2.3.1. font-style: italic;
2.3.1.1. Kursiv
2.3.2. font-weight-bold
2.3.3. color: blue
2.3.3.1. Schriftfarbe
2.3.4. word-spacing: 6pt;
2.3.4.1. Abstand zwischen 2 Wörter
2.3.5. letter-spacing 1pt;
2.3.5.1. Abstand zwischen 2 Zeichen
2.3.6. text-transform: uppercase;
2.3.6.1. Erzwingen von Grossbuchstaben
2.3.6.2. lowercase = Kleinbuchstaben
2.3.6.3. capitalize = Kapitälchen
2.3.7. text-shadow: black;
2.3.7.1. Textschatten
2.3.8. text-indent: 0.5cm;
2.3.8.1. Einrückung der ersten Zeile
2.3.9. vertical-align:bottom;
2.3.9.1. vertikale Ausrichtung
2.3.10. line-height: 10pt;
2.3.10.1. Zeilenhöhe
2.3.11. text-align:
2.3.11.1. Textausrichtung
2.3.11.2. left
2.3.11.3. right
2.3.11.4. center
2.3.11.5. justify
2.3.11.5.1. Blocksatz
3. Boxmodell von CSS
3.1. von Innen nach aussen
3.1.1. Inhalt -> Innenabstand -> Rahmen - Aussenabstand
3.1.2. width / height -> padding -> border -> margin
3.2. Eigenschaften
3.2.1. margin
3.2.1.1. top
3.2.1.2. bottom
3.2.1.3. left
3.2.1.4. rright
4. Positionierung
4.1. display
4.1.1. block
4.1.1.1. beginnt immer in einer neuen Zeile und wird so breit wie es geht div ist das neutrale standard Block-Element, ansonsten <h[1-6]> <p> und <form>
4.1.2. Inline
4.1.2.1. das Element kann in einem Absatz umfliessen Standard: <span> oder <a>
4.1.3. none
4.1.3.1. display:none; hinterlässt keine Freiraum im Gegensatz zu visibility:hidden
4.2. Mögliche Positionierungen
4.2.1. Normalfluss
4.2.1.1. Keine Positionierung
4.2.2. Float
4.2.2.1. Positionierung an den rechten oder linken Rand
4.2.2.2. float: left;
4.2.2.3. float: right;
4.2.2.4. float: none;
4.2.2.5. - Boxen werden ständig an die Grösse des Browsers angepasst - Text umfliesst das gefloatete Objekt
4.2.3. Position
4.2.3.1. - Positionieren mit Koordinaten - Text wird nicht umgebrochen
4.2.3.2. static:
4.2.3.2.1. default
4.2.3.3. fixed:
4.2.3.3.1. scrollt nicht mit, absolute Positionoierung
4.2.3.4. absolute:
4.2.3.4.1. scrollt mit, absolute Positionierung
4.2.3.5. relative:
4.2.3.5.1. relative Positionierung, gemessen an der Normal- / Anfangsposition des Elements selbst
5. Formate
5.1. Selektor
5.1.1. (im wesentlichen) HTML-Tag
5.1.2. Spezielle Selektoren
5.1.2.1. div i {color:red}
5.1.2.1.1. i-Elemte wird, sofern es innerhalb eines dib-Bereichs verkommt, rote Textfarbe erhalten
5.1.2.2. div * i{color: blue}
5.1.2.2.1. * ist hier Platzhalter für ein beliebiges HTML-Element. Textfarbe wird blau, wenn das i-Element mindestens zwei Ebenen unterhalb des div-Elements vorkommt z.B. <div> <p> <i> Text </i> </p> </div>
5.1.2.3. div > p {color: green}
5.1.2.3.1. ">" wurd festgelegt, dass p-Elemente, wenn sie innerhalb eines div-Bereichs vorkommen und wenn sie genau eine Ebene unterhalb des div-Elements vorkommt
5.1.2.4. div + i {color: red}
5.1.2.4.1. "+" wird festgelegt, dass i-Element, die unmittelbar auf ein div-Element folgen, rot dargestellt werden z.B.: <div> Test... </div> <i> wird rot erscheinen </i>
5.1.2.5. p [align] {color: blue}
5.1.2.5.1. für alle p-Elemente, die ein Attribut align haben
5.1.2.6. p[algin=center] {color: green;}
5.1.2.6.1. für alle p-Elemente, die das Attribut align auf "center gesetzt haben
5.2. Aufbau
5.2.1. Selektor {Eigenschaft1: Wert; Eigenschaft2: Wert; ... }
5.2.1.1. Z.B.: h1 {font-size: xx-large; text-align: right; }
5.3. Wo definiert?
5.3.1. In einer seperaten Datei (name.css)
5.3.1.1. wird im <head>.. </head> des HTML-Dokuments eingebunden <link rel="stylessheet" href="mycss.css" type="text/css">
5.3.2. Im Kopf einer HTML-Datei
5.3.2.1. wird im <head> ... </head> definiert <style type="text/css"> <!-- p { font-size: 8 pt; } --> </style>
5.3.2.1.1. ältere Browser welche kein CSS können, Intepretieren die Zeilen als HTML Kommentar
5.3.3. bei den Tags
5.3.3.1. <p style="font-family: Arial; font-size: 8 pt; ">
5.3.3.1.1. Selector wird weggelassen, stattdessen wird das Attribut style angegeben
5.4. Relative Masseinheiten
5.4.1. %
5.4.1.1. in Prozent zur Elementgrösse
5.4.2. em
5.4.2.1. Bezogen auf die Höhe der Schriftart (1em = ganze höhe)
5.4.3. ex
5.4.3.1. Bezogen auf die halbe Höhe einer Schriftart
5.4.4. px
5.4.4.1. in Pixel der Bildschirmgrösser
5.5. Absolute Masseinheiten
5.5.1. cm
5.5.1.1. Zentimeter
5.5.2. in
5.5.2.1. inch
5.5.3. mm
5.5.3.1. Millimeter
5.5.4. pt
5.5.4.1. Punkt
6. Eigenschaften
6.1. Relative Ausdrücke
6.1.1. Bsp. an Schriftstärke font.-weight:"..."
6.1.1.1. lighter
6.1.1.1.1. Dünner als die typische Elementgrösse
6.1.1.2. normal
6.1.1.3. bold
6.1.1.3.1. fetter als die normale Schrift
6.1.1.4. bolder
6.1.1.4.1. viel fetter als die typische Elementgrösse
6.1.2. font-size:"..."
6.1.2.1. xx-small
6.1.2.2. x-small
6.1.2.3. small
6.1.2.4. thin
6.1.2.5. normal
6.1.2.6. thick
6.1.2.7. large
6.1.2.8. x-large
6.1.2.9. xx-large
7. Links
7.1. a:link {...}
7.1.1. normal Zustand
7.2. a:visited{...}
7.2.1. besucht
7.3. a:active{...}
7.3.1. aktiv
7.4. a:hover{...}
7.4.1. wenn mit der Maus über dem Link ist
8. Klassen und Individualformate
8.1. Klassen
8.1.1. einzelnen Tag mehre Formatierungen geben
8.1.2. Klassennamen werden mit einem Punkt hinter dem HTML-Tag angegeben h1.big {font-size: 30pt; }
8.1.3. der Klassennamen muss bei Formatzuweiszung angegeben werden z.B. <h1 class="big">Titel</h1>
8.1.4. es können auch nur alle Element mit der Klasse "big" angesprochen werden z.B.: .big{color: red; }
8.2. Individualformate
8.2.1. Starten mit #
8.2.2. Definition bei der Formatzuweisung: <h1 id="bigger" > Titel </h1>
8.3. div & span
8.3.1. div erzwingt eine neue Zeile im Textfluss, während span innerhalb eines Textes verwendet werden kann und keinen neuen Absatz erzeugt