CSS Basics and Box Model // MM 08-11

XHTML & CSS
Lektionen 9-12

© 2009 by Noël Bossart

welcome.
« The time is always
right to do what’s right. »
Martin Luther King 1964

© 2009 by Noël Bossart

Ablauf heute
Hello World

CSS Syntax
Pause

CSS Syntax

Box Model & Block vs. Inline

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

facelifting.
CSS Syntax

© 2009 by Noël Bossart Modernes Webdesign Seite 213+

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>

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 Konﬂikt miteinander geraten, wird diejenige aus dem zuletzt geladenen
File Anwendung ﬁnden.

Modernes Webdesign Kapitel 8.1 & 8.3

CSS Syntax - Aufbau
Aufbau Beispiel

selektor { ul li.wichtig {
eigenschaft1: wert1 wert2; font-weight: bold;
eigenschaft2: wert1 wert2 wert3; border: 1px solid #f5a5e6;
} }

Modernes Webdesign Kapitel 8

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

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;
overﬂow: hidden;
ﬂoat: left;
font: italic normal bold 1em/1.5em Arial, sans-serif;

Modernes Webdesign Kapitel 8.2

Regeln der Kaskade
Wie geht nun der Browser vor, wenn er mit Konﬂikten durch mehrfach
Deklarationen umgehen muss?

1. Sortieren nach Ursprung

Modernes Webdesign Kapitel 8.3 und Seite 29-30

Regeln der Kaskade
Webseite
1. Sortieren nach Ursprung

Modernes Webdesign Kapitel 8.3 und Seite 29-30

Regeln der Kaskade

1. Sortieren nach Ursprung & Wichtigkeit

2. Sortieren nach Speziﬁtät


Regeln der Kaskade


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


Gewichtung / Speziﬁtä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!


Gewichtung / Speziﬁtä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!


Regeln der Kaskade



3. Sortieren nach Reihenfolge im CSS


Regeln der Kaskade


2. Sortieren nach Speziﬁtät body {
3. Sortieren nach Reihenfolge im CSS color: red;
color: blue;
color: yellow;
}


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


CSS - Ordnung
Lies selbständig Kapitel 8.4 (Seite 219)
aus “Modernes Webdesign”. Falls Du
Fragen hast, löse diese mit deinem
Partner.

Das Box Model

Modernes Webdesign Kapitel 2.2.5

Das Box Model

Inhalt


Das Box Model
width

Inhalt


Das Box Model
width

Inhalt

height

Das Box Model
width

Innenabstand
Inhalt

height

Das Box Model
width border

Innenabstand
Inhalt

height

Das Box Model
width border

Aussenabstand
Innenabstand
Inhalt

height

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

Das Box Model

margin Lorem ipsu
amet, cons
adipiscing
Inhalt
Quisque ve
sagittis ac,
elementum
venenatis a
Done

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

Das Box Model

Lorem ipsu
amet, cons
adipiscing
elementum
venenatis a
Done

Das Box Model... immer?

Lorem ipsu
amet, cons
adipiscing
elementum
venenatis a
Done

Das Box Model... immer?

IN ! Lorem ipsu

E
amet, cons

N
adipiscing
elementum
venenatis a
Done

Box Model Bug
width

margin

padding

Normal

height
margin

padding

height
IE kleiner 7

CSS Notation
margin: ;
margin
padding: ; padding
object

CSS Notation
margin: ; top
margin
padding: ; padding

left object
right

bottom

CSS Notation
margin: 10px ; top
margin
padding: 10px ; padding

left object
right

bottom

CSS Notation
margin-right: ;
margin
padding-left: ; padding
object

CSS Notation
margin-right: 0 ;
margin
padding-left: ; padding
object
right

CSS Notation
margin-right: 0 ;
margin
padding-left: 0 ; padding

left object
right

Short Notation
margin: ;
margin
padding: ; padding
object

Short Notation
margin: ; top
margin
padding: ; padding
object

bottom

Short Notation
margin: 10px ; top
margin
object

bottom

Short Notation
margin: 10px ; top
margin

left object
right

bottom

Short Notation
margin: 10px 0 ; top
margin
padding: 10px 0 ; padding

left object
right

bottom

Short Notation
margin: 10px 0 ; ➊
margin
top

left object
right

bottom

Short Notation
margin: 10px 0 ; ➊
margin
top

➋ left object
right

bottom

CSS Notation
margin: ;

margin

padding
object

CSS Notation
margin: 10px ;

top
margin

padding
object

CSS Notation
margin: 10px 0 ;

top
margin

padding
object
right

CSS Notation
margin: 10px 0 20px ;

top
margin

padding
object
right

bottom

CSS Notation
margin: 10px 0 20px 5px ;

top
margin

padding
object
left right

bottom

CSS Notation
margin: 10px 0 20px 5px ;

top

left right

bottom

CSS Notation
padding: ;

margin

padding
object

Modernes Webdesign Seite 220+221

CSS Notation
padding: 10px 5px 15px 5px ;

top
margin

padding
object
left right

bottom

CSS Notation
padding: 10px 5px 15px 5px ;

top

left right

bottom

Block vs. Inline

Modernes Webdesign Seite 69 - 75

Block vs. Inline
Block Elemente nehmen den ganzen Platz ein.


Block vs. Inline

Auch wenn sie ihn nicht brauchen.


Block vs. Inline


Inline sind sparsamer.


Block vs. Inline


Inline sind sparsamer. Inline Elemente sind nur

so gross wie ihr Inhalt & brechen am Zeilenende um.


Block vs. Inline




Block erzwingt immer einen Umbruch.


Block vs. Inline




Block erzwingt immer einen Umbruch.

Selbst wenn etwas daneben Platz hätte.


homework
Aufgaben in den Unterlagen lösen
Hello World mit DIV und margin/padding/border
anreichern

Ressourcen public.me.com/noelboss

Links delicious.com/noelboss+zbw

Link Feed feeds.delicious.com/rss/noelboss/zbw

Fragen & Feedback noel.zbw@me.com

more.

CSS Basics and Box Model // MM 08-11

Weitere ähnliche Inhalte

Andere mochten auch

Ähnlich wie CSS Basics and Box Model // MM 08-11

CSS Basics and Box Model // MM 08-11

Hinweis der Redaktion