CSS Syntax // IT 07-10

XHTML & CSS
Lektionen 5-8

© 2009 by Noël Bossart

welcome.

« The internet,
it will never catch on. »
George W. Bush 1986

Ablauf heute
Hello World

XHTML Elemente kennenlernen
Pause

CSS Syntax

Box Model & Block vs. Inline

hello world.
Grundsätzlicher Aufbau:

<html />

Das <html> Tag umschliesst das gesamte Dokument
(ausser der Doctype Deﬁnition) und dient als absolutes
Elternelement (auch Root-Element). Es ist meist
unsichtbar.

hello world.

<html />
<head />
Das Head Element enthält grundlegende
Informationen zum Dokument wie Titel, Sprache,
Zusammenfassung und Links auf benötigte Dateien
wie CSS und JavaScript Files. Es ist unsichtbar.

hello world.

<html />
<head />

<body />
Der Body beinhaltet die eigentliche Seite mit allen
Inhalten. Es ist der sichtbare Bereich der Webseite.

HTML Grundelemente

<html />
<head />

<body />

Little Boxes Seite 43 - 46

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: Little Boxes Kapitel 3

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

Die wichtigsten HTML Elemente: Little Boxes Seite 51...

Block vs. Inline

Little Boxes Kapitel 3.4

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.


facelifting.
CSS Syntax

© 2009 by Noël Bossart Little Boxes Kapitel 11

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.


CSS Syntax - Aufbau
Aufbau Beispiel

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


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 { ... }


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;

Little Boxes Kapitel 5.5 + 5.6

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

Little Boxes Kapitel 10

Regeln der Kaskade

1. Sortieren nach Ursprung


Regeln der Kaskade

1. Sortieren nach Ursprung Webseite


Regeln der Kaskade

1. Sortieren nach Ursprung & Wichtigkeit

2. Sortieren nach Speziﬁtät

Little Boxes Seiten 118-120 + 202

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

Little Boxes Seiten 118-120 + 202

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

Little Boxes Seite 203

Regeln der Kaskade


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

Little Boxes Seite 203

Überschreiben
Werte können sich überschreiben. Beispiel:

Dabei wird der letzte Wert welcher h1, h2 {
einem Element zugeordnet wird border: 1px solid red ;
verwendet. }
Sich überschreibende Werte können
auch an unterschiedlichen Stellen in der h2 {
CSS Datei, in einem anderen File, oder border-color: blue;
sogar direkt im HTML stehen. Es ist
}
daher wichtig, eine gute Ordnung im
CSS zu behalten.
Der Rand ist blau.

Little Boxes Seite 197 - 206

CSS - Vererbung
Lies selbständig Kapitel 10.3-10.5
(Seite 204+) aus “Little Boxes”. Falls Du
Fragen hast, löse diese mit deinem
Partner.

ﬁnd it.
Sherlock Holmes


Sherlock Holmes
Verwende das Bild der Original-Seite als Vorlage und
vervollständige den Code.
Tipp: Beachte die CSS-Deklarationen um Hinweise zu
erhalten, welche HTML Elemente fehlen und welche
Klassen und ID’s sie haben.

homework
Übung zu CSS
Sherlock Holmes fertig machen

CSS Syntax // IT 07-10

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Andere mochten auch

Andere mochten auch (17)

CSS Syntax // IT 07-10

Hinweis der Redaktion