Warum CSS? - ERP
Werbung
Webdesign mit Cascading Style Sheets (CSS)
CSS-Workshop
Agenda
1
Was ist CSS?
2
Aufbau von CSS
3
Einfache Formatierungen
4
Das Box-Modell
5
Selektoren
6
Gruppierung mit <div> und <span>
7
Positionierung
8
Web-Standards und Validierung
2
© Elinor-Ostrom-Schule – Kay Patzwald, 2 Oktober 2015
1
Was ist CSS?
Design und Styling
n
Design
n
Styling
n
Webdesign
Auf der folgenden Seite finden Sie Informationen zu den oben genannten Begriffen.
http://jendryschik.de/wsdev/einfuehrung/css/
3
© Elinor-Ostrom-Schule – Kay Patzwald, 2 Oktober 2015
1
Was ist CSS?
Grundlagen
n
Werkzeug zum Layouten von Webseiten
o CSS definiert das Aussehen der HTML-Dokumente, z. B.:
–
–
–
–
–
o
Farben
Schriften
Hintergründe
Ränder
Positionierung von Elementen wie Bildern, Texten und Tabellen
HTML strukturiert den Text in Bereiche (Fußzeile, Kopfzeile, Navigation, Inhalt),
Absätze, Überschriften, Aufzählungen, Links, etc.
4
© Elinor-Ostrom-Schule – Kay Patzwald, 2 Oktober 2015
1
Was ist CSS?
Warum CSS?
n
Trennung von Inhalt und Layout
o übersichtlicher Code
o einheitliches Layout für die gesamte Website
o bessere Wartbarkeit und Erweiterbarkeit
n
Barrierefreiheit
o körperliche – Menschen mit körperlichen Einschränkungen
o technische – verschiedene Anzeigegeräte, Betriebssysteme, Browser
5
© Elinor-Ostrom-Schule – Kay Patzwald, 2 Oktober 2015
1
Was ist CSS?
Vorteile von CSS?
n
Kontrolle des Layouts von verschiedenen Webseiten über ein einziges StyleSheet
n
präzise Kontrolle über das Layout
n
mehr Layoutmöglichkeiten als mit HTML jemals möglich waren
n
verschiedene Layouts für unterschiedliche Ausgaben (Bildschirm, Drucker,
SmartPhone, Beamer)
n
dynamische Entwicklung: ständig neue Techniken (HTML5), teilweise aber auch
sehr anspruchsvoll
6
© Elinor-Ostrom-Schule – Kay Patzwald, 2 Oktober 2015
1
Was ist CSS?
Welche Programme benötigt man? (Wiederholung)
n
einen aktuellen Webbrowser (z. B. Safari, Firefox, Chrome, Opera oder IE 10)
o aktuelle Browser bieten für Webentwickler umfangreiche Tools, wie z. B.
–
–
–
–
Code-Inspektor (auch in 3D)
Performance-Tools
Fehlerprotokoll
Code kann direkt bearbeitet werden, um etwas „auszuprobieren“
n
einen einfachen Texteditor (z. B. TextEdit und TextWrangler auf dem Mac, NotePad++
unter Windows und fast jeder Editor unter Linux)
n
Empfehlung für Zuhause: Brackets von Adobe in Kombination mit Chrome
o als Erweiterung für Brackets: W3CValidation
n
WYSIWYG-Editoren wie Dreamweaver oder Frontpage mit den richtigen
Einstellungen
o auch Word ist ein einfacher WYSIWYG-Editor
7
© Elinor-Ostrom-Schule – Kay Patzwald, 2 Oktober 2015
Agenda
1
Was ist CSS?
2
Aufbau von CSS
3
Einfache Formatierungen
4
Das Box-Modell
5
Selektoren
6
Gruppierung mit <div> und <span>
7
Positionierung
8
Web-Standards und Validierung
8
© Elinor-Ostrom-Schule – Kay Patzwald, 2 Oktober 2015
2. Aufbau von CSS
CSS im HTML-Dokument verwenden – Methode 1: In-Line
<html>
<head>
<title>Example</title>
</head>
<body style="background-color: #FF0000;">
<p>Das ist eine rote Seite.</p>
</body>
</html>
Ø
Methode widerspricht den Vorteilen von CSS (insb. keine Trennung von Inhalt und
Layout)
Ø
Code wird schnell unübersichtlich
Ø
aber: gut zum Testen geeignet (später Code bereinigen, also CSS auslagern)
9
© Elinor-Ostrom-Schule – Kay Patzwald, 2 Oktober 2015
2. Aufbau von CSS
CSS im HTML-Dokument verwenden – Methode 2: In-Document
<html>
<head>
<title>Example</title>
<style type="text/css">
body {background-color: #FF0000;}
</style>
</head>
<body>
<p>Das ist eine rote Seite.</p>
</body>
</html>
Ø
Methode widerspricht ebenfalls den Vorteilen von CSS (insb. keine Trennung von
Inhalt und Layout)
Ø
gut zum Testen
10
© Elinor-Ostrom-Schule – Kay Patzwald, 2 Oktober 2015
2. Aufbau von CSS
CSS im HTML-Dokument verwenden – Methode 3: Verweis auf externes
Style Sheet
Ø
Verwendung einer externen Datei als Style-Sheet (hier: mit dem Namen layout.css)
Ø
Ein externes Style-Sheet ist eine normale Textdatei mit der Endung .css.
Ø
Die Datei sollte im gleichen Verzeichnis wie die HTML-Datei liegt (oder in einem
Unterordner).
<html>
<head>
<title>Mein Dokument</title>
<link rel="stylesheet" type="text/css"
href="layout.css" />
</head>
<body>
...
Ø
Zum Nachlesen: http://jendryschik.de/wsdev/einfuehrung/css/einbindung
11
© Elinor-Ostrom-Schule – Kay Patzwald, 2 Oktober 2015
2. Aufbau von CSS
Selektor
selector {
eigenschaft : wert;
}
Welchem HTML-Element
wird welche Eigenschaft
zugeordnet (z. B. body, h1,
p)?
Die Eigenschaft kann z. B. die
Hintergrundfarbe
(„background-color“) oder die
Schriftfarbe („color“) sein.
Der Wert der Eigenschaft
kann z. B. rot („#ff0000“) sein.
12
© Elinor-Ostrom-Schule – Kay Patzwald, 2 Oktober 2015
2. Aufbau von CSS
Eigenschaften kombinieren
selector {
eigenschaft1 : wert1;
eigenschaft2 : wert2;
...
}
Ø
Bitte formatieren Sie Ihr Style-Sheet wie oben dargestellt. Das erhöht die Lesbarkeit
und verhindert Fehler.
13
© Elinor-Ostrom-Schule – Kay Patzwald, 2 Oktober 2015
2. Aufbau von CSS
Beispiele
p {
color: red;
background-color: blue;
margin-left: 5px;
}
h1, p {
font-family: Helvetica, Arial, sansserif;
}
14
© Elinor-Ostrom-Schule – Kay Patzwald, 2 Oktober 2015
