Transcript ppsx
Layout mit CSS
Angewandte Informatik
HMTL und CSS
Lerneinheit 2
HTML und CSS
Einbinden von CSS
Dreamweaver CS3
Das Box-Modell
HTML für Struktur
<h1>Grandhotel</h1>
<div>
<img src="lobby.jpg" /></div>
<div>Die Lobby</div>
<div>
<img src="lobby.jpg" /></div>
Selektoren
CSS für Design
h1 {
color:#FFFFFF;
background-color:#790000;
border: 2px solid white;
padding: 5px;
left:50px; right:50px;}
Folie 1/5
© Manz Verlag Schulbuch
Layout mit CSS
Angewandte Informatik
Einbinden von CSS
Element-Regel
Lerneinheit 2
HTML und CSS
Einbinden von CSS
Dreamweaver CS3
Das Box-Modell
Notierung direkt beim HTML-Tag
Regel gilt nur für ein HTML-Element
Dokument-Regel
Notierung im HEAD-Bereich
Regel gilt nur für eine HTML-Seite
Selektoren
Externe CSS-Datei
Einbindung im HEAD-Bereich
Regel gilt für viele Seiten
Folie 2/5
© Manz Verlag Schulbuch
<h1 style="color:red;">
Rote Überschrift
</h1>
<head>
<style type="text/css">
h1 {color: red;}
</style
</head>
HTML-Datei:
<head>
<link rel="stylesheet"
type="text/css"
href="styles.css">
</head>
CSS-Datei:
h1 {color: red;}
Layout mit CSS
Angewandte Informatik
Dreamweaver CS3
Lerneinheit 2
HTML und CSS
Einbindung von CSS
Dreamweaver CS3
Das Box-Modell
Selektoren
Folie 3/5
© Manz Verlag Schulbuch
Layout mit CSS
Angewandte Informatik
Das Box-Modell
Lerneinheit 2
HTML und CSS
Einbindung von CSS
Dreamweaver CS3
Das Box-Modell
Selektoren
Jedes HTML-Block-Element
erzeugt im Browserfenster einen
rechteckigen Bereich: die Box.
Für diese können
- Breite (width)
- Höhe (height)
- Innenabstand (padding)
- Außenabstand (margin)
- Rahmen (border)
definiert und formatiert werden.
Diese Eigenschaften können
getrennt für oben, rechts, unten
und links festgelegt werden.
Folie 4/5
© Manz Verlag Schulbuch
h1 {
width: 500px; height: 50px;
padding: 5px; margin: 10px;
border: 2px solid red;}
p {
padding-top: 20px;
padding-right: 5px;
padding-bottom: 10px;
padding-left: 15px;}
Layout mit CSS
Angewandte Informatik
Selektoren
Universalselektor
Lerneinheit 2
HTML und CSS
Einbinden von CSS
gilt für alle Elemente
Typ-Selektor
gilt für einen bestimmten Elementtyp
* { font-size: 12px; }
h1 { font-size: 12px; }
Dreamweaver CS3
Das Box-Modell
Selektoren
Class-Selektor
kann unabhängig von HTMLElementen definiert werden und ist
auf jedes HTML-Element anwendbar;
darf beliebig oft verwendet werden,
der Name ist frei wählbar
ID-Selektor
Kann unabhängig von HTMLElementen definiert werden;
darf auf einer HTML-Seite
nur einmal vorkommen,
der Name ist frei wählbar
Folie 5/5
© Manz Verlag Schulbuch
.klein { font-size: 8px; }
oder
h1.klein { font-size: 8px; }
<h1 class="klein">...</h1>
#nav { font-size: 8px; }
<div id="nav">
...
</div>