Webtechnologien Teil 5: Cascading Style Sheets (CSS) - Teil II 02.10.18 1
Überblick Farben Text Box-Modell Rahmen Hintergrund Tabellen Layer mit div Verschiedene Effekte 2
Farben I Farben werden nach dem Rot-Grün-Blau (RGB)-Modell als hexadezimale Zahlen angegeben oder als vordefinierte Namen. Schema: #RRGGBB mit 00 bis FF (256 Stufen) z. B. Weiß: #FFFFFF, Schwarz: #000000, Blau: #0000FF Nur Farben, die "websafe" sind, werden überall gleich dargestellt. Siehe auch: http://de.wikipedia.org/wiki/webfarbe http://en.wikipedia.org/wiki/web_colors Eine Farbtafel lässt sich von http://www.farb-tabelle.de/de/farbtabelle-html4.htm herunter laden. 3
Farben II - Vordefinierte Bezeichnungen Quelle: http://www.w3.org/tr/css3-color 4
Farben III Die Farbe wird durch die RGB-Farbdefinition bzw. durch ein Schlüsselwort (wie bei HTML) ausgewählt. 3 Angaben in %: rgb(rrr.rr%,ggg.gg%,bbb.bb%) z.b. color: rgb(100%,0%,10%) 3 Dezimalwerte: rgb(rrr,ggg,bbb) z.b. color: rgb(255,0,25) 3 Dezimalwerte und Transparenz: rgba(rrr,ggg,bbb,ttt) z.b. color: rgb(255,0,25,0.5) 5
Beispiel <style type="text/css"> #H01 { color: rgb(100%,0%,30%); #H02 { color: rgb(255,0,75); #H03 { color: rgba(255,0,75,0.5); #H04 { color: rgba(255,0,75,0.2); </style> </head> <body> <h1 id="h01">das ist eine H1-Überschrift</h1> <h1 id="h02">das ist eine H2-Überschrift</h1> <h1 id="h03">das ist eine H3-Überschrift</h1> <h1 id="h04">das ist eine H3-Überschrift</h1> </body> 6
Schriften I <Tag style="font-family:fam; font-size: Size; color: Farbe;"> Tag { font-family:fam; font-size: Size; color: Farbe; Schriftart (font-family) Fam ist eine durch Kommata getrennte Liste von Namen, die entsprechend der Reihenfolge priorisiert sind. Sind im Namen Sonderzeichen enthalten, muss dieser in Hochkommata eingeschlossen sein, z. B. "Times New Roman". Schriftgröße (font-size) ist die Größenangabe 7
Schriften II Schriftfamilien (Beispiele) serif sans-serif monospace Schriften mit Anstrichen ("Häkchen") Schriften ohne Anstriche Alle Zeichen haben dieselbe feste Breite Schlüsselwörter für Schriftgrößen xx-small Sehr sehr klein large Groß x-small Sehr klein larger Etwas größer small Klein x-large Sehr groß smaller Etwas kleiner xx-large Sehr sehr groß medium Mittel 8
Schriften III - Umgebungsbezogene Farben Es werden die Farben der Umgebung übernommen (Auszug): ActiveBorder ActiveCaption AppWorkspace Background ButtonFace Aktive Fenstertitelzeile Überschrift der aktiven Fenstertitelzeile Hintergrund des aktiven Fensters Desktop-Hintergrund Buttons in Dialogfenstern ButtonHighlight 3D-Schatten der Buttons in Dialogfenstern ButtonText CaptionText InactiveBorder Buttontext Überschriften im Dialogfenster Fenstertitelzeile inaktiver Fenster http://webkompetenz.wikidot.com/html-handbuch:css-farben http://www.html-info.eu/stylesheets-css/formatierung-mit-css/ item/farbangaben-in-css.html https://wiki.selfhtml.org/wiki/grafik/farbpaletten 9
Schriften IV <Tag style="font-weight: Stärke; font-style: Stil; font-variant: Var;"> Tag { font-weight: Stärke; font-style: Stil; font-variant: Var; Schriftdicke (font-weight) wird mit Schlüsselwörtern (bold, bolder, medium, lighter, normal) oder durch Angabe einer Zahl zwischen 100 (sehr dünn) und 900 (sehr dick) definiert - normal ist 500. Der Schriftstil (font-style) wird durch Schlüsselwörter definiert. italic, oblique, normal. Variationen der Schrift erfolgen durch Angabe von normal oder smallcaps (Kapitälchenschrift). 10
Beispiel <style type="text/css"> #p1 {font-weight: bold; font-style: italic; font-variant: small-caps; </style> <body> <p id="p1"> das ist etwas kurios <p> und hier gehts weiter </body> 11
Schriften V <Tag style="word-spacing: Wabstand; letter-spacing: Labstand;"> Tag { word-spacing: Wabstand; letter-spacing: Labstand; Festlegung des Abstandes zwischen Wörtern (word-spacing) oder Zeichen innerhalb eines Wortes (letter-spacing). Beispiel: <Tag style="word-spacing:4mm; letter-spacing:2mm;"> 12
Schriften VI <Tag style="text-decoration: Art;"> Tag { text-decoration: Art; Das Attribut text-decoration gibt weitere Veränderungen der benutzten Schrift an. Art kann sein: underline (Unterstreichen) overline (Unterstreichung oben) line-through (Durchstreichen) none (keine weiteren Attribute) Siehe: http://www.w3schools.com/css/css_text.asp 13
Textausrichtung I <Tag style="text-indent: Val; line-height: Höhe; text-align: Aus;"> Tag { text-indent: Val; line-height: Höhe; text-align: Aus; Das nach rechts Einrücken der 1. Zeile erfolgt mit text-indent, wobei auch negative Werte angegeben werden können. Dann wird nach links eingerückt. Die Zeilenhöhe wird mit line-height bestimmt, übliche Einheiten sind em, px und mm. Die Ausrichtung selbst wird durch text-align definiert: right, left, center und justify. 14
Textausrichtung II Tag:first-line { Definitionen; Tag:first-letter { Definitionen; Die Pseudoklasse :first-line selektiert die gesamte erste Zeile. Die Pseudoklasse :first-letter selektiert das erste Zeichen, das z. B. größer gestaltet werden kann. 15
Textausrichtung III - Beispiel <!DOCTYPE html PUBLIC......... > <html......> <head> <title>...</title > <style type="text/css"> p:first-line {text-indent: 3mm; p.kapitel {font-size: 12pt; p.kapitel:first-letter {font-size: 40pt; float: left; </style> </head> <body> <p>das ist der Inhalt</p> <p class="kapitel"> Lorem ipsum sit amet.</p> <p>das war der Inhalt</p> </body> </html> 16
Textausrichtung IV - Beispiel Der Text im Absatz mit class=... fließt um den ersten groß dargestellten Buchstaben herum. Dies gilt nicht für den folgenden Absatz. float: left bedeutet, dass der Text um das Objekt, was links ist, rechts herum fließt. 17
Trennung in Texten Verwendung des optionalen Trennzeichens (Soft Hyphen): oder Beispiel Das Dampfschiffkapitänleutnantpatent ist schwer zu erlangen. Das Dampf schiff kapitän leutnant patent ist schwer zu erlangen. 18
Hoch- und Tiefgestellter Text CSS-Definitionen: sup { vertical-align : baseline; position : relative; top : -0.3em; sub { vertical-align : baseline; position : relative; top : 0.4em; p { line-spacing : 1.5em; Text: <p>lorem ipsum dolor sit amet, consetetur sadipscing elitr x<sup>2</sup>=4 sed diam nonumy eirmod tempor H<sub>2</sub>O invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p> 19
Hintergrund I <Tag style="background-color: Farbe; background-image: url(url); background-attachment: Art;"> Tag { background-color: Farbe; background-image: url(url); background-attachment: Art; Farbe und Hintergrundbild werden wie üblich angegeben. Das Attribut background-attachment erzeugt einen Wasserzeicheneffekt, wenn Art fixed ist; dann ist das Hintergrundbild beim Scrollen fest verankert, d.h. der Text scrollt über das feste Bild. 20
Hintergrund II <Tag style="background-repeat: Art; background-position: Position"> Tag { background-repeat: Art; background-position: Position; background-repeat legt das Wiederholungsverhalten fest; Art: repeat (Wiederholungen), repeat-x (1 Zeile lange Wieder-holungen), repeat-y (1 Spalte lange Wiederholungen), no-repeat background-position gibt die Position des Hintergrundbildes an Schlüsselwörter: top, center, middle, bottom, left, right; oder absolute Koordinaten der linken oberen Ecke des Bildes (x und y). Es sind auch %-Werte zulässig. Siehe: http://www.w3schools.com/css/css_background.asp 21
Box-Modell I width margin-top border-top padding-top height margin-left border-left padding-left Inhalt padding-right border-right margin-right padding-bottom border-bottom margin-bottom 22
Box-Modell II Hinzu kommen noch Attribute für Farben Hintergründe Die meisten der angegebenen Attribute können für Elemente mit dem Charakter eines Rechtecks benutzt werden, insbesondere: zur Definition der Eigenschaften des Browserfensters, für Tabellenzellen bzw. Tabellen selbst und für frei positionierbare rechteckförmige Bereiche (div, Layer). 23
Attribute von Bildern <img style="height: Höhe; width: Breite; " > img { height: Höhe; width: Breite; weitere Attribute Bei Bildern sollten immer die Höhe und die Breite angegeben werden. So wie oben dargestellt, hätten dann alle Bilder dieselbe Größe; daher sollte mit IDs jeweils Bild für Bild gearbeitet werden: #picture { height: 20px; width: 20px;... <img id="picture" src="images/picture.gif"> 24
Rahmen I <Tag style="border-left-width: Val; border-right-width: Val; border-top-width: Val; border-bottom-width: Val; border-width: Val; "> Tag { border-left-width: Val; border-right-width: Val; border-top-width: Val; border-bottom-width: Val; border-width: Val; Bei der Angabe der Rahmenbreite (border-width) sind Zahlenangaben oder Schlüsselwörter möglich: thin, medium, thick 25
Rahmen II <Tag style="border-style: Art; border-color: Farbe; "> Tag { border-style: Art; border-color: Farbe; Die Art des Rahmens wird durch Schlüsselwörter festgelegt. Die Farbe des Rahmens wie sonst auch üblich Siehe: http://www.w3schools.com/css/css_border.asp 26
Beispiel für Rahmenarten I <!DOCTYPE html PUBLIC...... > <html...... > <head><title>...</title > <style type="text/css">.bc1 { position: absolute; top: 8px; left: 4px; width: 120px; height: 120px; border-width: 8px; border-style: groove; border-color: olive;.bc2 { position: absolute; top: 8px; left: 145px; width: 120px; height: 120px; border-width: 8px; border-style: inset; border-color: olive;.bc3 { position: absolute; top: 8px; left: 285px; width: 120px; height: 120px; border-width: 8px; border-style: outset; border-color: olive;.bc4 { position: absolute; top: 8px; left: 425px; width: 120px; height: 120px; border-width: 8px; border-style: ridge; border-color: olive; </style> </head> <body> <div class="bc1"> border-style: <br/> groove</div> <div class="bc2"> border-style: <br/> inset </div> <div class="bc3"> border-style: <br/> outset</div> <div class="bc4"> border-style: <br/> ridge </div> </body> </html> 27
Beispiel für Rahmenarten II dashed dotted double groove inset none outset ridge gestrichelt gepunktet doppelt durchgezogen 3D-Effekt wie ein Graben 3D-Effekt (versenkt) unsichtbarer Rahmen 3D-Effekt (herausragend) 3D-Effekt wie ein Hügel Dies läuft sogar auf dem IE 8.0, allerdings sind die Farben nicht so schön. 28
Beispiel - CSS-Knöpfe für arme Leute I <!DOCTYPE html PUBLIC......> <html......> <head> <title>...</title > <style type="text/css">.button {font-weight: bold; text-decoration: none; border-color: Color1; background-color: Color2; padding: 5px; border-width:4px; border-style:outset; a.button:active { border-color: Color1; background-color: Color1; border-width: 4px; border-style: inset; </style> </head> <body> <p>das ist der Inhalt</p> <p><a class="button" href="http://www.google.de"> google </a> </p> </body> </html> 29
Beispiel - CSS-Knöpfe für arme Leute II Mit ".button" wird eine Klasse definiert, die ein Rechteck festlegt. Mit "a.button" wird diese Klasse auf das A-Tag angewendet. Da das A-Tag verschiedene Zustände annehmen kann, können auch die Pseudo-Klassen ":link", ":visited" etc. angewendet werden. 30
Rahmen III <Tag style="padding-left: Val; padding-right : Val; padding-top: Val; padding-bottom : Val; padding: Val;"> Tag { padding-left: Val; padding-right: Val; padding-top: Val; padding-bottom: Val; padding: Val; Festlegung der Innenabstände zum Rahmen (Siehe Box-Modell) Siehe: http://www.w3schools.com/css/css_padding.asp 31
Rahmen IV <Tag style="margin-left: Value; margin-right: Value; margin-top: Value; margin-bottom: Value;" > Tag { margin-left: Value; margin-right: Value; margin-top: Value; margin-bottom: Value; margin: Value; Der Abstand des Elements zum Umfeld wird mit vier Margin- Angaben festgelegt (siehe Box-Modell). Es sind auch negative Werte möglich, was zu Überlappungen führen kann. Siehe: http://www.w3schools.com/css/css_margin.asp 32
Tabellen I - Beschriftung <caption style="caption-side=value;">... </caption> Für Value gibt es folgende Möglichkeiten: top topleft topright bottom bottomleft bottomright Zentriert über der Tabelle Linksbündig über der Tabelle Rechtsbündig über der Tabelle Zentriert unter der Tabelle Linksbündig unter der Tabelle Rechtsbündig unter der Tabelle 33
Tabellen II... <style type="text/css"> td { colspan: Value;... </style> <table...>... <td style="rowspan: Value;">... </table> Die Zusammenfassung mehrerer Spalten erfolgt mit colspan, mehrerer Zeilen mit rowspan - jeweils gefolgt mit einer Angabe der Anzahl der benachbarten Spalten bzw. Zeilen. Bei colspan werden die Spalten ab dem betreffenden Element nach rechts zusammengefasst. Bei rowspan werden die Zeilen ab dem betreffenden Element nach unten zusammengefasst. Die oben angegebene linke Form ist zu allgemein, auch hier sollte mit Ids gearbeitet werden. 34
Listen I... <style type="text/css"> ul { list-style-type: Art; ol { list-style-type: Art;... </style>... <ol style="list-style-position:pos;"> <li>... </li> <li>... </li>... </ol> Für ungeordnete Listen gibt es für Art folgende Möglichkeiten: disc (Punkt), circle (Kreis), square (Rechteck), none Für nummerierte Listen: decimal, lower-roman, upper-roman, lower-alpha, upper-alpha, none Durch list-style-position wird die Einrückung der Elemente bestimmt: inside (Listenzeichen wird in Block integriert), outside (Listenzeichen wird links herausgerückt) 35
Listen II <style type="text/css"> li { list-style-image: url(url);... </style> <Tag style="list-style: ListeVonDefinitionenMitBlanks;"> Tag { list-style: ListeVonDefinitionenMitBlanks; Durch Angabe einer URL von einer Datei wird die dort abgelegte Graphik als Listenzeichen benutzt. Mit list-style lassen sich mehrere Definitionen erstellen. Siehe: http://www.w3schools.com/css/css_list.asp 36
Beispiele I <!DOCTYPE html PUBLIC...... > <html......> <head><title>...</title > <style type="text/css"> ul { list-style-type: circle; ol { list-style-type: upper-roman; </style> </head> <body> <ul> <li> Etwas1 </li> <li> Etwas2 </li> </ul> <ol> <li> Noch Etwas1 </li> <li> Noch Etwas2 </li> <li> Noch Etwas3 </li> <li> Noch Etwas4 </li> </ol> </body> </html> 37
Beispiele II <!DOCTYPE html PUBLIC...... > <html......> <head><title>...</title > <style type="text/css"> ul { list-style-type: square; list-style-position: inside; ol { list-style-type: upper-alpha; list-style-position: outside; </style> </head> <body> <ul> <li> Lorem ipsum dolor diam nonumy eirmod</li> <li> Lorem ametinvidunt diam voluptua. </li> </ul> <ol> <li> Lorem ipsum dolor sed diam nonumy eirmod</li> <li> Lorem ametinvidunt erat, sed diam voluptua. </li> <li> Noch Etwas3 </li> <li> Noch Etwas4 </li> </ol> </body> </html> 38
Beispiele III 39
Float I <div style="width: Val; height: Val; float: Art;">... Text... </div> Durch float wird der Text nicht in das Element gebracht, sondern in Abhängigkeit von Art um das Element: left: Element steht links vom Text right: Element steht rechts vom Text none: Element wird nicht vom Text umflossen Es sind nicht alle sinnvollen Kombinationen von Attributen korrekt realisiert! 40
Float II - Beispiel <!DOCTYPE html PUBLIC...... > <html...... > <head> <title>...</title > <style type="text/css" media="screen"> img.integriert { float: left; </style> </head> <body> <p>das ist der Inhalt Lorem ipsum dolor sit amet, aliquyam erat, <img class="integriert" src="http://www.f4.htw-berlin.de/fil...green.gif"/> sed diam voluptua.. Stet clita amet.</p><p>das war der Inhalt</p> </body> </html> 41
Geschachtelte div I Layer-Definitionen: <div class="relative">... <div class="absolute">...</div> </div> absolute CSS-Definitionen:.relative { position: relative; width:...; height:...;.absolute { position: absolute; top: 50px; right: 50px; width: 200px; height: 100px;... Das innere Rechteck wird absolut relativ zum umfassenden äußeren Rechteck positioniert. 42
Geschachtelte div II position : relative bedeutet, dass das Rechteck relativ zur Stelle, an der es von vornherein gekommen wäre, um die Werte top und left verschoben wird position : absolute bedeutet, dass das Rechteck relativ zum nächst umfassenden Rechteck unabhängig von der Stelle, an der es von vornherein gekommen wäre, entsprechend positioniert wird. Gibt es kein umfassendes Rechteck, so wird das Bildschirm- Rechteck benutzt. position : fixed bedeutet, dass das Rechteck wie bei relative positioniert wird, aber beim Scrollen mitbewegt wird es bleibt also immer sichtbar stehen. 43
Div mit Scrollbalken Layer-Definition: <div id="content">......... </div> CSS-Definition: #content { width:...; height:...; overflow-y: auto; overflow-x: auto; 44
Links <style type="text/css" media="screen"> a:link { Definitionen a:visited { Definitionen a:hover { Definitionen a:active { Definitionen </style> Die entsprechenden Definitionen gelten, wenn der Link nicht besucht wurde: link bereits besucht wurde: visited die Seite gerade geladen wird: active die Maus auf dem Link steht: hover :active muss als letztes definiert werden, damit dessen Definitionen entsprechend den Regeln der Kaskadierung nicht durch ein späteres :link etc. aufgehoben werden. 45
Formulare Eingabefelder hervorheben CSS-Definition: input:focus { background-color: yellow; Hat das Input-Feld den Fokus, wird der Hintergrund gelb gefärbt. CSS-Definition: input:focus:hover { background-color: green; Hat das Input-Feld den Fokus und ist die Maus darüber, wird der Hintergrund grün gefärbt. 46
Formulare Pflichtfelder hervorheben CSS-Definition: input[type="text"][required] { border: 2px solid red; Es wird ein neues Attribut erfunden: required, das der Kennzeichnung dient, dies ist nicht xhtml-strict. CSS-Definition: input[type="text"]:required { border: 2px solid red; Dies geht nur in HTML5. xhtml <p>eingabe: <input type="text"/></p> <p>eingabe: <input type="text" required="required"/></p> 47
Weiteres Es wurde nur ein Auszug aus CSS Level 1-4 vorgestellt. Es fehlen: Viele Tabellenanwendungen Die Möglichkeiten zum Satzlayout, z.b. Seitenkopf, Fuß etc. Audio-Ausgabe, insbesondere die Sprachausgabe Präsentation von Zeichensätzen in einer anderen Leserichtung als im lateinischen Sprachraum üblich 48
Nach dieser Anstrengung etwas Entspannung... 49