Inhaltsverzeichnis. Florian Bauer CSS Seite 2 von 10

Transkript

1 CSS

2 Inhaltsverzeichnis Gestaltung mit CSS... 3 CSS einbinden... 3 On the fly... 3 Im Header... 3 In einer externen Datei... 3 Aufbau einer CSS Anweisung... 4 Wichtige CSS Eigenschaften... 4 Pseudoelemente... 4 Wichtige Pseudoformate... 5 Layouten mit CSS... 5 Klassen und IDs... 5 KLASSEN... 5 IDS... 6 Weitere CSS Eigenschaften... 6 Verschachtelte HTML-Tags... 7 Bestimmte Kombination... 7 Direkte Kindelemente... 7 Direkter Nachfolger... 7 Spezifische Unterklasse... 8 Allgemeines... 8 Reihenfolge... 8 Box-Model... 9 Ränder des Box-Model... 9 Positionierung von Elementen Positionierung anhand eines grafischen Beispiels Florian Bauer CSS Seite 2 von 10

3 Gestaltung mit CSS Cascading Style Sheet Dient zur Trennung von Code und Design CSS einbinden On the fly direkt im HTML-Tag <h1 style="color: red">text</h1> Im Header <header> <style type="text/css"> <!-- h1 { color: red; --> </style> </header> In einer externen Datei Verweis im Header auf die externe CSS-Datei <link rel="stylesheet" href="stlye.css" type="text/css" > css Datei h1 { color: red; Florian Bauer CSS Seite 3 von 10

4 Aufbau einer CSS Anweisung Selektor { Eigenschaft: Wert h1 { color: red Selektor Eigenschaft Wert Wichtige CSS Eigenschaften Eigenschaft mögliche Werte Auswirkung color white, #ffffff, Farbe des Textes background-color black, #000000, Hintergrundfarbe background-image url( image.jpg ) Hintergrundbild border-style solid, dotted, dashed, double, groove, gepunkteter/durchgehender Rahmen border-width 1px, 5px, thin, Rahmenbreite medium, thick border-color red, #ff0000, Rahmenfarbe font-size 12px, 30px, Schriftgröße font-family Arial, Schriftart font-weight normal, bold, Schriftstärke padding-left 1px, 5px, Innenabstand links padding-right 1px, 5px, Innenabstand rechts padding-top 1px, 5px, Innenabstand oben padding-bottom 1px, 5px, Innenabstand unten float left, right, none Textumfluss Pseudoelemente Selektor:Pseudoformat { Eigenschaft: Wert a:hover { color: red Selektor Pseudoformat Eigenschaft Wert Florian Bauer CSS Seite 4 von 10

5 Wichtige Pseudoformate Pseudoformat link hover visited active Aufruf Verweise zu noch nicht besuchten Seiten Maus über Element Verweise zu bereits besuchten Seiten für gerade angeklickte Elemente Pseudoelemente bringen Leben in starre Webseiten Layouten mit CSS Cascading Style Sheet Klassen und IDs Klassen und IDs dienen zum Zuweisen von Formaten. Es kann verglichen werden wie Formatvorlagen in Word. Die Namen dieser Klassen und IDs sollten nur Klein-, Großbuchstaben, Ziffern und Unterstriche enthalten. KLASSEN Klassen werden eingesetzt, wenn es mehrere Elemente gibt, die diese Formatvorlage benutzen dürfen. Klassendefinition in der HTML-Datei <div class= rot >Text</div> Klassendefinition in der CSS-Datei.rot { color: red; Florian Bauer CSS Seite 5 von 10

6 IDS Eine ID wird dann angewandt, wenn sichergestellt ist, dass pro Seite diese Formatvorlage nur einmal verwendet wird. Zum Beispiel beim Header oder bei der Navigation. Für die Gestaltung ist es grundsätzlich egal, ob eine ID oder eine Klasse verwendet werden, jedoch ist im Quelltext schneller sichtbar, ob eine Formatierung nur einmal verwendet wird (ID) oder ob diese öfters verwendet wird (class) und Änderungen somit größere Auswirkungen haben. ID-Definition in der HTML-Datei <div id= header >Text</div> ID-Definition in der CSS-Datei #header { color: red; Weitere CSS Eigenschaften Eigenschaft mögliche Werte Auswirkung border-bottom-color white, #ffffff, Farbe des unteren Rahmens border-bottom-width 1px, thin, medium, Stärke des unteren Rahmens border-bottom-style solid, dotted, dashed, double, groove, untere Rahmenart (durchgehend, gepunktet) position fixed, relative, absolute Position des Elementes top 1px, 30px, Abstand von oben left 1px, 30px, Abstand von links right 1px, 30px, Abstand von rechts bottom 1px, 30px, Abstand von unten width 12px, 30px, Breite des Elementes float left, right Textumfluss clear both Um das float wieder aufzuheben. padding-top 1px, 30px, Innenabstand nach oben background-image url( image.jpg ) Hintergrundbild width 800px, 1024px, 100% Breite eines Elements height 800px, 1024px, 100% Höhe eines Elements text-decoration underline, none Text Dekoration (unterstrichen, nicht unterstrichen) Florian Bauer CSS Seite 6 von 10

7 Verschachtelte HTML-Tags Bestimmte Kombination CSS Regel wirkt nur auf bestimmte Kombination von verschachtelten Elementen (beliebige Verschachtelungstiefe) Beispiel: - CSS - HTML ul h1 { color: blue; font-style: normal <ul><li>das wird <h1>hervorgehoben</h1> dargestellt</li></ul> Direkte Kindelemente CSS Regel wirkt nur auf direkte Kindelemente Beispiel: - CSS - HTML h1 > em { color: blue; font-style: normal; <h1>das wird <em>hervorgehoben</em></h1> Genauso wie <em>diese Stelle</em> Direkter Nachfolger CSS Regel wirkt nur auf direkten (ersten) Nachfolger. Beispiel: - CSS - HTML h1 + p { color: blue; font-style: normal; <h1>überschrift</h1> <p>absatz</p> <!-- nur hier gilt die obige Regel <p>absatz</p> Florian Bauer CSS Seite 7 von 10

8 Spezifische Unterklasse CSS Regel wirkt nur auf bestimmte Tags mit bestimmter Klasse. Beispiel: - CSS - HTML p.blau { color: blue; font-style: normal; <p class="blau">absatz</p> <!-- nur hier gilt die obige Regel <p>absatz</p> Diese spezifische Unterklasse gilt vor der allgemeinen Klasse. Das heißt: Wenn p.klasse1 und.klasse2 auf ein Element wirken, wird p.klasse1 stärker gewichtet und hat somit Vorrang. Allgemeines Reihenfolge Weiter unten definierte Regeln überschreiben weiter oben definierte Regeln Beispiel: Die untere Klasse überschreibt die Eigenschaften der oberen. Die Farbe ist somit rot, Hintergrundfarbe jedoch grün..blau { color: blue; background-color: green;.blau { color: red; Florian Bauer CSS Seite 8 von 10

9 Box-Model (Quelle: Ränder des Box-Model CSS-Eigenschaft mögliche Werte Auswirkung border-bottom-color white, #ffffff, Farbe des unteren Rahmens border-bottom-width 1px, thin, Stärke des unteren Rahmens medium, border-bottom-style solid, dotted, dashed, double, untere Rahmenart (durchgehend, gepunktet) groove, border 1px black solid Zusammenfassung der oberen 3 Eigenschaften margin-top 3px Oberer Außenabstand margin-left 3px Linker Außenabstand margin-bottom 3px Unterer Außenabstand margin-right 3px Rechter Außenabstand margin 3px Außenabstand zusammenfassend. Florian Bauer CSS Seite 9 von 10

10 3px, 1px, 2px, 4px 3px 2px Entweder 1 Wert für alle 4 Seiten, 2 Werte für oben/unten und links/rechts, 4 Werte für jede Seite extra. padding-top 3px Oberer Innenabstand padding -left 3px Linker Innenabstand padding -bottom 3px Unterer Innenabstand padding -right 3px Rechter Innenabstand padding 3px 3px, 1px, 2px, 4px 3px 2px Innenabstand zusammenfassend. Entweder 1 Wert für alle 4 Seiten, 2 Werte für oben/unten und links/rechts, 4 Werte für jede Seite extra. Positionierung von Elementen Mit CSS kann man die Positionierung von (DIV) Elementen steuern. Mit dem Attribut position kann die Position des Elements festgelegt werden. CSS-Eigenschaft position: static position: relative position: absolute position: fixed Auswirkung normales Verhalten (statische Position) statische Position + Verschiebung Verschiebung vom Eltern-Element aus. Eltern-Element darf nicht static sein (oberstes: body) absolut in Bezug auf Browser-Fenster. Inhalt des Bereichs scrollt nicht mit. CSS-Eigenschaft mögliche Werte Auswirkung top 10px Startposition von oben bottom 10px Startposition von unten left 10px; 50% Startposition von links right 10px; 50% Startposition von rechts z-index 1; 2; 99 Höhere Zahl im Vordergrund Positionierung anhand eines grafischen Beispiels static left top relative left top absolute absolute Florian Bauer CSS Seite 10 von 10