4. Formatierung von HTML
Werbung
Webpublishing
Einführung in CSS
Inhalt
1.
2.
3.
4.
5.
Bedeutung
Einbinden von CSS
Klassen und IDs
Formatierung von HTML-Inhalten mit CSS
Layouten mit CSS
16.04.2015
SoSe15 Webpublishing – Einführung HTML und CSS
2 von 22
1. Bedeutung
16.04.2015
SoSe15 Webpublishing – Einführung HTML und CSS
3 von 22
1. Bedeutung
Einsatz von CSS:
●
●
Style: Änderung der Erscheinung von HTMLElementen (Textfarbe, - Größe, Schriftart, …)
Layout: Festlegen eins Gestaltungsrasters
(Abstände, Flussverhalten, Weite, Höhe, … )
16.04.2015
SoSe15 Webpublishing – Einführung HTML und CSS
4 von 22
2. Einbinden von CSS
Im Kopfbereich:
<head>
<style>
h1 { color: 0xFF0000; }
</style>
</head>
<body>
<h1>Stylen einer Überschrift</h1>
</body>
16.04.2015
SoSe15 Webpublishing – Einführung HTML und CSS
5 von 22
2. Einbinden von CSS
Am Tag:
<h2 style=“margin-left: 10px;“>Meine zweite
Überschrift</h2>
Als Datei im Kopfbereich:
<head>
<link rel="stylesheet" href="css/styles.css"
type="text/css">
</head>
16.04.2015
SoSe15 Webpublishing – Einführung HTML und CSS
6 von 22
Aufgabe
Legen Sie in Ihrem Projekt einen
Ordner „css“ mit einer leeren
Textdatei style.css an. Binden Sie
diese in Ihr Dokument ein und
gestalten Sie ihre Überschrift.
16.04.2015
CSS-Einbindung:
<head>
<link rel="stylesheet"
href="css/style.css"
type="text/css">
</head>
CSS-Datei:
h1 {
font-size: 30px;
color: #FF0000;
}
SoSe15 Webpublishing – Einführung HTML und CSS
7 von 22
3. Klassen und IDs
Bedeutung von Klassen und IDs
●
●
●
Erlaubt gleiche HTML-Elemente unterschiedlich zu
gestalten
IDs für Einzel-HTML-Elemente
Klassen für Gestaltung mehrerer Gruppen gleicher
HTML-Elemente, auch vererbbar
16.04.2015
SoSe15 Webpublishing – Einführung HTML und CSS
8 von 22
3. Klassen und IDs
Beispiel IDs (HTML):
<p>Das ist ein Flusstext</p>
<p id=“special“>Das ist ein besonderer Flusstext</p>
Beispiel IDs (CSS):
p {
color: #000000;
}
p #special {
color: #FF0000;
}
16.04.2015
SoSe15 Webpublishing – Einführung HTML und CSS
Hinweis:
IDs dürfen keine Umlaute,
Großbuchstaben oder
Leerzeichen enthalten!
9 von 22
3. Klassen und IDs
Beispiel Klassen (HTML):
<p>Das ist ein Flusstext</p>
<p class=“special“>Das ist ein besonderer
Flusstext</p>
Beispiel Klassen (CSS):
p {
color: #000000;
}
p .special {
color: #FF0000;
}
16.04.2015
SoSe15 Webpublishing – Einführung HTML und CSS
10 von 22
3. Klassen und IDs
HTML:
CSS:
<p>Das ist ein
Flusstext</p>
<p class=“special“>Das
ist ein besonderer
Flusstext</p>
<p class=“special
ultra“>Das ist ein ganz
besonderer
Flusstext</p>
p {
color: #000000;
}
p .special {
color: #FF0000;
}
p .ultra {
font-size: 20px;
}
Hinweis:
Klassen sind kombinierbar!
16.04.2015
SoSe15 Webpublishing – Einführung HTML und CSS
11 von 22
4. Formatierung von
HTML-Inhalten mit CSS
Wichtige Style-Befehle:
Befehl
font-size: 5px;
Beschreibung
color: #FF0000;
Schriftfarbe
background-color: #FFFF00;
Hintergrundfarbe
background-image:
url(„hdm.png“);
font-family:verdana, sansserif;
border: 1px;
Hintergrundbild
Border-color: #000000;
Rahmenfarbe
16.04.2015
SoSe15 Webpublishing – Einführung HTML und CSS
Schriftgröße
Schriftart
Rahmen
12 von 22
4. Formatierung von
HTML-Inhalten mit CSS
Wichtige Style-Befehle:
Befehl
Beschreibung
text-align: left; center;
right;
Ausrichtung: Linksbündig, Zentriert oder
Rechts
text-decoration: underline;
overline; line-through
Unterstrichen, Überstrichen,
Durchgestrichen
text-weight: normale; bold;
bolder; lighter;
Fett, Fetter, Dünner
font-style: normal; italic;
kursiv
word-spacing: 5px;
Wortabstand
letter-spacing: 5px;
Zeichenabstand
16.04.2015
SoSe15 Webpublishing – Einführung HTML und CSS
13 von 22
4. Formatierung von
HTML-Inhalten mit CSS
Wichtige Referenzen:
●
www.css4you.de
●
http://www.w3schools.com/css/
●
http://wiki.selfhtml.org/wiki/CSS
16.04.2015
SoSe15 Webpublishing – Einführung HTML und CSS
14 von 22
4. Formatierung von
HTML-Inhalten mit CSS
Schriftarten:
●
http://www.google.com/fonts
Einbettung:
●
<link href='http://fonts.googleapis.com/css?
family=Open+Sans' rel='stylesheet' type='text/css'>
CSS:
●
h1 { font-family: 'Open Sans', Arial, serif;
font-weight: 400; }
16.04.2015
SoSe15 Webpublishing – Einführung HTML und CSS
15 von 22
Aufgabe
Stylen Sie ihr Dokument unter Verwendung von IDs und Klassen. Formatieren Sie den
Text sinnvoll, ändern Sie ggf. das Textbeispiel.
Arbeiten Sie mit einer der Referenzen:
●
www.css4you.de
●
http://www.w3schools.com/css/
●
http://wiki.selfhtml.org/wiki/CSS
16.04.2015
SoSe15 Webpublishing – Einführung HTML und CSS
16 von 22
5. Layouten mit CSS
Layouten durch:
●
Boxing
●
Größe
●
Abstände
●
Flussverhalten
16.04.2015
SoSe15 Webpublishing – Einführung HTML und CSS
17 von 22
5. Layouten mit CSS
<div id=“wrapper“></div>
Boxing
●
Aufteilen der Seite in
ein Gestaltungsraster
mittels DIV-Tags
<div id=“header“></div>
<div id=“nav“>
<div id=“content“>
</div>
</div>
<div id=“footer“></div>
16.04.2015
SoSe15 Webpublishing – Einführung HTML und CSS
18 von 22
5. Layouten mit CSS
Größe
●
width: 200px; 100%;
Weite
●
height: 200px; 100%;
Höhe
●
min-width: 200px;
Minimale Weite
●
min-height: 200px;
Minimale Höhe
16.04.2015
SoSe15 Webpublishing – Einführung HTML und CSS
19 von 22
5. Layouten mit CSS
Abstände
●
Außenabstand: margin
●
Innenabstand: padding
●
Variationen: -left;
-right; -top; -bottom;
Quelle: http://wiki.selfhtml.org/wiki/CSS/Box-Modell, 12.04.2015
16.04.2015
SoSe15 Webpublishing – Einführung HTML und CSS
20 von 22
5. Layouten mit CSS
Flußverhalten
●
float: left; right;
●
clear: both;
Quelle: http://www.elmastudio.de/wp-content/uploads/2010/12/css-floats-01.jpg, 2.04.2015
16.04.2015
SoSe15 Webpublishing – Einführung HTML und CSS
21 von 22
Aufgabe
Layouten Sie ihre Seite als sogenannten Onepager (Eine lange Seite zum scrollen mit
mehreren Inhaltsbereichen und einer Navigation).
Teilen Sie dazu Ihren Inhalt sinnvoll in div-Tags auf und arbeiten sie mit dem floatBefehl. Legen Sie dazu eine separate css/layout.css-Datei an, binden Sie diese in Ihr
Dokument ein, um dort nur Flussverhalten, Abstände und Weiten zu formatieren.
Stylen Sie den Text sinnvoll, ändern Sie ggf. das Textbeispiel. Arbeiten Sie bei der
Navigation innerhalb der Seite mit Ankern.
16.04.2015
SoSe15 Webpublishing – Einführung HTML und CSS
22 von 22
