Webtechnologien Teil 5: Cascading Style Sheets (CSS) - Teil...
Transcript of Webtechnologien Teil 5: Cascading Style Sheets (CSS) - Teil...
![Page 1: Webtechnologien Teil 5: Cascading Style Sheets (CSS) - Teil IIwi.f4.htw-berlin.de/users/messer/LV/WI-WT-WS18/Folien/WT-05/05-WT-CSS...Webtechnologien – WS 2018/19 - Teil 5/CSS II](https://reader030.fdocuments.net/reader030/viewer/2022041213/5e01207ea80d4641f740e449/html5/thumbnails/1.jpg)
02.10.18 1Webtechnologien – WS 2018/19 - Teil 5/CSS II
Webtechnologien
Teil 5: Cascading Style Sheets (CSS) - Teil II
![Page 2: Webtechnologien Teil 5: Cascading Style Sheets (CSS) - Teil IIwi.f4.htw-berlin.de/users/messer/LV/WI-WT-WS18/Folien/WT-05/05-WT-CSS...Webtechnologien – WS 2018/19 - Teil 5/CSS II](https://reader030.fdocuments.net/reader030/viewer/2022041213/5e01207ea80d4641f740e449/html5/thumbnails/2.jpg)
2Webtechnologien – WS 2018/19 - Teil 5/CSS II
Überblick
• Farben
• Text
• Box-Modell
• Rahmen
• Hintergrund
• Tabellen
• Layer mit div
• Verschiedene Effekte
![Page 3: Webtechnologien Teil 5: Cascading Style Sheets (CSS) - Teil IIwi.f4.htw-berlin.de/users/messer/LV/WI-WT-WS18/Folien/WT-05/05-WT-CSS...Webtechnologien – WS 2018/19 - Teil 5/CSS II](https://reader030.fdocuments.net/reader030/viewer/2022041213/5e01207ea80d4641f740e449/html5/thumbnails/3.jpg)
3Webtechnologien – WS 2018/19 - Teil 5/CSS II
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.
![Page 4: Webtechnologien Teil 5: Cascading Style Sheets (CSS) - Teil IIwi.f4.htw-berlin.de/users/messer/LV/WI-WT-WS18/Folien/WT-05/05-WT-CSS...Webtechnologien – WS 2018/19 - Teil 5/CSS II](https://reader030.fdocuments.net/reader030/viewer/2022041213/5e01207ea80d4641f740e449/html5/thumbnails/4.jpg)
4Webtechnologien – WS 2018/19 - Teil 5/CSS II
Farben II - Vordefinierte Bezeichnungen
Quelle: http://www.w3.org/TR/css3-color
![Page 5: Webtechnologien Teil 5: Cascading Style Sheets (CSS) - Teil IIwi.f4.htw-berlin.de/users/messer/LV/WI-WT-WS18/Folien/WT-05/05-WT-CSS...Webtechnologien – WS 2018/19 - Teil 5/CSS II](https://reader030.fdocuments.net/reader030/viewer/2022041213/5e01207ea80d4641f740e449/html5/thumbnails/5.jpg)
5Webtechnologien – WS 2018/19 - Teil 5/CSS II
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)
![Page 6: Webtechnologien Teil 5: Cascading Style Sheets (CSS) - Teil IIwi.f4.htw-berlin.de/users/messer/LV/WI-WT-WS18/Folien/WT-05/05-WT-CSS...Webtechnologien – WS 2018/19 - Teil 5/CSS II](https://reader030.fdocuments.net/reader030/viewer/2022041213/5e01207ea80d4641f740e449/html5/thumbnails/6.jpg)
6Webtechnologien – WS 2018/19 - Teil 5/CSS II
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>
![Page 7: Webtechnologien Teil 5: Cascading Style Sheets (CSS) - Teil IIwi.f4.htw-berlin.de/users/messer/LV/WI-WT-WS18/Folien/WT-05/05-WT-CSS...Webtechnologien – WS 2018/19 - Teil 5/CSS II](https://reader030.fdocuments.net/reader030/viewer/2022041213/5e01207ea80d4641f740e449/html5/thumbnails/7.jpg)
7Webtechnologien – WS 2018/19 - Teil 5/CSS II
Schriften I
• 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
<Tag style="font-family:Fam; font-size: Size; color: Farbe;">
Tag { font-family:Fam; font-size: Size; color: Farbe;
}
![Page 8: Webtechnologien Teil 5: Cascading Style Sheets (CSS) - Teil IIwi.f4.htw-berlin.de/users/messer/LV/WI-WT-WS18/Folien/WT-05/05-WT-CSS...Webtechnologien – WS 2018/19 - Teil 5/CSS II](https://reader030.fdocuments.net/reader030/viewer/2022041213/5e01207ea80d4641f740e449/html5/thumbnails/8.jpg)
8Webtechnologien – WS 2018/19 - Teil 5/CSS II
Schriften II
serif Schriften mit Anstrichen ("Häkchen")
sans-serif Schriften ohne Anstriche
monospace Alle Zeichen haben dieselbe feste Breite
Schriftfamilien (Beispiele)
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
![Page 9: Webtechnologien Teil 5: Cascading Style Sheets (CSS) - Teil IIwi.f4.htw-berlin.de/users/messer/LV/WI-WT-WS18/Folien/WT-05/05-WT-CSS...Webtechnologien – WS 2018/19 - Teil 5/CSS II](https://reader030.fdocuments.net/reader030/viewer/2022041213/5e01207ea80d4641f740e449/html5/thumbnails/9.jpg)
9Webtechnologien – WS 2018/19 - Teil 5/CSS II
Schriften III - Umgebungsbezogene Farben
Es werden die Farben der Umgebung übernommen (Auszug):
ActiveBorder Aktive Fenstertitelzeile
ActiveCaption Überschrift der aktiven Fenstertitelzeile
AppWorkspace Hintergrund des aktiven Fensters
Background Desktop-Hintergrund
ButtonFace Buttons in Dialogfenstern
ButtonHighlight 3D-Schatten der Buttons in Dialogfenstern
ButtonText Buttontext
CaptionText Überschriften im Dialogfenster
InactiveBorder 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
![Page 10: Webtechnologien Teil 5: Cascading Style Sheets (CSS) - Teil IIwi.f4.htw-berlin.de/users/messer/LV/WI-WT-WS18/Folien/WT-05/05-WT-CSS...Webtechnologien – WS 2018/19 - Teil 5/CSS II](https://reader030.fdocuments.net/reader030/viewer/2022041213/5e01207ea80d4641f740e449/html5/thumbnails/10.jpg)
10Webtechnologien – WS 2018/19 - Teil 5/CSS II
Schriften IV
• 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 small-caps (Kapitälchenschrift).
<Tag style="font-weight: Stärke; font-style: Stil; font-variant: Var;">
Tag { font-weight: Stärke; font-style: Stil; font-variant: Var;
}
![Page 11: Webtechnologien Teil 5: Cascading Style Sheets (CSS) - Teil IIwi.f4.htw-berlin.de/users/messer/LV/WI-WT-WS18/Folien/WT-05/05-WT-CSS...Webtechnologien – WS 2018/19 - Teil 5/CSS II](https://reader030.fdocuments.net/reader030/viewer/2022041213/5e01207ea80d4641f740e449/html5/thumbnails/11.jpg)
11Webtechnologien – WS 2018/19 - Teil 5/CSS II
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>
![Page 12: Webtechnologien Teil 5: Cascading Style Sheets (CSS) - Teil IIwi.f4.htw-berlin.de/users/messer/LV/WI-WT-WS18/Folien/WT-05/05-WT-CSS...Webtechnologien – WS 2018/19 - Teil 5/CSS II](https://reader030.fdocuments.net/reader030/viewer/2022041213/5e01207ea80d4641f740e449/html5/thumbnails/12.jpg)
12Webtechnologien – WS 2018/19 - Teil 5/CSS II
Schriften V
• Festlegung des Abstandes zwischen Wörtern (word-spacing) oder Zeichen innerhalb eines Wortes (letter-spacing).
• Beispiel:
<Tag style="word-spacing: Wabstand; letter-spacing: Labstand;">
Tag { word-spacing: Wabstand; letter-spacing: Labstand;
}
<Tag style="word-spacing:4mm; letter-spacing:2mm;">
![Page 13: Webtechnologien Teil 5: Cascading Style Sheets (CSS) - Teil IIwi.f4.htw-berlin.de/users/messer/LV/WI-WT-WS18/Folien/WT-05/05-WT-CSS...Webtechnologien – WS 2018/19 - Teil 5/CSS II](https://reader030.fdocuments.net/reader030/viewer/2022041213/5e01207ea80d4641f740e449/html5/thumbnails/13.jpg)
13Webtechnologien – WS 2018/19 - Teil 5/CSS II
Schriften VI
• 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
<Tag style="text-decoration: Art;">
Tag { text-decoration: Art;
}
![Page 14: Webtechnologien Teil 5: Cascading Style Sheets (CSS) - Teil IIwi.f4.htw-berlin.de/users/messer/LV/WI-WT-WS18/Folien/WT-05/05-WT-CSS...Webtechnologien – WS 2018/19 - Teil 5/CSS II](https://reader030.fdocuments.net/reader030/viewer/2022041213/5e01207ea80d4641f740e449/html5/thumbnails/14.jpg)
14Webtechnologien – WS 2018/19 - Teil 5/CSS II
Textausrichtung I
• 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.
<Tag style="text-indent: Val; line-height: Höhe; text-align: Aus;">
Tag { text-indent: Val; line-height: Höhe; text-align: Aus;
}
![Page 15: Webtechnologien Teil 5: Cascading Style Sheets (CSS) - Teil IIwi.f4.htw-berlin.de/users/messer/LV/WI-WT-WS18/Folien/WT-05/05-WT-CSS...Webtechnologien – WS 2018/19 - Teil 5/CSS II](https://reader030.fdocuments.net/reader030/viewer/2022041213/5e01207ea80d4641f740e449/html5/thumbnails/15.jpg)
15Webtechnologien – WS 2018/19 - Teil 5/CSS II
Textausrichtung II
• 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.
Tag:first-line { Definitionen;
}
Tag:first-letter { Definitionen;
}
![Page 16: Webtechnologien Teil 5: Cascading Style Sheets (CSS) - Teil IIwi.f4.htw-berlin.de/users/messer/LV/WI-WT-WS18/Folien/WT-05/05-WT-CSS...Webtechnologien – WS 2018/19 - Teil 5/CSS II](https://reader030.fdocuments.net/reader030/viewer/2022041213/5e01207ea80d4641f740e449/html5/thumbnails/16.jpg)
16Webtechnologien – WS 2018/19 - Teil 5/CSS II
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>
![Page 17: Webtechnologien Teil 5: Cascading Style Sheets (CSS) - Teil IIwi.f4.htw-berlin.de/users/messer/LV/WI-WT-WS18/Folien/WT-05/05-WT-CSS...Webtechnologien – WS 2018/19 - Teil 5/CSS II](https://reader030.fdocuments.net/reader030/viewer/2022041213/5e01207ea80d4641f740e449/html5/thumbnails/17.jpg)
17Webtechnologien – WS 2018/19 - Teil 5/CSS II
Textausrichtung IV - Beispiel
Der Text im Absatz mit class=... fließt um den ersten groß dargestelltenBuchstaben herum. Dies gilt nicht für den folgenden Absatz.
float: left bedeutet, dass der Text um das Objekt, was links ist, rechtsherum fließt.
![Page 18: Webtechnologien Teil 5: Cascading Style Sheets (CSS) - Teil IIwi.f4.htw-berlin.de/users/messer/LV/WI-WT-WS18/Folien/WT-05/05-WT-CSS...Webtechnologien – WS 2018/19 - Teil 5/CSS II](https://reader030.fdocuments.net/reader030/viewer/2022041213/5e01207ea80d4641f740e449/html5/thumbnails/18.jpg)
18Webtechnologien – WS 2018/19 - Teil 5/CSS II
Trennung in Texten
Verwendung des optionalen Trennzeichens (Soft Hyphen):­ oder ­
Beispiel
Das Dampfschiffkapitänleutnantpatent ist schwer zu erlangen.
Das Dampf­schiff­kapitän­leutnant­patentist schwer zu erlangen.
![Page 19: Webtechnologien Teil 5: Cascading Style Sheets (CSS) - Teil IIwi.f4.htw-berlin.de/users/messer/LV/WI-WT-WS18/Folien/WT-05/05-WT-CSS...Webtechnologien – WS 2018/19 - Teil 5/CSS II](https://reader030.fdocuments.net/reader030/viewer/2022041213/5e01207ea80d4641f740e449/html5/thumbnails/19.jpg)
19Webtechnologien – WS 2018/19 - Teil 5/CSS II
Hoch- und Tiefgestellter Text
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>
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;}
![Page 20: Webtechnologien Teil 5: Cascading Style Sheets (CSS) - Teil IIwi.f4.htw-berlin.de/users/messer/LV/WI-WT-WS18/Folien/WT-05/05-WT-CSS...Webtechnologien – WS 2018/19 - Teil 5/CSS II](https://reader030.fdocuments.net/reader030/viewer/2022041213/5e01207ea80d4641f740e449/html5/thumbnails/20.jpg)
20Webtechnologien – WS 2018/19 - Teil 5/CSS II
Hintergrund I
• 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.
<Tag style="background-color: Farbe; background-image: url(url); background-attachment: Art;">
Tag {background-color: Farbe;
background-image: url(url);background-attachment: Art;
}
![Page 21: Webtechnologien Teil 5: Cascading Style Sheets (CSS) - Teil IIwi.f4.htw-berlin.de/users/messer/LV/WI-WT-WS18/Folien/WT-05/05-WT-CSS...Webtechnologien – WS 2018/19 - Teil 5/CSS II](https://reader030.fdocuments.net/reader030/viewer/2022041213/5e01207ea80d4641f740e449/html5/thumbnails/21.jpg)
21Webtechnologien – WS 2018/19 - Teil 5/CSS II
Hintergrund II
• 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 anSchlü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
<Tag style="background-repeat: Art; background-position: Position">
Tag {background-repeat: Art;
background-position: Position;}
![Page 22: Webtechnologien Teil 5: Cascading Style Sheets (CSS) - Teil IIwi.f4.htw-berlin.de/users/messer/LV/WI-WT-WS18/Folien/WT-05/05-WT-CSS...Webtechnologien – WS 2018/19 - Teil 5/CSS II](https://reader030.fdocuments.net/reader030/viewer/2022041213/5e01207ea80d4641f740e449/html5/thumbnails/22.jpg)
22Webtechnologien – WS 2018/19 - Teil 5/CSS II
Box-Modell I
margin-left
bord
er-
left
margin-right
bord
er-
right
margin-top
border-top
padding-top
margin-bottom
border-bottom
padding-bottom
heig
ht
width
Inhaltpadding-left padding-right
padding-top
padding-bottom
![Page 23: Webtechnologien Teil 5: Cascading Style Sheets (CSS) - Teil IIwi.f4.htw-berlin.de/users/messer/LV/WI-WT-WS18/Folien/WT-05/05-WT-CSS...Webtechnologien – WS 2018/19 - Teil 5/CSS II](https://reader030.fdocuments.net/reader030/viewer/2022041213/5e01207ea80d4641f740e449/html5/thumbnails/23.jpg)
23Webtechnologien – WS 2018/19 - Teil 5/CSS II
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).
![Page 24: Webtechnologien Teil 5: Cascading Style Sheets (CSS) - Teil IIwi.f4.htw-berlin.de/users/messer/LV/WI-WT-WS18/Folien/WT-05/05-WT-CSS...Webtechnologien – WS 2018/19 - Teil 5/CSS II](https://reader030.fdocuments.net/reader030/viewer/2022041213/5e01207ea80d4641f740e449/html5/thumbnails/24.jpg)
24Webtechnologien – WS 2018/19 - Teil 5/CSS II
Attribute von Bildern
• 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:
<img style="height: Höhe; width: Breite; " … … … >
img { height: Höhe; width: Breite; … weitere Attribute … }
#picture { height: 20px; width: 20px; }... <img id="picture" src="images/picture.gif">
![Page 25: Webtechnologien Teil 5: Cascading Style Sheets (CSS) - Teil IIwi.f4.htw-berlin.de/users/messer/LV/WI-WT-WS18/Folien/WT-05/05-WT-CSS...Webtechnologien – WS 2018/19 - Teil 5/CSS II](https://reader030.fdocuments.net/reader030/viewer/2022041213/5e01207ea80d4641f740e449/html5/thumbnails/25.jpg)
25Webtechnologien – WS 2018/19 - Teil 5/CSS II
Rahmen I
• Bei der Angabe der Rahmenbreite (border-width) sind Zahlenangaben oder Schlüsselwörter möglich: thin, medium, thick
<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;
}
![Page 26: Webtechnologien Teil 5: Cascading Style Sheets (CSS) - Teil IIwi.f4.htw-berlin.de/users/messer/LV/WI-WT-WS18/Folien/WT-05/05-WT-CSS...Webtechnologien – WS 2018/19 - Teil 5/CSS II](https://reader030.fdocuments.net/reader030/viewer/2022041213/5e01207ea80d4641f740e449/html5/thumbnails/26.jpg)
26Webtechnologien – WS 2018/19 - Teil 5/CSS II
Rahmen II
• 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
<Tag style="border-style: Art; border-color: Farbe; ">
Tag {border-style: Art;
border-color: Farbe; }
![Page 27: Webtechnologien Teil 5: Cascading Style Sheets (CSS) - Teil IIwi.f4.htw-berlin.de/users/messer/LV/WI-WT-WS18/Folien/WT-05/05-WT-CSS...Webtechnologien – WS 2018/19 - Teil 5/CSS II](https://reader030.fdocuments.net/reader030/viewer/2022041213/5e01207ea80d4641f740e449/html5/thumbnails/27.jpg)
27Webtechnologien – WS 2018/19 - Teil 5/CSS II
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>
![Page 28: Webtechnologien Teil 5: Cascading Style Sheets (CSS) - Teil IIwi.f4.htw-berlin.de/users/messer/LV/WI-WT-WS18/Folien/WT-05/05-WT-CSS...Webtechnologien – WS 2018/19 - Teil 5/CSS II](https://reader030.fdocuments.net/reader030/viewer/2022041213/5e01207ea80d4641f740e449/html5/thumbnails/28.jpg)
28Webtechnologien – WS 2018/19 - Teil 5/CSS II
Beispiel für Rahmenarten II
dashed gestrichelt
dotted gepunktet
double doppelt durchgezogen
groove 3D-Effekt wie ein Graben
inset 3D-Effekt (versenkt)
none unsichtbarer Rahmen
outset 3D-Effekt (herausragend)
ridge 3D-Effekt wie ein Hügel
Dies läuft sogar auf dem IE 8.0, allerdings sind die Farben nichtso schön.
![Page 29: Webtechnologien Teil 5: Cascading Style Sheets (CSS) - Teil IIwi.f4.htw-berlin.de/users/messer/LV/WI-WT-WS18/Folien/WT-05/05-WT-CSS...Webtechnologien – WS 2018/19 - Teil 5/CSS II](https://reader030.fdocuments.net/reader030/viewer/2022041213/5e01207ea80d4641f740e449/html5/thumbnails/29.jpg)
29Webtechnologien – WS 2018/19 - Teil 5/CSS II
<!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>
Beispiel - CSS-Knöpfe für arme Leute I
![Page 30: Webtechnologien Teil 5: Cascading Style Sheets (CSS) - Teil IIwi.f4.htw-berlin.de/users/messer/LV/WI-WT-WS18/Folien/WT-05/05-WT-CSS...Webtechnologien – WS 2018/19 - Teil 5/CSS II](https://reader030.fdocuments.net/reader030/viewer/2022041213/5e01207ea80d4641f740e449/html5/thumbnails/30.jpg)
30Webtechnologien – WS 2018/19 - Teil 5/CSS II
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.
![Page 31: Webtechnologien Teil 5: Cascading Style Sheets (CSS) - Teil IIwi.f4.htw-berlin.de/users/messer/LV/WI-WT-WS18/Folien/WT-05/05-WT-CSS...Webtechnologien – WS 2018/19 - Teil 5/CSS II](https://reader030.fdocuments.net/reader030/viewer/2022041213/5e01207ea80d4641f740e449/html5/thumbnails/31.jpg)
31Webtechnologien – WS 2018/19 - Teil 5/CSS II
<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;
}
Rahmen III
• Festlegung der Innenabstände zum Rahmen (Siehe Box-Modell)
• Siehe: http://www.w3schools.com/css/css_padding.asp
![Page 32: Webtechnologien Teil 5: Cascading Style Sheets (CSS) - Teil IIwi.f4.htw-berlin.de/users/messer/LV/WI-WT-WS18/Folien/WT-05/05-WT-CSS...Webtechnologien – WS 2018/19 - Teil 5/CSS II](https://reader030.fdocuments.net/reader030/viewer/2022041213/5e01207ea80d4641f740e449/html5/thumbnails/32.jpg)
32Webtechnologien – WS 2018/19 - Teil 5/CSS II
Rahmen IV
• 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
<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;}
![Page 33: Webtechnologien Teil 5: Cascading Style Sheets (CSS) - Teil IIwi.f4.htw-berlin.de/users/messer/LV/WI-WT-WS18/Folien/WT-05/05-WT-CSS...Webtechnologien – WS 2018/19 - Teil 5/CSS II](https://reader030.fdocuments.net/reader030/viewer/2022041213/5e01207ea80d4641f740e449/html5/thumbnails/33.jpg)
33Webtechnologien – WS 2018/19 - Teil 5/CSS II
Tabellen I - Beschriftung
<caption style="caption-side=Value;"> ... </caption>
Für Value gibt es folgende Möglichkeiten:
top Zentriert über der Tabelle
topleft Linksbündig über der Tabelle
topright Rechtsbündig über der Tabelle
bottom Zentriert unter der Tabelle
bottomleft Linksbündig unter der Tabelle
bottomright Rechtsbündig unter der Tabelle
![Page 34: Webtechnologien Teil 5: Cascading Style Sheets (CSS) - Teil IIwi.f4.htw-berlin.de/users/messer/LV/WI-WT-WS18/Folien/WT-05/05-WT-CSS...Webtechnologien – WS 2018/19 - Teil 5/CSS II](https://reader030.fdocuments.net/reader030/viewer/2022041213/5e01207ea80d4641f740e449/html5/thumbnails/34.jpg)
34Webtechnologien – WS 2018/19 - Teil 5/CSS II
Tabellen II
• 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.
...<style type="text/css">td { colspan: Value; }...</style>
<table ...>...<td style="rowspan: Value;">...</table>
![Page 35: Webtechnologien Teil 5: Cascading Style Sheets (CSS) - Teil IIwi.f4.htw-berlin.de/users/messer/LV/WI-WT-WS18/Folien/WT-05/05-WT-CSS...Webtechnologien – WS 2018/19 - Teil 5/CSS II](https://reader030.fdocuments.net/reader030/viewer/2022041213/5e01207ea80d4641f740e449/html5/thumbnails/35.jpg)
35Webtechnologien – WS 2018/19 - Teil 5/CSS II
Listen I
• 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)
...<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>
![Page 36: Webtechnologien Teil 5: Cascading Style Sheets (CSS) - Teil IIwi.f4.htw-berlin.de/users/messer/LV/WI-WT-WS18/Folien/WT-05/05-WT-CSS...Webtechnologien – WS 2018/19 - Teil 5/CSS II](https://reader030.fdocuments.net/reader030/viewer/2022041213/5e01207ea80d4641f740e449/html5/thumbnails/36.jpg)
36Webtechnologien – WS 2018/19 - Teil 5/CSS II
Listen II
• 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
<style type="text/css">li { list-style-image: url(url); }...</style>
<Tag style="list-style: ListeVonDefinitionenMitBlanks;">
Tag { list-style: ListeVonDefinitionenMitBlanks;
}
![Page 37: Webtechnologien Teil 5: Cascading Style Sheets (CSS) - Teil IIwi.f4.htw-berlin.de/users/messer/LV/WI-WT-WS18/Folien/WT-05/05-WT-CSS...Webtechnologien – WS 2018/19 - Teil 5/CSS II](https://reader030.fdocuments.net/reader030/viewer/2022041213/5e01207ea80d4641f740e449/html5/thumbnails/37.jpg)
37Webtechnologien – WS 2018/19 - Teil 5/CSS II
<!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>
Beispiele I
![Page 38: Webtechnologien Teil 5: Cascading Style Sheets (CSS) - Teil IIwi.f4.htw-berlin.de/users/messer/LV/WI-WT-WS18/Folien/WT-05/05-WT-CSS...Webtechnologien – WS 2018/19 - Teil 5/CSS II](https://reader030.fdocuments.net/reader030/viewer/2022041213/5e01207ea80d4641f740e449/html5/thumbnails/38.jpg)
38Webtechnologien – WS 2018/19 - Teil 5/CSS II
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>
![Page 39: Webtechnologien Teil 5: Cascading Style Sheets (CSS) - Teil IIwi.f4.htw-berlin.de/users/messer/LV/WI-WT-WS18/Folien/WT-05/05-WT-CSS...Webtechnologien – WS 2018/19 - Teil 5/CSS II](https://reader030.fdocuments.net/reader030/viewer/2022041213/5e01207ea80d4641f740e449/html5/thumbnails/39.jpg)
39Webtechnologien – WS 2018/19 - Teil 5/CSS II
Beispiele III
![Page 40: Webtechnologien Teil 5: Cascading Style Sheets (CSS) - Teil IIwi.f4.htw-berlin.de/users/messer/LV/WI-WT-WS18/Folien/WT-05/05-WT-CSS...Webtechnologien – WS 2018/19 - Teil 5/CSS II](https://reader030.fdocuments.net/reader030/viewer/2022041213/5e01207ea80d4641f740e449/html5/thumbnails/40.jpg)
40Webtechnologien – WS 2018/19 - Teil 5/CSS II
Float I
• 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
<div style="width: Val; height: Val; float: Art;">... Text ...
</div>
Es sind nicht alle sinnvollen Kombinationen von Attributen korrekt realisiert!
![Page 41: Webtechnologien Teil 5: Cascading Style Sheets (CSS) - Teil IIwi.f4.htw-berlin.de/users/messer/LV/WI-WT-WS18/Folien/WT-05/05-WT-CSS...Webtechnologien – WS 2018/19 - Teil 5/CSS II](https://reader030.fdocuments.net/reader030/viewer/2022041213/5e01207ea80d4641f740e449/html5/thumbnails/41.jpg)
41Webtechnologien – WS 2018/19 - Teil 5/CSS II
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 InhaltLorem 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>
![Page 42: Webtechnologien Teil 5: Cascading Style Sheets (CSS) - Teil IIwi.f4.htw-berlin.de/users/messer/LV/WI-WT-WS18/Folien/WT-05/05-WT-CSS...Webtechnologien – WS 2018/19 - Teil 5/CSS II](https://reader030.fdocuments.net/reader030/viewer/2022041213/5e01207ea80d4641f740e449/html5/thumbnails/42.jpg)
42Webtechnologien – WS 2018/19 - Teil 5/CSS II
Geschachtelte div I
CSS-Definitionen:
.relative { position: relative; width: ...; height: ...;} .absolute { position: absolute; top: 50px; right: 50px; width: 200px; height: 100px; ...}
Layer-Definitionen:
<div class="relative">... <div class="absolute">...</div></div>
absolute
Das innere Rechteck wird absolut relativzum umfassenden äußeren Rechteck positioniert.
![Page 43: Webtechnologien Teil 5: Cascading Style Sheets (CSS) - Teil IIwi.f4.htw-berlin.de/users/messer/LV/WI-WT-WS18/Folien/WT-05/05-WT-CSS...Webtechnologien – WS 2018/19 - Teil 5/CSS II](https://reader030.fdocuments.net/reader030/viewer/2022041213/5e01207ea80d4641f740e449/html5/thumbnails/43.jpg)
43Webtechnologien – WS 2018/19 - Teil 5/CSS II
Geschachtelte div II
• position : relativebedeutet, dass das Rechteck relativ zur Stelle, an der es von vornherein gekommen wäre, um die Werte top und left verschoben wird
• position : absolutebedeutet, 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 : fixedbedeutet, dass das Rechteck wie bei relative positioniert wird, aber beim Scrollen mitbewegt wird – es bleibt also immer sichtbar stehen.
![Page 44: Webtechnologien Teil 5: Cascading Style Sheets (CSS) - Teil IIwi.f4.htw-berlin.de/users/messer/LV/WI-WT-WS18/Folien/WT-05/05-WT-CSS...Webtechnologien – WS 2018/19 - Teil 5/CSS II](https://reader030.fdocuments.net/reader030/viewer/2022041213/5e01207ea80d4641f740e449/html5/thumbnails/44.jpg)
44Webtechnologien – WS 2018/19 - Teil 5/CSS II
Div mit Scrollbalken
Layer-Definition:
<div id="content">... ... ... </div>
CSS-Definition:
#content { width: ...; height: ...; overflow-y: auto; overflow-x: auto;}
![Page 45: Webtechnologien Teil 5: Cascading Style Sheets (CSS) - Teil IIwi.f4.htw-berlin.de/users/messer/LV/WI-WT-WS18/Folien/WT-05/05-WT-CSS...Webtechnologien – WS 2018/19 - Teil 5/CSS II](https://reader030.fdocuments.net/reader030/viewer/2022041213/5e01207ea80d4641f740e449/html5/thumbnails/45.jpg)
45Webtechnologien – WS 2018/19 - Teil 5/CSS II
Links
• 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.
<style type="text/css" media="screen"> a:link { Definitionen } a:visited { Definitionen } a:hover { Definitionen } a:active { Definitionen }
</style>
![Page 46: Webtechnologien Teil 5: Cascading Style Sheets (CSS) - Teil IIwi.f4.htw-berlin.de/users/messer/LV/WI-WT-WS18/Folien/WT-05/05-WT-CSS...Webtechnologien – WS 2018/19 - Teil 5/CSS II](https://reader030.fdocuments.net/reader030/viewer/2022041213/5e01207ea80d4641f740e449/html5/thumbnails/46.jpg)
46Webtechnologien – WS 2018/19 - Teil 5/CSS II
Formulare – Eingabefelder hervorheben
CSS-Definition:
input:focus { background-color: yellow;}
CSS-Definition:
input:focus:hover { background-color: green;}
Hat das Input-Feld den Fokus,wird der Hintergrund gelbgefärbt.
Hat das Input-Feld den Fokusund ist die Maus darüber,wird der Hintergrund grüngefärbt.
![Page 47: Webtechnologien Teil 5: Cascading Style Sheets (CSS) - Teil IIwi.f4.htw-berlin.de/users/messer/LV/WI-WT-WS18/Folien/WT-05/05-WT-CSS...Webtechnologien – WS 2018/19 - Teil 5/CSS II](https://reader030.fdocuments.net/reader030/viewer/2022041213/5e01207ea80d4641f740e449/html5/thumbnails/47.jpg)
47Webtechnologien – WS 2018/19 - Teil 5/CSS II
Formulare – Pflichtfelder hervorheben
CSS-Definition:
input[type="text"][required] { border: 2px solid red;}
CSS-Definition:
input[type="text"]:required { border: 2px solid red;}
Es wird ein neues Attributerfunden: required, das derKennzeichnung dient, dies istnicht xhtml-strict.
Dies geht nur in HTML5.
<p>Eingabe: <input type="text"/></p><p>Eingabe: <input type="text" required="required"/></p>
xhtml
![Page 48: Webtechnologien Teil 5: Cascading Style Sheets (CSS) - Teil IIwi.f4.htw-berlin.de/users/messer/LV/WI-WT-WS18/Folien/WT-05/05-WT-CSS...Webtechnologien – WS 2018/19 - Teil 5/CSS II](https://reader030.fdocuments.net/reader030/viewer/2022041213/5e01207ea80d4641f740e449/html5/thumbnails/48.jpg)
48Webtechnologien – WS 2018/19 - Teil 5/CSS II
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
![Page 49: Webtechnologien Teil 5: Cascading Style Sheets (CSS) - Teil IIwi.f4.htw-berlin.de/users/messer/LV/WI-WT-WS18/Folien/WT-05/05-WT-CSS...Webtechnologien – WS 2018/19 - Teil 5/CSS II](https://reader030.fdocuments.net/reader030/viewer/2022041213/5e01207ea80d4641f740e449/html5/thumbnails/49.jpg)
49Webtechnologien – WS 2018/19 - Teil 5/CSS II
Nach dieser Anstrengung etwas Entspannung...