7. hello world.
Los geht’s, wir erstellt mit dem heute angeeigneten Wissen eine Webseite
mit folgenden Kriterien:
Liste der persönliche Daten (Name, Adresse, E-Mail etc. Hobbies)
Foto von sich falls vorhanden, oder sonst ein Bild einer Person
Links zu den Seiten der Banknachbarn (links & rechts)
Nummerierte Link-Liste mit persönlichen Lieblingswebseiten
Externe CSS-Datei einbinden
Wichtige Tags: Modernes Webdesign Seite 194-208
9. CSS Einbinden
Inline: Sollte vermieden werden da schwer zu überschreiben und Trennung von
Inhalt und Design nicht gegeben.
<tag style=”eigenschaft1: wert1 wert2;” />
<h1 style=”color: #ff0000;”>Hallo Welt</h1>
Direkt im head-Tag: Sollte vermieden werden weil der weitere Aufbau der
Seite dadurch verzögert wird, bis das CSS geladen ist. Ausserdem ist die
Trennung von Design und Inhalt nicht gegeben.
<head>
<style type="text/css" media="screen">
h1 { color: #ff0000; }
</style>
</head>
10. CSS Einbinden
Im Head verlinken: Dies ist die beste Methode um CSS einzubinden da sie
Inhalt von Design trennt, und ausserdem auch Performance Vorteile hat –
Caching der Dateien, Weiterladen der Seite wärend das CSS geladen wird,
weniger Code als bei Inline Styles, usw.
<head>
<link type="text/css" rel="stylesheet" href="css/main.css" />
<link type="text/css" rel="stylesheet" href="css/forms.css" />
<link type="text/css" rel="stylesheet" href="css/print.css"
media= "print"/>
</head>
Tipp: Es können auch mehrere CSS-Dateien eingebunden werden. Sollten zwei
Rules in Konflikt miteinander geraten, wird diejenige aus dem zuletzt geladenen
File Anwendung finden.
Modernes Webdesign Kapitel 8.1 & 8.3
12. Selektoren
Es zählt jeweils die letzte Eigenschaft: Beispiel:
Element { ... } ul li { ... }
Klassen { ... } .wichtig { ... }
Pseudo-Klassen { ... } a:hover { ... }
ID’s { ... } #hauptmenu { ... }
Kombination:
tag#id tag.klasse tag { ... } ul#main li.wichtig a { ... }
Mehrere Selektoren:
selektor1, selektor2 { ... } h1, h2, .titel { ... }
Modernes Webdesign Seite 213 + 222
13. Eigenschaften & Werte
Mehrere CSS Eigenschaften können mittels ; separiert werden und dürfen
nacheinander auf einer Zeile stehen. CSS Ignoriert Leerzeichen zwischen
Eigenschaften. Die meisten Eigenschaften können einen oder mehrere Werte
haben:
border: 3px dotted blue;
color: red;
margin: 0px 12px 3em;
padding-right: 2%;
background: red url(verlauf.jpg) repeat-x top left;
overflow: hidden;
float: left;
font: italic normal bold 1em/1.5em Arial, sans-serif;
Modernes Webdesign Kapitel 8.2
14. Regeln der Kaskade
Wie geht nun der Browser vor, wenn er mit Konflikten durch mehrfach
Deklarationen umgehen muss?
1. Sortieren nach Ursprung
Modernes Webdesign Kapitel 8.3 und Seite 29-30
15. Regeln der Kaskade
Wie geht nun der Browser vor, wenn er mit Konflikten durch mehrfach
Deklarationen umgehen muss?
1. Sortieren nach Ursprung
Modernes Webdesign Kapitel 8.3 und Seite 29-30
16. Regeln der Kaskade
Wie geht nun der Browser vor, wenn er mit Konflikten durch mehrfach
Deklarationen umgehen muss?
Webseite
1. Sortieren nach Ursprung
Modernes Webdesign Kapitel 8.3 und Seite 29-30
17. Regeln der Kaskade
Wie geht nun der Browser vor, wenn er mit Konflikten durch mehrfach
Deklarationen umgehen muss?
1. Sortieren nach Ursprung & Wichtigkeit
2. Sortieren nach Spezifität
Modernes Webdesign Kapitel 8.3
18. Regeln der Kaskade
Wie geht nun der Browser vor, wenn er mit Konflikten durch mehrfach
Deklarationen umgehen muss?
1. Sortieren nach Ursprung & Wichtigkeit
2. Sortieren nach Spezifität
enu li { col or: blue; }
ul#m
ul li { colo r: yellow; }
li.box { co lor: red; }
#menu
lor: grey; }
l i.wichtig { co
li { colo r: black; }
Modernes Webdesign Kapitel 8.3
19. Gewichtung / Spezifität
Jeder Selektor hat eine gewisse Gewichtung die sich aus seiner
Zusammensetzung aus Tags, ID’s und Klassen ergibt. Für die Deklaration immer
die schwächst mögliche Form wählen damit sich Werte überschreiben lassen!
Tags = 1 Punkt
Klassen = 10 Punkte
ID’s = 100 Punkte
Inline-Styles = 1000 Punkte
!important =
8
Important wenn immer möglich
vermeiden!
Modernes Webdesign Kapitel 8.3
20. Gewichtung / Spezifität
Jeder Selektor hat eine gewisse Gewichtung die sich aus seiner
Zusammensetzung aus Tags, ID’s und Klassen ergibt. Für die Deklaration immer
die schwächst mögliche Form wählen damit sich Werte überschreiben lassen!
Tags = 1 Punkt
Klassen = 10 Punkte ul li = 2
ID’s = 100 Punkte li.wichtig = 11
Inline-Styles = 1000 Punkte ul#menu li.box a = 113
!important = u l#menu = 101
8
li a:hover = 12
Important wenn immer möglich
<p style=”. ..”></p> = 1000
vermeiden!
Modernes Webdesign Kapitel 8.3
21. Regeln der Kaskade
Wie geht nun der Browser vor, wenn er mit Konflikten durch mehrfach
Deklarationen umgehen muss?
1. Sortieren nach Ursprung & Wichtigkeit
2. Sortieren nach Spezifität
3. Sortieren nach Reihenfolge im CSS
Modernes Webdesign Kapitel 8.3
22. Regeln der Kaskade
Wie geht nun der Browser vor, wenn er mit Konflikten durch mehrfach
Deklarationen umgehen muss?
1. Sortieren nach Ursprung & Wichtigkeit
2. Sortieren nach Spezifität body {
3. Sortieren nach Reihenfolge im CSS color: red;
color: blue;
color: yellow;
}
Modernes Webdesign Kapitel 8.3
23. Überschreiben
Werte können sich überschreiben. Beispiel:
Dabei wird der letzte Wert welcher h2 {
einem Element zugeordnet wird border: 1px solid red ;
verwendet. border-color: blue;
Sich überschreibende Werte können }
auch an unterschiedlichen Stellen in der
CSS Datei, in einem anderen File, oder Der Rand ist blau.
sogar direkt im HTML stehen. Es ist
daher wichtig, eine gute Ordnung im
CSS zu behalten.
Modernes Webdesign Kapitel 8.3
24. CSS - Ordnung
Lies selbständig Kapitel 8.4 (Seite 219)
aus “Modernes Webdesign”. Falls Du
Fragen hast, löse diese mit deinem
Partner.
27. Das Box Model
Inhalt
Modernes Webdesign Kapitel 2.2.5
28. Das Box Model
width
Inhalt
Modernes Webdesign Kapitel 2.2.5
29. Das Box Model
width
Inhalt
height
Modernes Webdesign Kapitel 2.2.5
30. Das Box Model
width
Innenabstand
Inhalt
height
Modernes Webdesign Kapitel 2.2.5
31. Das Box Model
width border
Innenabstand
Inhalt
height
Modernes Webdesign Kapitel 2.2.5
32. Das Box Model
width border
Aussenabstand
Innenabstand
Inhalt
height
Modernes Webdesign Kapitel 2.2.5
33. Das Box Model
Aussenabstand Lorem ipsu
amet, cons
Innenabstand
adipiscing
Inhalt
Quisque ve
sagittis ac,
elementum
venenatis a
Done
Lorem ipsum dolor sit amet, consectetuer adipiscing
Quisque velit odio, sagittis ac, elementum ac, venen
34. Das Box Model
margin Lorem ipsu
amet, cons
adipiscing
Inhalt
Quisque ve
sagittis ac,
elementum
venenatis a
Done
Lorem ipsum dolor sit amet, consectetuer adipiscing
Quisque velit odio, sagittis ac, elementum ac, venen
35. Das Box Model
margin Lorem ipsu
amet, cons
adipiscing
Lorem ipsum dolor sit amet,
consectetuer adipiscing elit. Quisque ve
Quisque velit odio, sagittis ac, sagittis ac,
elementum
venenatis a
Done
Lorem ipsum dolor sit amet, consectetuer adipiscing
Quisque velit odio, sagittis ac, elementum ac, venen
36. Das Box Model
Lorem ipsu
amet, cons
adipiscing
Lorem ipsum dolor sit amet,
consectetuer adipiscing elit. Quisque ve
Quisque velit odio, sagittis ac, sagittis ac,
elementum
venenatis a
Done
Lorem ipsum dolor sit amet, consectetuer adipiscing
Quisque velit odio, sagittis ac, elementum ac, venen
37. Das Box Model... immer?
Lorem ipsu
amet, cons
adipiscing
Lorem ipsum dolor sit amet,
consectetuer adipiscing elit. Quisque ve
Quisque velit odio, sagittis ac, sagittis ac,
elementum
venenatis a
Done
Lorem ipsum dolor sit amet, consectetuer adipiscing
Quisque velit odio, sagittis ac, elementum ac, venen
38. Das Box Model... immer?
Lorem ipsu
amet, cons
adipiscing
Lorem ipsum dolor sit amet,
consectetuer adipiscing elit. Quisque ve
Quisque velit odio, sagittis ac, sagittis ac,
elementum
venenatis a
Done
Lorem ipsum dolor sit amet, consectetuer adipiscing
Quisque velit odio, sagittis ac, elementum ac, venen
39. Das Box Model... immer?
IN ! Lorem ipsu
E
amet, cons
N
adipiscing
Lorem ipsum dolor sit amet,
consectetuer adipiscing elit. Quisque ve
Quisque velit odio, sagittis ac, sagittis ac,
elementum
venenatis a
Done
Lorem ipsum dolor sit amet, consectetuer adipiscing
Quisque velit odio, sagittis ac, elementum ac, venen
40. Box Model Bug
width
margin
padding
Modernes Webdesign Kapitel 6.8.8
Normal
height
margin
padding
height
IE kleiner 7
65. Block vs. Inline
Block Elemente nehmen den ganzen Platz ein.
Modernes Webdesign Seite 69 - 75
66. Block vs. Inline
Block Elemente nehmen den ganzen Platz ein.
Auch wenn sie ihn nicht brauchen.
Modernes Webdesign Seite 69 - 75
67. Block vs. Inline
Block Elemente nehmen den ganzen Platz ein.
Auch wenn sie ihn nicht brauchen.
Inline sind sparsamer.
Modernes Webdesign Seite 69 - 75
68. Block vs. Inline
Block Elemente nehmen den ganzen Platz ein.
Auch wenn sie ihn nicht brauchen.
Inline sind sparsamer. Inline Elemente sind nur
so gross wie ihr Inhalt & brechen am Zeilenende um.
Modernes Webdesign Seite 69 - 75
69. Block vs. Inline
Block Elemente nehmen den ganzen Platz ein.
Auch wenn sie ihn nicht brauchen.
Inline sind sparsamer. Inline Elemente sind nur
so gross wie ihr Inhalt & brechen am Zeilenende um.
Block erzwingt immer einen Umbruch.
Modernes Webdesign Seite 69 - 75
70. Block vs. Inline
Block Elemente nehmen den ganzen Platz ein.
Auch wenn sie ihn nicht brauchen.
Inline sind sparsamer. Inline Elemente sind nur
so gross wie ihr Inhalt & brechen am Zeilenende um.
Block erzwingt immer einen Umbruch.
Selbst wenn etwas daneben Platz hätte.
Modernes Webdesign Seite 69 - 75