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

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


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.


Farben II - Vordefinierte Bezeichnungen

Quelle: http://www.w3.org/TR/css3-color


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)


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>


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;

}


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


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


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;

}


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>


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;">


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;

}


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;

}


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;

}


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>


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.


Trennung in Texten

Verwendung des optionalen Trennzeichens (Soft Hyphen): oder

Beispiel

Das Dampfschiffkapitänleutnantpatent ist schwer zu erlangen.

Das Dampfschiffkapitänleutnantpatentist schwer zu erlangen.


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;}


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;

}


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;}


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


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).


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">


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;

}


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; }


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>


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.


<!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


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.


<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


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;}


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


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>


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>


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;

}


<!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


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>


Beispiele III


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!


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>


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.


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.


Div mit Scrollbalken

Layer-Definition:

<div id="content">... ... ... </div>

CSS-Definition:

#content { width: ...; height: ...; overflow-y: auto; overflow-x: auto;}


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>


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.


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


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


Nach dieser Anstrengung etwas Entspannung...

Documents

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