webtechnologien teil 5: cascading style sheets (css) - teil...
TRANSCRIPT
02.10.18 1Webtechnologien – WS 2018/19 - Teil 5/CSS II
Webtechnologien
Teil 5: Cascading Style Sheets (CSS) - Teil II
2Webtechnologien – WS 2018/19 - Teil 5/CSS II
Überblick
• Farben
• Text
• Box-Modell
• Rahmen
• Hintergrund
• Tabellen
• Layer mit div
• Verschiedene Effekte
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.
4Webtechnologien – WS 2018/19 - Teil 5/CSS II
Farben II - Vordefinierte Bezeichnungen
Quelle: http://www.w3.org/TR/css3-color
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)
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>
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;
}
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
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
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;
}
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>
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;">
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;
}
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;
}
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;
}
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>
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.
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.
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;}
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;
}
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;}
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
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).
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">
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;
}
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; }
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>
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.
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
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.
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
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;}
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
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>
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>
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;
}
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
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>
39Webtechnologien – WS 2018/19 - Teil 5/CSS II
Beispiele III
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!
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>
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.
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.
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;}
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>
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.
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
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
49Webtechnologien – WS 2018/19 - Teil 5/CSS II
Nach dieser Anstrengung etwas Entspannung...