Eine kurze Einführung in die wichtigsten Grundlagen der Cascading Style Sheets (CSS)

Transkript

1 Eine kurze Einführung in die wichtigsten Grundlagen der Cascading Style Sheets (CSS) Martin Vollenweider

2 Inhaltsverzeichnis Inhaltsverzeichnis Verknüpfung von HTML und CSS... 3 Einsatz... 3 Drei Verknüpfungen von HTML und CSS... 3 Vorschlag Arten der Formatierungen... 4 Vererbung... 6 Grundsätzliches Vorgehen... 6 Ausgabe auf verschiedene Medien... 7 Aufbau der CSS-Befehle... 8 Kaskadierung...9 Selektoren Befehle zusammenfassen Element-Selektor Kontext Selektoren Klassen Selektoren Child Selektor Kommentare Stile zuweisen Einige Schriftmerkmale: font-family Entweder oder, Web Safe Fonts Font Auswahl Schriftarten testen Web Fonts Tools Einige weitere Schriftmerkmale Arbeiten mit der Schrifteinheit em Typische CSS-Konfiguration Seitenelemente mit body steuern Ränder entfernen Hintergrundbild Seite umranden Scrollbars ändern Links & Navigation Links ohne Unterstreichung Links mit bestimmter Farbe hervorheben Cursor über Link ändern Beispiel: Horizontale Navigation mit Kasten Beispiel: Horizontale Navigation fixem Abstand Beispiel: Vertikale Navigation mit Kasten Formulare Textfelder einfärben Kontrollkästchen und Optionsschalter Liste und Menü einfärben Schaltflächen Absolute CSS-Positioning Vertikales Anordnen...26 Container in der Höhe wachsen Mehrere Spalten in Höhe wachsen Vertikale Zentrierung Tag in div-container: Ränder TIMERATE AG Zürich 2

3 Verknüpfung von HTML und CSS Verknüpfung von HTML und CSS Einsatz Die Cascading Style Sheets dienen zum Formatieren und Layouten von Webpages. Sie sind eine Norm des W3C Konsortiums. Mit CSS lassen sich Browser-Darstellung und Ausdruck individuell formatieren. Die Idee der CSS ist die vollständige Trennung von Inhalt und Formatierung. Formatieren und Layouten Drei Verknüpfungen von HTML und CSS 1. CSS-Definitionen in HTML-Datei Die CSS-Definitionen befinden sich in der HTML-Seite. Nur für spezielle Seiten (z.b. Index-Seite) zu empfehlen <style type="text/css"> <!-- --> </style> 2. Verknüpfung mit externer CSS-Datei Mehrere HTML-Dateien sind mit der CSS-Datei verknüpft. <link href="layout.css" rel="stylesheet" type="text/css" /> 3. CSS-Definition steht im Text (Inline, eingebettet) Die CSS-Definition steht innerhalb eines einzelnen HTML-Tags und hat nur für diesen Gültigkeit. Nur für Spezialfälle zu verwenden. Diese Verknüpfung wird von Dreamweaver nicht über ein Menü, sondern im Code unterstützt. <p style="color:#00ff99; font-size:24px">text</p> Vorschlag Mit externen CSS-Dateien arbeiten! HTW Chur, Studiengang Multimedia Production 3

4 4 Arten der Formatierungen 4 Arten der Formatierungen 1. Formatierung: Bestehende HTML Tags ändern Mit CSS lassen sich beliebige, existierende HTML-Tags formatieren (z.b. p). Im Dokument werden automatisch alle im CSS definierten Tags formatiert. p { font-size: 10px; Alle HTML-Tags (z.b. h1, h2, p, body, html, table) etc. lasen sich formatieren. 2. Formatierung: Eigene Tags erstellen, Klassen Mit CSS können eigene Stile oder Klassen erstellt werden. Im Dokument wird die Definition einem Zeichen, Absatz oder Bereich zugewiesen. Die Klassen haben einen Punkt vor der Definition.Firmenname { font-size: 10px; Zuweisung im Text: Buchstabe oder Wort Klassen können auf mehrere Absätze oder Wörter angewandt werden <p>die Firma <span class="firmenname">timerate</span> ist...</p> Zuweisung im Text: Absatz <p class="firmenname">die Firma Timerate ist... </p> Zuweisung für Bereich (siehe Seite Fehler! Textmarke nicht definiert.) <div class="rot"> <p>absatz 1</p><p>Absatz 2</p> </div> 3. Formatierung: Eindeutiger ID Selektor CSS wird für eindeutige Zuweisungen (also z.b. CSS-P Elemente wie Ebenen) verwendet. Pro Zuweisung ist eine eigene Definition notwendig! Um das eindeutig anzugeben, wird an Stelle des Punktes (.) ein Hash- Zeichen (#) vor der Definition gesetzt. #eineid {color: #FF0000; oder p#eineid {color: #FF0000; IDs können nur auf einen Absatz, Wort oder Bereich angewandt werden Die Zuweisung im Text erfolgt dann über die ID: Buchstabe oder Wort <h1>das ist <span id="eineid">h1</span></h1> Zuweisung im Text: Absatz <h1 id="eineid">das ist h1</h1> HTW Chur, Studiengang Multimedia Production 4

5 4 Arten der Formatierungen 4. Formatierung: Pseudo-Klassen, Zusammengesetzt CSS erlaubt das Formatieren von Links (normaler, besuchter, aktiver und Mouse Over). Im Dokument werden automatisch alle Links formatiert. a:link {text-decoration: none; Theoretisch lassen sich die Pseudo-Klassen auch auf andere Tags (z.b. p) anwenden, der Internet Explorer unterstützt dies aber nicht. Die Formatierung gilt nur für die Klasse Firma innerhalb des p- Absatzes: p.firma Die Formatierung gilt nur für die Klasse Firma innerhalb der Container_links-ID: #Container_links.Firma Die Formatierung gilt nur für die Klasse rot des h1-absatzes: h1.rot Für besseres Verständnis siehe Seite 10 HTW Chur, Studiengang Multimedia Production 5

6 Vererbung Vererbung Die CSS-Definitionen werden weiter vererbt. Die höchste Hierarchiestufe ist der HTML-Tag body. Es werden nicht immer alle Eigenschaften vererbt. Die Referenz gibt an, welche vererbt werden. Die Onlinereferenz CSS4You gibt zum Beispiel an, dass der Befehl font-size vererbbar ist, nicht aber der Befehl background-color. Das heisst konkret, wenn im body die font-size und background-color eingegeben werden übernehmen z.b. h1, h2, p, Titel1 nur die Einstellung für font-size, nicht aber diejenige für background-color! Grundsätzliches Vorgehen 1. Schritt: HTML Tag body definieren Zuerst müssen in body Schriftart, -grösse, -farbe, Zeilenabstand und Hintergrundfarbe festgelegt werden. Mit Ausnahme des Hintergrunds werden alle Attribute vererbt. body { font-family: Arial, Helvetica, sans-serif; font-size: 12px; line-height: 120px; color: #000000; background-color: #FFFFFF; 2. Schritt: Klassen und IDs erstellen Beispiel:.Firmenname {color: #FF0000; 3. Schritt: Links definieren Beispiel: a:link {text-decoration: none; HTW Chur, Studiengang Multimedia Production 6

7 Ausgabe auf verschiedene Medien Ausgabe auf verschiedene Medien CSS-Definitionen können für den Bildschirm (screen), den Drucker (print) oder alle Medien (all) festgelegt werden (im Dreamweaver nur über den Code unterstützt): <style type="text/css" media="print"> HTW Chur, Studiengang Multimedia Production 7

8 Aufbau der CSS-Befehle Aufbau der CSS-Befehle Verschiedene Deklarationen in einer Eigenschaft h1 {border: thin dotted #FF0000; HTW Chur, Studiengang Multimedia Production 8

9 Kaskadierung Kaskadierung CSS gibt die Möglichkeit, gleichzeitig mehrere CSS-Definitionen zu verwenden. In einer Datei könnten die Schriftarten, in einer anderen die Farben definiert sein. HTW Chur, Studiengang Multimedia Production 9

10 Selektoren Selektoren Befehle zusammenfassen Statt Definitionen einzeln aufführen: p {font-size: 10px; p {font-weight: bold; zusammenfassen und trennen mit ; (Strichpunkt) p {font-size: 10px; font-weight: bold; Element-Selektor Gilt für p, h1 und h2 (gruppieren mit, [Komma]) p, h1, h2 { font-size: 10px; Kontext Selektoren Definitionen innerhalb Definitionen. Beispiel: Die Definition von EM (oder.firma) ist nur innerhalb p gültig (Selectoren durch Leerschlag trennen). EM oder.firma dürfen sich z.b. auch innerhalb STRONG befinden. p em {color: #33FF33 p.firma {... Funktioniert auch mit Pseudo-Klassen (z.b. #nav td a:link) Klassen Selektoren Die Klasse hat nur für ein anderes Element Gültigkeit. Beispiel: Die Klasse rot wirkt sich nur aus, wenn diese h1 zugewiesen ist: h1 wird rot dargestellt: <h1 class="rot">. Definition im CSS: h1.rot p wird aber nicht rot dargestellt mit <p class="rot"> Child Selektor Nur gültig, wenn.firma ein direktes Childelement von p ist. Wenn.Firma zum Beispiel innerhalb strong ist, ist es nicht betroffen. p >.Firma {color: #33FF33 Kommentare /* This is a comment. */ HTW Chur, Studiengang Multimedia Production 10

11 Stile zuweisen Stile zuweisen Für einen Absatz <p class="auszeichnung">hier ist der wichtige Absatz</p> Für ein Wort <p>hier ist der <span class="auszeichnung">wichtige</span> Absatz</p> Für mehrere Absätze <div class="auszeichnung"> <p>hier ist der wichtige Absatz</p> <p>hier ist der wichtige Absatz</p> </div> oder <div id="auszeichnung">... zur Erinnerung: eine id darf pro Seite oder Datei nur einmal vorkommen. HTW Chur, Studiengang Multimedia Production 11

12 Einige Schriftmerkmale: font-family Einige Schriftmerkmale: font-family.crazy { color: #290AED; font-family: Cambria, 'Times New Roman', serif; font-style: italic; font-variant: small-caps; font-weight: bold; font-size: 18px; text-align: left; text-decoration: underline; text-indent: 24px; Ist das eine grauenvolle Formatierung oder gekonntes Design? Bilden nicht Formatierung und Inhalt eine unzertrennbare Einheit? Ich denke an den grossen Passagierdampfer und die blaue Farbe in grosser Schrift! Entweder oder, Web Safe Fonts Font Auswahl font-family: Wahl1, Wahl2, Wahl3, Wahl4,, Browserfont; Browserfonts: serif, sans-serif, monospace HTW Chur, Studiengang Multimedia Production 12

13 Einige Schriftmerkmale: font-family Schriftarten testen Typetester (Darstellung verschiedener Fonts) WebFonter (erlaubt, eine Website mit anderen Fonts zu versehen via das Menü The Launcher) FontDragr (erlaubt, eine Website mit anderen Fonts zu versehen via Drap zu den Bookmarks) Web Fonts Verschiedene Browser verschiedene Font Formate Details auf CaniUse Adobe Edge Web Fonts Adobe Web Fonts (with contributions from Adobe, Google, and designers around the world, Edge Web Fonts provides a vast library of free web fonts for use on your websites) Die Fonts liegen auf dem Adobe Server HTW Chur, Studiengang Multimedia Production 13

14 Einige Schriftmerkmale: font-family Adobe Web Fonts können auch von Dreamweaver aus aufgerufen werden: HTW Chur, Studiengang Multimedia Production 14

15 Einige Schriftmerkmale: font-family Font Squirrel Kostenlose Fonts; eigene Fonts können hochgeladen werden (Achtung Copyright)! Die Fonts liegen auf dem eigenen Webserver Hinweise zur Installation oder via Webfont Generator: Die Schrift wird wie folgt angesprochen: font-family: 'fira_sans', Verdana, Arial, serif; Google Web Fonts Details: Detaillierte Installationsanweisungen beim Icon Quick-Use Die Fonts liegen auf dem Google Server Skyfonts SkyFonts (mieten von Fonts für eine bestimmte Zeit, Service von Monotype) HTW Chur, Studiengang Multimedia Production 15

16 Einige Schriftmerkmale: font-family Weitere kostenlose Webfonts: (unter bestimmten Bedingungen) (von Adobe, unter bestimmten Bedingungen) Vergleich über Dienste Kostenpflichtige Webfonts: WebFont-Services Tools Typecast Experimentieren mit Fonts. Nachteil: Preis! HTW Chur, Studiengang Multimedia Production 16

17 Einige weitere Schriftmerkmale Einige weitere Schriftmerkmale Wortabstand word-spacing: 1em; Zeichenabstand letter-spacing:.2em; Textausrichtung text-align: center; Texteinzug (erste Zeile) text-indent: 10px; HTW Chur, Studiengang Multimedia Production 17

18 Arbeiten mit der Schrifteinheit em Arbeiten mit der Schrifteinheit em Es ist möglich, auf einfache Weise skalierbare Layouts zu erstellen. 1 em entspricht der Schriftgrösse. Beispiel für Schrift mit 14 Pixeln: 1 em ist auch 14 Pixel 1 ex entspricht der Höhe der Kleinbuchstaben. Es gilt ungefähr (aber nicht genau): 1 ex = ½ em. Der Text «Normal» ist 16 Pixel gross: - Firefox: ANSICHT > SCHRIFTGRAD > NORMAL; - IE6: ANSICHT > SCHRIFTGRAD > MITTEL; - IE7: ANSICHT > TEXTGRÖßE > MITTEL Wenn man in body die Schriftgrösse auf font-size: 62.5% setzt entspricht das genau 10 Pixeln. Man setzt anschliessend die Grössen der Container in em. Em bezieht sich dann auf das übergeordnete Element, also den body. Es gilt in obigem Falle mit 62.5%: 1 em = 10 Pixel; 1.6 em = 16 Pixel Vorteil: Man kann die Schrift skalieren. Typische CSS-Konfiguration * { html { body { p { margin: 0px; /* Alle Ränder auf 0 setzen */ padding: 0px; border: 0px; font-size: 100%; /* Schrift von Browser übernehmen */ font-size: 62.5%; /* Schrift auf 10px = 1em setzen */ color: #000000; background-color: #3D4A57; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 1.2em; /* Bsp: p ist 12 Pixel */ HTW Chur, Studiengang Multimedia Production 18

19 Seitenelemente mit body steuern Seitenelemente mit body steuern Ränder entfernen body {margin: 0px; Hintergrundbild Es gibt die Möglichkeit, die Bilder in beide Richtungen oder nur in eine Richtung zu wiederholen. Es lässt sich auch eine absolute Position bestimmen. background-image: url(hinter_lightgrey.jpg); background-color: #CCCCCC; background-repeat: no-repeat; background-position: -100px -160px; Seite umranden Die Hintergrundfarbe sollte immer gesetzt werden. Gewisse Browser haben eine graue Hintergrundfarbe als Standardwert. border: thick solid #000099; Scrollbars ändern body, html {scrollbar-face-color: #FF0000; scrollbar-shadow-color: #00FF00; kein W3C Befehl! HTW Chur, Studiengang Multimedia Production 19

20 Links & Navigation Links & Navigation CSS erlaubt das Formatieren von Links: Normaler, noch nie besuchter link: Besuchter Link: aktiver Link (man klickt mit Maus): Maus über Link: a:link a:visited a:active a:hover Links ohne Unterstreichung a:link {text-decoration: none; Links mit bestimmter Farbe hervorheben a:link {text-decoration: none; color: #FF0000; background-color: #FFFF00; Cursor über Link ändern a:link { text-decoration: none; color: #FF0000; cursor: crosshair; Es ist auch möglich, für den Internet Explorer eine Cursor-Datei zu laden: Der Eintrag swresize gibt z.b. einen Pfeil in der Himmelsrichtungen an (im Beispiel Südwest). cursor: url(cursor.cur); Diese kann auch im body für das ganze Dokument festgelegt werden. HTW Chur, Studiengang Multimedia Production 20

21 Links & Navigation Beispiel: Horizontale Navigation mit Kasten HTML-Aufbau: <div id="hn1"> <ul> <li><a href="..">aktuell</a></li> <li><a href="..">reformiert</a></li> <li><a href="..">katholisch</a></li> <li><a href="..">kirchen</a></li> <li><a href=".." class="current">events</a></li> </ul> </div> CSS Code: body { font-family: Verdana,..., sans-serif; font-size: 12px; #hn1 ul { /* Listenpunkte ausblenden */ list-style-type: none; /* Linken Rand auf 0 setzen für IE */ margin: 0px; /* Linken Rand auf 0 setzen für Mozilla */ padding: 0px; #hn1 ul li { /* li nebeneinander platzieren, Abstand 5px, 100px breit */ float: left; width: 100px; background-color: #F4A04C; margin-right: 5px; #hn1 li a { /* a als Absatz nehmen und zentrieren display: block; background-color:inherit; color: #FFFFFF; text-decoration: none; text-align: center; height: 25px; padding-top: 2px; #hn1 li a:hover { color: #000000; background-color: #00CC00 #hn1.current { font-weight: bold; HTW Chur, Studiengang Multimedia Production 21

22 Links & Navigation Beispiel: Horizontale Navigation fixem Abstand HTML-Aufbau: <div id="hn1"> <ul> <li><a href="..">aktuell</a></li> <li><a href="..">reformiert</a></li> <li><a href="..">katholisch</a></li> <li><a href="..">kirchen</a></li> <li><a href=".." class="current">events</a></li> </ul> </div> CSS Code: body { font-family: Verdana,..., sans-serif; font-size: 12px; #hn1 ul { /* Listenpunkte ausblenden */ list-style-type: none; /* Linken Rand auf 0 setzen für IE */ margin: 0px; /* Linken Rand auf 0 setzen für Mozilla */ padding: 0px; #hn1 ul li { /* li nebeneinander platzieren, Abstand 15px, */ float: left; margin-right: 15px; #hn1 li a { color: #000000; text-decoration: none; #hn1 li a:hover { background-color:inherit; color: #F4A04C; #hn1.current { font-weight: bold; color: #F4A04C; HTW Chur, Studiengang Multimedia Production 22

23 Links & Navigation Beispiel: Vertikale Navigation mit Kasten HTML-Aufbau: <div id="hn1"> <ul> <li><a href="..">aktuell</a></li> <li><a href="..">reformiert</a></li> <li><a href="..">katholisch</a></li> <li><a href="..">kirchen</a></li> <li><a href=".." class="current">events</a></li> </ul> </div> CSS Code: body { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; #hn1 ul { /* Listenpunkte ausblenden */ list-style-type: none; /* Linken Rand auf 0 setzen für IE */ margin: 0px; /* Linken Rand auf 0 setzen für Mozilla */ padding: 0px; #hn1 li a { display: block; width: 100px; height: 25px; color: #FFFFFF; text-decoration: none; background-color: #F4A04C; padding-top: 5px; padding-left: 5px; margin-bottom: 5px; #hn1 li a:hover { background-color:inherit; color: #000000; #hn1.current { font-weight: bold; HTW Chur, Studiengang Multimedia Production 23

24 Formulare Formulare Textfelder einfärben Textfelder werden mit Hilfe einer Klasse eingefärbt <input type="text" name="f" id="f" class="textinput" value="antwort" /> Breite, Textfarbe und Hintergrundfarbe lassen sich ändern:.textinput { width: 50%; color: #FF0000; background-color: #ccc; Kontrollkästchen und Optionsschalter Diese Elemente lassen sich nicht richtig formatieren. Liste und Menü einfärben HTML: <select name="liste" size="6" multiple id="liste"> <option value="1">pepperoni</option> <option value="2" class="gerade">schinken</option> <option value="3">pilze</option> <option value="4" class="gerade">ananas</option> <option value="5">huhn</option> <option value="6" class="gerade">speck</option> </select> CSS: option { color: white; background-color: #CCCCCC;.gerade { background-color: #999999; color: #000000; Schaltflächen HTML: <input type="submit" name="submit" value="submit" class="buttonsubmit" /> CSS:.buttonSubmit { font-size: 25px; color: #000000; background-color: #FFFF00; border: 2px solid #FF0000; padding: 4px; HTW Chur, Studiengang Multimedia Production 24

25 Absolute CSS-Positioning Absolute CSS-Positioning Der Typ legt die Positionierung fest: TYP: ABSOLUT: Positionierung auf Browser-Nullpunkt, RELATIV: Positionierung auf Cursorposition und STATISCH: kein CSS-P-Element Bei PLATZIERUNG gibt man OBEN und LINKS oder RECHTS und UNTEN an. ÜBERLAUF (overflow) definiert, was passiert, wenn der Inhalt (Text oder Bild) grösser ist als die HÖHE (height) oder BREITE (width): position: absolute; visibility: visible; z-index: 1; height: 114px; width: 250px; left: 144px; top: 90px; SICHTBAR visible HIDDEN AUTO ROLLEN scroll Bei einem Bild wird dieses verkleinert oder vergrössert, bis es in die Ebene passt. Mit ABSCHNEIDEN kann ein Teil der Box abgeschnitten, resp. entfernt werden (geht nicht im Internet Explorer).: clip: rect(20px,auto,auto,20px); Element in der horizontalen Mitte platzieren (CSS-P).zentriere {text-align: center; Text: <div class="zentriere"> <p><img src="baeume.jpg" width="250" height="170"></p> </div> Element in der horizontalen und vertikalen Mitte platzieren TEXT AUSRICHTUNG oder vertical-align legt nur die vertikale Ausrichtung in Bezug auf die Grundlinie, nicht aber des Browserfensters fest. Man muss mit Positionieren arbeiten. Die obere rechte Ecke des Elements wird in der Mitte platziert. Aus diesem Grunde muss es noch um die Hälfte der Breite und Höhe verschoben werden..zentriere {position: absolute; top: 50%; right: 50%; margin-right: -128px; margin-top: -85px; HTW Chur, Studiengang Multimedia Production 25

26 Vertikales Anordnen Vertikales Anordnen Container in der Höhe wachsen Eine Box soll eine Mindesthöhe haben und bei mehr Inhalt mitwachsen. Das lässt sich mit min-height lösen. Wird in % gearbeitet, muss sowohl in html als auch in body die height: 100% angegeben werden. Mehrere Spalten in Höhe wachsen Man will, dass sich die erste Spalte A und die dritte Spalte C automatisch mit einer Hintergrund-Farbe füllen, wenn mittlere Inhaltsspalte länger wird. Spaltenreihenfolge im HTML-Code: B, dann A, dann C. B und A sind in einem div-tag "ab", damit sich C auch gut platzieren lässt. <div id="ausrichtung"> <div id="ab"> <div id="b">lipsum..</div> <div id="a">aaaa</div> </div> <div id="c">cccc</div> </div> Spalte B hat links und rechts je eine dicke Linie, welche dieselbe Farbe hat wie die Spaltenhintergründe von A und B #b { background-color: #99FF00; width: 190px; border-left-width: 100px; border-left-style: solid; border-left-color: #FFFF00; border-right-width: 100px; border-right-style: solid; border-right-color: #FFFF00; float: right; padding-left: 10px; #ab { float: left; width: 400px; #a { width: 90px; height: 50px; float: left; margin-right: -100px; padding-left: 10px; #ausrichtung { width: 400px; #c { float: left; width: 90px; height: 50px; margin-left: -100px; padding-left: 10px; HTW Chur, Studiengang Multimedia Production 26

27 Vertikales Anordnen Vertikale Zentrierung Absolut positionierte Elemente lassen sich mit margin: auto sowohl horizontal aus auch vertikal in der Mitte zentrieren (vertikal_004.html): #seite { background:#ffff00; width: 300px; height: 300px; position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; background-color: #FFFF00; margin: auto; Abhilfe für IE7: Ränder um die Hälfte der Breite verschieben (vertikal_005.html): #seite { background:#ffff00; width: 300px; height: 300px; position: absolute; top: 50%; left: 50%; background-color: #FFFF00; margin-top: -150px; margin-left: -150px; Tag in div-container: Ränder Bei einem Tag in einem div-container wirkt der obere Rand (Margin) des Tags oberhalb des div-tags. Der Tag klebt oben am Rand des div- Tags. Ein Padding für den Tag behebt dieses Phänomen. body { margin: 0px; padding: 0px; #seite { background-color: #FFFF00; h1 { margin-top: 40px; padding-top: 60px; HTW Chur, Studiengang Multimedia Production 27