• CSS heißt ausgesprochen Cascading Style Sheets
• ist eine Sprache um Websites zu formatieren
• CSS greift auf Sprachelemente von HTML zu und verleiht ihnen gewünschte Darstellungsmerkmale
• diese können für die ganze Seite gelten oder nur für einen Tag
• CSS vereinfacht die Gestaltung von Websites
• es gibt verschiedene Gruppen von Elementen
• als Beispiel 3 Gruppen mit je 2 Beispielen
o Allgemeine Angaben
Hintergrundfarbe
background-color:black;
Hintergrundbild
background-image:url(bild.jpg);
o Elemente zur Textformatierung
Schriftart
font-family:arial;
Schriftgröße (gängige Einheiten – px, %, em)
font-size:12px;
o Elemente zur Ausrichtung und Positionierung
Festlegen eines Außenabstandes (gängige Einheiten - %, auto, px, em)
margin: 15px;
margin-top: 15px;
margin-bottom: 15px;
margin-left: 15px;
margin-right: 15px;
Festlegen des Innenabstandes
padding: 10px;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 10px;
padding-right: 10px;
2. Was sind die Vorteile bei der Erstellung von Websites mit CSS?
• Effektivität
o Formatierung in einer einzelnen Datei
o alle Formatierungen können in einer einzelnen Datei festgelegt werden
o eine Datei für jede Seite der Homepage
• Kosten- und Zeitersparung
o Senkung des Datentransfers und Speicherplatzersparnis
HTML-Anweisungen werden auf Texte, Links und Bilder beschränkt
• kürzerer Quelltext
Formatierung der einzelnen Elemente nicht mehr in der HTML-Datei sondern in der CSS-Datei
o Arbeits- und Erstellungszeitersparnis
Änderung der Formatierung geschieht in der CSS-Datei
• damit sind nur wenige Handgriffe nötig um Layouts oder einzelne Formatierungen zu ändern
• ohne separate CSS-Datei bzw. Block Style müsste man jedes Element das geändert werden soll einzeln ändern und das auf jeder Seite
3. Was kann CSS...
• ... was HTML nicht kann?
o Formate für verschiedene Ausgabemedien
Drucklayout
Layout für Kleincomputer wie PDAs
Sprachausgabe der Site (z.B. für Blinde)
o Style Switcher
Änderung des Layouts mit einem Mausklick
Damit kann der User sich das Layout aussuchen, was ihm persönlich am besten gefällt
o Komplexere Layouts durch die Benutzung von Boxen
o Formatierungen sind möglich, die mit reinem HTML entweder gar nicht oder nur über Umwege möglich sind
z.B. Schriftgröße kann x-beliebig vergrößert werden
in HTML ist die größte Überschrift H1
4. Wie verknüpft man HTML und CSS?
Direktformatierung des HTML-Dokuments (Inline Style)
• innerhalb des HTML-Tags mit dem Attribute style
• Schema:
style=”css-Element: Wertangabe;”
• Beispiel:
Hallo
• nach diesem Schema können alle HTML-Elemente formatiert werden (z.B. table, p, td usw.)
• wenn mitten im Wort oder Satz, dann benutzt man das Element
• Beispiel:
Bedecke deinen Himmel Zeus
mit Wolkendunst
und übe dem Knaben gleich…
• so sieht es im Browser aus:
Bedecke deinen Himmel Zeus
Mit Wolkendunst
Und übe dem Knaben gleich…
• das Element ersetzt das Element, dass zwar noch häufig verwendet wird, aber auf der „Abschussliste“ steht
Formatierung einer kompletten HTML-Datei (Block Style)
• alle Formatierungen für die aktuelle Seite werden in den Bereich geschrieben
• Schema:
Selektor {css-Element:Wertangabe; }
• Beispiel:
• Formatierungen gelten für die ganze Seite
• die einzelnen HTML-Elemente müssen nicht mehr separat formatiert werden
• .CLASSname
o stellt eine Klasse dar, die verschiedenen Elementen innerhalb der Seite zugewiesen werden kann
o z.B. wird ein
Element anders formatiert als alle anderen
o Klassen dürfen mehrmals im Dokument vorkommen
• ID’s (#IDname)
o dürfen nur einmal im Dokument vorkommen dürfen
o Definiert ein ganz spezielles Element in der Seite eindeutig
Zuweisen von Klassen und ID’s:
Die Sonne scheint
Die Sonne scheint immer noch
• Inline Style ist ranghöher als der Block Style, also überlagert ein eventuelles Inline Style den Block Style für diese Element
Separate CSS-Datei
• Stylesheetsangaben genauso geschrieben wie im Block Style, aber nicht in die HTML-Datei, sondern in eine CSS Datei geschrieben (Textdatei mit der Erweiterung „css“)
• eine Datei mit allen Formatierungen für alle Seiten
• es kann das komplette Layout in der Datei festgelegt werden
• schnelle Änderung der Formatierung oder des Layouts aller Seiten durch Veränderungen in der CSS-Datei
• die Datei muss in alle Seiten angebunden werden
• man kann mehrere CSS-Dateien einbinden
• 2 Möglichkeiten
o Möglichkeit 1
o Möglichkeit 2
o @import
o @media
• @import und @media müssen nicht unbedingt als Blockstyle in den der HTML-Datei geschrieben werden
• können auch in die CSS-Datei geschrieben werden (ohne das
• Style-Angaben beeinflussen sich gegenseitig
o falsche Reihenfolge der Anker-Pseudo-Klassen
Reihenfolge muss eingehalten werden, damit sich die Pseudo-Klassen nicht überlagern
A:link { color: red } /* noch nicht besuchter Link */
A:visited { color: blue } /* schon besuchter Link */
A:hover { color: yellow } /* Benutzer ‘hovert’ */
A:active { color: lime } /* Link wird angewählt */
o Auslassen von generischen Schriftfamilien
man sollte immer eine der generischen Schriftfamilien (fantasy, cursive, monospace, sans-serif oder serif) als letzte Alternative angeben um dem Browser bessere Wahlmöglichkeiten zu lassen, wenn die anderen Schriftarten auf dem PC nicht zu finden sind
H2 { font-family: Arial, Helvetica, Geneva, sans-serif }
o Anführungszeichen in CSS
in HTML müssen hexadezimale Farbangaben in Anführungszeichen gesetzt werden
das darf man in CSS nicht
H1 { color: #808000 }
Schriftarten die Leerzeichen im Namen tragen, sollten immer in Anführungszeichen gesetzt werden
H1 { font-family: “Times New Roman“, “Comic Sans MS”, sans-serif }
6. Wie bastelt man Layouts mit CSS?
• Layout mit Boxen/Layer
o Die meisten Layouts für Websites sind auf Tabellen aufgebaut
o Netscape hat die Layer erfunden (Layer sind ähnlich den Boxen)
aber nur Netscape (ab Version 4.0) können die Layer interpretieren
o mit CSS gibt es eine neue Möglichkeit Layouts zu erstellen – Boxen
Können von allen Browsern interpretiert werden
o was sind Boxen?
Boxen sind eine Möglichkeit des absoluten Positionierens
Mit Boxen können Elemente angeordnet und ausgerichtet werden
Beispiele:
• drei Boxen, eine oben, zwei darunter nebeneinander, flexibel
• zwei Boxen, flexibel, überlappend, nebeneinander
• drei Boxen, zwei übereinander, eine links, flexibel
• sieben Boxen, drei kleine oben und unten nebeneinander, eine zentrale große Box
• vier
Bereiche mit fester Breite
o Was sind die Vorteile von Boxen?
Mit Tabellen ist die Strukturierung einer Website sehr eingeschränkt und meist nur mit Verschachtelungen zu bewerkstelligen, was sehr undurchsichtig ist
• Umso mehr eine Tabelle verschachtelt ist, desto höher ist die Gefahr
