Die Präsentation wird geladen. Bitte warten

Die Präsentation wird geladen. Bitte warten

© Manz Verlag Schulbuch Folie 1/5 Layout mit CSSAngewandte Informatik HMTL und CSS Lerneinheit 2 Grandhotel Die Lobby HTML für Struktur HTML und CSS Einbinden.

Ähnliche Präsentationen


Präsentation zum Thema: "© Manz Verlag Schulbuch Folie 1/5 Layout mit CSSAngewandte Informatik HMTL und CSS Lerneinheit 2 Grandhotel Die Lobby HTML für Struktur HTML und CSS Einbinden."—  Präsentation transkript:

1 © Manz Verlag Schulbuch Folie 1/5 Layout mit CSSAngewandte Informatik HMTL und CSS Lerneinheit 2 Grandhotel Die Lobby HTML für Struktur HTML und CSS Einbinden von CSS Dreamweaver CS3 Das Box-Modell Selektoren h1 { color:#FFFFFF; background-color:#790000; border: 2px solid white; padding: 5px; left:50px; right:50px;} CSS für Design

2 © Manz Verlag Schulbuch Folie 2/5 Layout mit CSSAngewandte Informatik Einbinden von CSS Lerneinheit 2 HTML und CSS Einbinden von CSS Dreamweaver CS3 Das Box-Modell Selektoren Element-Regel 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 Externe CSS-Datei Einbindung im HEAD-Bereich Regel gilt für viele Seiten Rote Überschrift h1 {color: red;} </style HTML-Datei: <link rel="stylesheet" type="text/css" href="styles.css"> CSS-Datei: h1 {color: red;}

3 © Manz Verlag Schulbuch Folie 3/5 Layout mit CSSAngewandte Informatik Dreamweaver CS3 Lerneinheit 2 HTML und CSS Einbindung von CSS Dreamweaver CS3 Das Box-Modell Selektoren

4 © Manz Verlag Schulbuch Folie 4/5 Layout mit CSSAngewandte 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. 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;} Diese Eigenschaften können getrennt für oben, rechts, unten und links festgelegt werden.

5 © Manz Verlag Schulbuch Folie 5/5 Layout mit CSSAngewandte Informatik Selektoren Lerneinheit 2 HTML und CSS Einbinden von CSS Dreamweaver CS3 Das Box-Modell Selektoren Universalselektor gilt für alle Elemente Typ-Selektor gilt für einen bestimmten Elementtyp Class-Selektor kann unabhängig von HTML- Elementen definiert werden und ist auf jedes HTML-Element anwendbar; darf beliebig oft verwendet werden, der Name ist frei wählbar * { font-size: 12px; } ID-Selektor Kann unabhängig von HTML- Elementen definiert werden; darf auf einer HTML-Seite nur einmal vorkommen, der Name ist frei wählbar h1 { font-size: 12px; }.klein { font-size: 8px; } oder h1.klein { font-size: 8px; }... #nav { font-size: 8px; }...


Herunterladen ppt "© Manz Verlag Schulbuch Folie 1/5 Layout mit CSSAngewandte Informatik HMTL und CSS Lerneinheit 2 Grandhotel Die Lobby HTML für Struktur HTML und CSS Einbinden."

Ähnliche Präsentationen


Google-Anzeigen