Einführung Programmierung
Werbung
Webdesign
CSS Grundlagen
(cascading style sheets)
Grundidee
Inhalt und Aussehen konsequent trennen
schlanker HTML-Code
Vorlagendatei
effiziente Wartung
Struktur:
inhalt.html
Aussehen:
format.css
I. Schaller KSWillisau - 2
Geschichte des CSS
CSS Version 1.0 entstand 1996
seit 1998 Version 2.0
Standardisierung beim W3C
(World Wide Web Konsortium)
interpretiert in:
Netscape 4.0 und höher
MS Internet Explorer 3.0 und höher
Firefox
Opera
I. Schaller KSWillisau - 3
Vorteile
nur eine Änderung für viele HTML-Dateien oder
ganze Website
punktgenaue Formatierung und Positionierung
schnelles laden und interpretieren durch den Browser
schlankere Browser für mobile-computing
verschiedene Vorlagen für unterschiedliche
Ausgabemedien:
screen, print, handheld, aural
keine x-fach verschachtelten Layouttabellen
keine Frames
verbesserter Zutritt für Behinderte
I. Schaller KSWillisau - 4
Regeln: Selektoren und Deklarationen
Style Sheets bestehen aus Regeln, d.h.
stilistischen Vorschriften für HTML-Elemente
Style Sheets sind mit HTML-Dateien
verknüpft
Aufbau einer Regel:
selektor { eigenschaft: wert; }
h1 { color: red; }
p { font-size: 13px; }
gruppierte Regeln:
h1, h2, h3 { font-weight: bold; }
h1 { color: red; text-align: center; }
I. Schaller KSWillisau - 5
drei CSS-Formatierungs Arten
Externe Definition in externer CSS Datei:
<head>
<link rel="stylesheet" type="text/css" href="format.css">
</head>
Interne Definition im STYLE-Tag im HEAD:
<head>
<style type="text/css">H2 {color: red;}</style>
</head>
Inline Definition am HTML-Element im BODY-Bereich:
<h2 type="text/css" style="color: red;">Titel 2 in rot</h2>
Rangfolge:
Nachfolgendes überschreibt Vorangegangenes
Definition am Element > Lokale Definition > externe
Datei
I. Schaller
KSWillisau - 6
CSS Struktur: Baum
Baumstruktur
(cascading)
HEAD
Nachkommen-Elemente erben die
Eigenschaften ihrer Vorfahren: z.B. gelten die
Schriftarten für alle Nachkommen von body
body {
font-family: verdana, geneva;
text-align: right;
}
Ausnahme, wenn Nachkommen spezifisch
deklariert:
p { text-align: left; }
I. Schaller KSWillisau - 7
CSS Struktur: Container
<body> Vorfahre von
<h1> und <div>
<h1> und <div>
Kinder von <body>
<h1>, <div>, <p>,
<b>, <i>, <img> und
<a> alles Nachkommen von <body>
I. Schaller KSWillisau - 8
XHTML
Extensible Hyper Text Markup Language
100% kompatibel zum XML-Dateiformat
Tagnamen, Attributnamen und Attributwerte klein
schreiben: <tr valign="top">...</tr>
Attributwerte stets in Anführungszeichen
alle Tags mit einem Endtag abschliessen
Leere Tags mit Leerschlag und Slash abschliessen:
<br />, <hr />
Tags <html>, <head> und <body> inkl. Endtag setzen
Dateierweiterung .xhtml
spezielle Einleitung im <head>-Bereich
I. Schaller KSWillisau - 9
