Cascading Style Sheets II (CSS)

Transkript

1 Cascading Style Sheets II (CSS) CSS ist ein Befehlssystem, das die Erscheinungsform von HTML-Elementen regelt. Bei modernen Websites ist der Inhalt der Site unabhängig vom Layout. HTML übernimmt den Inhalt, CSS übernimmt das Layout (auch Format) Links: de.selfhtml.org (bis CSS 2) (auch CSS 3) Je nachdem, wo der CSS-Code zu finden ist, unterscheidet man drei Anwendungsmöglichkeiten: Inline-Styles (für 1 HTML-Element) Dokument-Styles (für 1 HTML-Dokument) Externes Stylesheet (für viele HTML-Dokumente) 1 Inline Styles (Direktformatierung) Mit Hilfe des Attributs STYLE kann einem einzelnen Tag ein beliebiger Stil zugewiesen werden. Absatz in roter Schrift. CODE: <p style="color:#ff0000;">absatz in roter Schrift. </p> Anwendung dieser Methode direkt im HTML-Tag ohne Selektor. Beispielcode für Positionierung eines Bildes: <img style="position:absolute; left:446px; top:220px;" src="bild1648_jpg.jpg" width="75" height="100" /> 2 CSS Regeln Eine CSS-Regel muss immer mit folgender Syntax geschrieben werden. Selektor { Eigenschaft: Wert; } Der Selektor gibt an, wofür die CSS-Regel gilt und ist ein HTML-Tag, eine Klasse, Pseudoklasse, ID etc. (siehe weiter unten) Beispiel (Festlegung der Textfarbe für das BODY-Element): body { color: #333333; } 3 CSS Regeln für das gesamte Dokument (document style) CSS_Unterlage_II.docx - 02/2013 Wannerer - 1 -

2 Im HEAD des HTML-Dokuments wird das STYLE-Tag untergebracht. Dort werden die CSS- Regeln geschrieben, die dann für das gesamte Dokument gelten. Beispielcode des Style-Tags(Schriftart, -größe, -farbe, Hintergrundfarbe, Größe der Überschrift 1, Tabellenhintergrundfarbe) <style type= text/css > /* Kommentar in CSS */ body { font-family:verdana; font-size:12pt; color:#000066; background-color:#cccccc; } h1 { font-size:18pt;} table { background-color:#66ccff;} </style> 4 Externes Stylesheet Die CSS-Regeln werden in eine eigene Textdatei geschrieben und muss die Erweiterung.CSS tragen. Diese CSS-Datei kann mit beliebig vielen Dokumenten verknüpft werden. Die CSS-Datei darf nur CSS-konforme Regeln enthalten (KEIN HTML!!). Code für Verknüpfung im HEAD der HTML-Datei: <link href="mein_stil.css" rel="stylesheet" type="text/css" /> Vorteil: Weil das Stylesheet mit beliebig vielen Dokumenten verknüpft werden kann, kann das Layout von vielen Seiten mit nur einer Regelung im Stylesheet gesteuert bzw. geändert werden. Die mühsame Änderung vieler einzelner Seiten entfällt. 5 Tag-Selektoren Das Aussehen von HTML-Elementen kann mit Tag-Selektoren neu definiert werden. Beispiel: Überschrift Kategorie 1 wird neu definiert h1 {color: #00f;} 6 Universalselektor * Der Universalselektor * wirkt auf alle Elemente. Das Setzen dieses Selektors wird auch als CSS-Reset bezeichnet. CSS_Unterlage_II.docx - 02/2013 Wannerer - 2 -

3 Beispiel: die Innen- und Außenabstände aller Elemente werden auf 0 Pixel gesetzt. Der Entwickler muss dann diese Abstände bei den verschiedenen Elementen (z.b. Absätze) selbst ausdrücklich setzen. * { padding:0px; margin:0px; } 7 Pseudoklassen (z.b. für Hyperlinks) Pseudoklassen reagieren auf Benutzeraktionen. Pseudoklasse Beschreibung Beispiel :focus :hover :active Wenn das Element den Focus erhält (Klick, Tab) Wenn die Maus über das Element bewegt wird Wenn das Element angeklickt wird a:focus { color: blue; } a:hover { color: green; } a:active {font-weight: bold;} :link Für Verweise (links) a:link { color: blue;} :visited Für schon besuchte Verweise a:visited {color:pink; } Beachte: :link und :visited können nur bei Verweisen (a-elementen) verwendet werden :focus, :hover, :active können bei allen Elementen angewendet werden Beispiel (Wenn die Maus über den Link bewegt wird, ändert sich die Hintergrundfarbe): a:hover { background-color: #336699; } Tipp: Beim Hovern die Schriftgröße (auch nicht fett) nicht verändern, da sonst das Layout der Seite unruhig wird (Text "springt") 8 DIV- und SPAN-Elemente DIV ist ein HTML-Blockelement 1 ohne weitere Eigenschaften. Es wird vor allem für das Seitenlayout mit CSS (mit Klasse oder id verwendet.) SPAN ist ein HTML-Inline-Element 1 ohne weitere Eigenschaften. Es wird vor allem für die Anwendung von CSS (Klassen) innerhalb eines Tags verwendet. (Beispiel: ein Teil eines Absatzes soll fett gezeigt werden.) 1) Zu Block und Inline siehe Pkt. 15 CSS_Unterlage_II.docx - 02/2013 Wannerer - 3 -

4 9 Klassen-Selektoren Klassenselektoren sind vordefinierte Formate, die dann auf beliebige Tags angewendet werden können. Die Anwendung geschieht über das CLASS-Attribut, dem der Name der Klasse als Wert zugewiesen wird. Eine Klasse bekommt einen eigenen Namen. Der Name muss mit einem Punkt beginnen. Klassen können auch für Textabschnitte, die kleiner als ein Tag bzw. Absatz sind, angewendet werden. Dazu muss das Element <span class= xy >xyxy</span> verwendet werden. Dem span-tag kann dann die gewünschte Klasse zugewiesen werden. Text im Stylesheet:.HgOrange { background-color:#ff9900; }.Courier { font-family:"courier New"; } Beispiele (Anwendung der Klasse im HTML-Code): Absatz mit Klasse für Hintergrundfarbe. (<p class="hgorange">) Absatz mit Klasse für andere Schriftart. (<p class="courier">) 10 ID-Selektoren (Individualformate) Mit dem ID-Selektor können HTML-Elemente mit einem bestimmten ID-Attribut formatiert werden. Der ID-Selektor im Stylseheet muss mit # beginnen. Das gewünschte HTML-Element bekommt das Attribut ID (ohne #) Unterschied zu Klassen: Normalerweise sollte ein bestimmtes id-attribut innerhalb einer Seite nur einmal vorkommen (id=identifier). Die meisten Browser tolerieren aber auch mehrfache ID s innerhalb einer Seite. <style type="text/css"> #TextBox1 {width:75px; height:100px;} #Box4 { width:288px; height:174px; } </style> </head><body> <div id="box4"> Inhalt des DIV-Elementes </div> <div id="textbox1"> Inhalt des DIV-Elementes </div> 11 Box Modell Das Box-Modell von CSS definiert die Berechnung von Breite und Höhe von Elementen. CSS_Unterlage_II.docx - 02/2013 Wannerer - 4 -

5 Die Gesamtgröße eines Elements errechnet sich durch Addition von vier Eigenschaften: Breite/Höhe des Inhalts (width/height) Innenabstand (padding) Inhalt zum Rahmen Rahmenstärke (border-width) verlangt zusätzlich border-style und border-color Außenabstand (margin) Rahmen zum nächsten Element Abbildung: Das CSS Box-Modell Angabe der betroffenen Seite(oben, rechts, unten, links): Explizite Angabe: margin-top:, margin-right:, margin-bottom:, margin-left: Allgemeine Angabe: ein Wert gilt für alle Seiten: padding: 5px; zwei Werte gelten für oben/unten und links/rechts: padding: 10px 5px; drei Werte gelten für oben, rechts/links und unten: padding: 5px 10px 5px; vier Werte gelten im Uhrzeigersinn von oben: oben-rechts-unten-links padding: 5px 3px 5px 3px; Merke: margin: auto; automatische Anpassung: zentriert das Element (horizontal) 12 Positionierung (absolut) Die Eigenschaft position erlaubte eine beliebige Platzierung von Elementen auf der Seite. CSS_Unterlage_II.docx - 02/2013 Wannerer - 5 -

6 Absolut positionierte (position:absolute;) Elemente werden ganz aus dem normalen Textfluss herausgenommen. Das Element schwebt auf einer anderen Ebene dem z- index! Neben Breite und Höhe müssen auch Abstand von oben und links festgelegt werden. (Dreamweaver AP Div absolut positionierte div-tags) Beispiel: #Box4 { position:absolute; width:288px; height:174px; z-index:52; left: 43px; top: 135px; } Absolute Positionierung verlangt bzw. erlaubt noch einige zusätzliche Eigenschaften, um das Verhalten des positionierten Elementes genauer zu bestimmen: Eigenschaft (mit Beispielswert) Beschreibung position: absolute; Das Element wird absolut auf der Seite positioniert width, height Breite und Höhe des Elements left: 20px; Abstand (linke obere Ecke) vom Rand top: 40px; Abstand von oben right, bottom Alternativ: Abstand von rechts bzw. unten z-index: 100; Bei Überlappung decken Elemente mit höherem Wert darunterliegende ab overflow: hidden; Wenn der Inhalt mehr Platz benötigt als width und height, dann bleibt der Überlauf unsichtbar Andere Werte: scroll: immer Bildlaufleisten auto: Bildlaufleisten bei Bedarf visible: Inhalt läuft über den Bereich von width/height hinaus) 13 Maßeinheiten in CSS Beispiele: Maßeinheit Beschreibung Beispiel pt Typografische Einheit; 1 Punkt = 1/72 Zoll font-size: 12pt; cm, mm, Bekannte Längenmaße (Zentimeter, margin-bottom: 5mm; in Millimeter, Inch) px Pixel, Darstellung abhängig von der left: 150px; Pixeldichte des Ausgabegerätes % Relative Angabe: bezogen auf Element oder Elternelement oder allgemeiner Kontext Achtung: zwischen Wert und Maßeinheit darf kein Leerzeichen stehen! (20px) 14 CSS-Nachfahrenselektoren width: 90%; font-size: 120% Nachfahrenselektoren gelten nur für Elemente die einem anderen Element als Nachfahre("Kind") folgen. CSS_Unterlage_II.docx - 02/2013 Wannerer - 6 -

7 Beispiel 1: Alle Absätze (p) innerhalb von Tabellen(table) sollen anders formatiert werden: table p {... } Beispiel 2: Hyperlinks (a-elemente) innerhalb des Elements mit der id Navigation in Schiftgröße 12 Punkt, fett #Navigation a { font-size: 12 pt; font-weight: bold; } HTML dazu: <div id= Navigation><a href= # >Link</a></div> Anwendung: Unterschiedliche Darstellung von gleichen HTML-Elementen in verschiedenen Seitenbereichen (z. Hyperlinks im Menü anders als im Text) 15 Block- und Inline (display) Bei HTML unterscheidet man Blockelemente und Inlineelemente. Blockelemente erzeugen einen Absatz und beanspruchen immer 100% der zur Verfügung stehenden Breite. Beispiele: p div ul ol table form h1-6 hr Inlineelemente erzeugen keinen eigenen Absatz. Sie sind als Inhalt für die Blockelemente gedacht. Wie Buchstaben werden sie nebeneinander gereiht. Beispiele: a input button span img br strong span CSS: display- Eigenschaft Mit Hilfe der display-eigenschaft wird bestimmt, ob und wie ein Element angezeigt wird: Beispiel display: block; display: inline; display: none; Wirkung Eine neue Zeile wird erzwungen Erzwingt die Anzeige im laufenden Textfluss Das Element wird nicht angezeigt Damit kann die Standard-Darstellung der HTML Elemente verändert werden. Anwendung: a-elemente mit Hintergrundfarbe über gesamte Breite 16 float und clear Mit float können gleichrangige (im HTML-Code nacheinander notierte) Blockelemente nebeneinander platziert werden. Durch die Eigenschaft float folgt das Layout eines Elementes zunächst den Regeln des normalen Elementflusses. Dann wird das float-positionierte Element aus dem Fluss herausgelöst und soweit nach links oder rechts verschoben, bis es entweder an die Kante des umschließenden Blocks oder eines anderen floatierten Elements anstößt. Vertikal wird es, wenn möglich, mit der Oberkante der Textzeile, innnerhalb der es auftritt, aligniert. Ist dort nicht ausreichend Platz, wird es Zeile für Zeile nach unten geschoben, bis eine Zeile ausreichend Platz zur Aufnahme des Elements bietet. CSS_Unterlage_II.docx - 02/2013 Wannerer - 7 -

8 Beispiel für das Verhalten bei float: Die Eigenschaft float hat 3 mögliche Werte float: left; Das Element steht links und wird rechts davon von den folgenden Elementen umflossen float: right; Das Element steht rechts und wird links davon von den folgenden Elementen umflossen float: none; Kein Umfluss, normale Darstellung clear-eigenschaft Der mit float bestimmte Umfuss kann aufgehoben werden. clear: left; clear: right; clear: both; Erzwingt bei float: left; die Fortsetzung unterhalb erzwingt bei float: right; die Fortsetzung unterhalb Erzwingt in jedem Fall die Fortsetzung unterhalb Anwendungsbeispiel: ein mit float erstelltes mehrpaltiges Layout wird aufgelöst. 17 Erweiterte Anwendungsbeispiele: Absolute Positionierung mit DIV-Tags mit der Eigenschaft position Flexible, auch mehrspaltige, fließende Designs mit float und clear ohne feste Positionierung Navigation mit Listenelementen (ul, li) mit display, bei Bedarf float und clear 18 Einige CSS3- Eigenschaften Abgerundete Ecken Beispiel: border-radius: 5px; Schatten: box-shadow Beispiel: box-shadow: 4px 4px 3px #999; Erster Wert: horizontale Schattenrichtung Zweiter Wert: vertikale Schattenrichtung Dritter Wert: Kantenunschärfe (weiche Kante) Vierter Wert: Farbe des Schattens CSS_Unterlage_II.docx - 02/2013 Wannerer - 8 -