1.1 Ziel der Arbeit
Ziel dieser Arbeit ist es, dem Leser einen Überblick über das Thema Cascading Style Sheets zu verschaffen. Diese Arbeit erhebt keinesfalls den Anspruch, vollständig oder erschöpfend zu sein, da der Umfang in keinem Fall ausreicht um das Thema Cascading Style Sheets umfassend zu behandeln. Sie soll dem interessierten Leser vertiefendes Material in Form von Internet - Links und Literaturhinweisen geben um das Thema selbst vertiefen zu können.
1.2 Aufbau dieser Arbeit
In Kapitel 1 erhält der Leser einen Überblick über die Ziele dieser Arbeit und über die geschichtliche Entwicklung von Cascading Style Sheets. Das 2. Kapitel stellt in einem kurzen Abriss dar, wie weit Cascading Style Sheets mit aktuellen und älteren Browsertypen und deren Versionen einsetzbar sind. Kapitel 3 befasst sich mit den Grundlagen von Cascading Style Sheets auf HTML Dokumente und zieht den Vergleich zu den Vorgehensweisen, die vor Cascading Style Sheets angewandt wurden. Im 4. Kapitel werden die Maßangaben innerhalb Cascading Style Sheets angesprochen und kurz erläutert. Im Kapitel 5 wird dann der praktische Einsatz von CSS erläutert. Im Anhang A befinden sich eine Kurzreferenz von Cascading Style Sheets.
Inhaltsverzeichnis
1 EINFÜHRUNG
1.1 ZIEL DER ARBEIT
1.2 AUFBAU DIESER ARBEIT
2 BROWSER UND CSS
3 CASCADING STYLE SHEETS - GRUNDLAGEN
3.1 TABELLEN ODER CASCADING STYLE SHEETS
3.2 SYNTAX VON CSS
3.3 SELEKTOREN VERWENDEN
3.3.1 Einfache Selektoren
3.3.2 Der Universelle Selektor
3.3.3 Klassenselektoren
3.3.4 ID Selektoren
3.3.5 Weitere Selektoren
3.4 FUNKTIONSWEISE VON CSS
3.5 EINBINDEN VON CSS IN HTML DOKUMENTE
3.5.1 Externe Style Sheets in HTML einbinden
3.5.2 Verwenden des STYLE-TAGS
3.5.3 Inline Stildefinitionen
3.6 VERERBUNG IN HTML
3.7 ZUSAMMENFASSUNG
4 MAßEINHEITEN UND WERTANGABEN
4.1 FARBANGABEN IN CSS
4.1.1 Angabe eines RGB Farbwertes
4.1.2 Angabe eines Hexadezimalen Farbwertes
4.2 LÄNGENEINHEITEN
4.2.1 Absolute Längeneinheiten
4.2.2 Relative Längeneinheiten
4.3 ZUSAMMENFASSUNG
5 CASCADING STYLE SHEETS – PRAKTISCHE ANWENDUNG
5.1 TEXTE FORMATIEREN
5.2 LAYOUT MIT CSS
6 ZUSAMMENFASSUNG
Zielsetzung & Themen
Das primäre Ziel dieser Arbeit ist es, dem Leser einen grundlegenden Überblick über Cascading Style Sheets (CSS) zu verschaffen und deren praktische Relevanz für die Gestaltung von Webseiten aufzuzeigen, ohne dabei einen Anspruch auf Vollständigkeit zu erheben.
- Grundlagen und Syntax von CSS
- Einsatz von verschiedenen Selektoren
- Integration von CSS in HTML-Dokumente
- Maßeinheiten und Farbangaben
- Praktische Anwendung für Textformatierung und Web-Layouts
Auszug aus dem Buch
3.1 Tabellen oder Cascading Style Sheets
In den ersten Versionen von HTML war es nicht vorgesehen, Inhalte von Webseiten zu gestalten und zu strukturieren2. Dies änderte sich mit einem Mal, als der Webbrowser Mosaic auf den Markt kam. Mit dieser Software war es zum ersten Mal möglich, Seiten im World Wide Web grafisch anzuzeigen. Es kam sehr schnell zu der Situation, dass Autoren von Websites ein Layout für eine Seite erstellten und versuchten, dem Benutzer die Änderung des Layouts nicht zu ermöglichen. Vor dem Erscheinen von CSS 1.0 und auch noch lange danach, wurde ein Layout einer Seite mit stark verschachtelten Tabellen, transparenten GIF Bildern oder Frames realisiert. Wer schon einmal eine Website mit mehrfach verschachtelten Tabellen versucht hat zu ändern der wird schnell bemerken, dass es nicht sehr komfortabel, geschweige denn zweckmäßig ist. Das gleiche gilt für den Einsatz von Frames. Auch die Methode, transparente GIF Bilder im Text einzusetzen, um eine Art „Pseudo-Formatierung“ zu erhalten ist erstens mit sehr viel Aufwand verbunden und kann bei Änderungen noch mehr Anpassungsaufwand bedeuten. Um die Problematik zu verdeutlichen, ist in Tabelle 1 dargestellt, wie Websites mit Tabellen formatiert werden können:
Zusammenfassung der Kapitel
1 EINFÜHRUNG: Dieses Kapitel definiert die Zielsetzung der Arbeit, den Umfang der Thematik und erläutert den weiteren Aufbau der Seminararbeit.
2 BROWSER UND CSS: Es wird die Wichtigkeit der Browser-Kompatibilität bei der Verwendung von CSS-Eigenschaften hervorgehoben und auf die herstellerabhängigen Unterschiede in der Unterstützung hingewiesen.
3 CASCADING STYLE SHEETS - GRUNDLAGEN: Dieses Kapitel erklärt die grundlegende Syntax, den Einsatz von Selektoren, die Funktionsweise der Spezifität, Methoden der Einbindung in HTML sowie die Vererbungshierarchien.
4 MAßEINHEITEN UND WERTANGABEN: Hier werden die verschiedenen Methoden für Farbangaben (RGB, Hexadezimal) sowie absolute und relative Längeneinheiten im Kontext von CSS detailliert behandelt.
5 CASCADING STYLE SHEETS – PRAKTISCHE ANWENDUNG: Das Kapitel veranschaulicht anhand konkreter Code-Beispiele, wie Texte formatiert und komplexe Layouts mithilfe von CSS umgesetzt werden können.
6 ZUSAMMENFASSUNG: Die Arbeit schließt mit einem kurzen Fazit und verweist auf weiterführende Themengebiete wie XML und barrierefreies Webdesign.
Schlüsselwörter
Cascading Style Sheets, CSS, HTML, Webdesign, Selektoren, Syntax, Spezifität, Kaskadierung, Layout, Webbrowser, Formatierung, Webstandards, Stylesheet, Internet Explorer, Webentwicklung.
Häufig gestellte Fragen
Worum geht es in dieser Arbeit?
Die Arbeit bietet eine Einführung in Cascading Style Sheets (CSS) und zeigt auf, wie diese zur Gestaltung und Strukturierung von Webseiten eingesetzt werden.
Was sind die zentralen Themenfelder?
Die Arbeit deckt die theoretischen Grundlagen, die Syntax, verschiedene Methoden der HTML-Einbindung, den Umgang mit Maßeinheiten und praktische Anwendungsbeispiele ab.
Was ist das primäre Ziel der Arbeit?
Das Ziel ist es, dem interessierten Einsteiger einen verständlichen Überblick über CSS zu verschaffen und Material für eine tiefergehende Beschäftigung mit dem Thema bereitzustellen.
Welche wissenschaftliche Methode wird verwendet?
Es handelt sich um eine einführende Literatur- und Theoriearbeit, die Konzepte anhand von Syntax-Beispielen und Vergleichsanalysen zu älteren Methoden (wie Tabellen-Layouts) erläutert.
Was wird im Hauptteil behandelt?
Der Hauptteil gliedert sich in die Bereiche Grundlagen, Einbindungsmethoden, Farbangaben und Maßeinheiten sowie eine praktische Anleitung zur Text- und Layoutgestaltung.
Welche Schlüsselwörter charakterisieren die Arbeit?
Zentrale Begriffe sind CSS, HTML, Webdesign, Selektoren, Kaskadierung, Layout und Webstandards.
Warum wird im Dokument der Vergleich zu Tabellen-Layouts gezogen?
Um die Vorteile von CSS bei der Pflege und Anpassung von Webseiten zu verdeutlichen und den hohen Wartungsaufwand veralteter "Pseudo-Formatierungen" aufzuzeigen.
Was ist der Kernbegriff bei der Verarbeitung von Stildefinitionen?
Der zentrale Begriff ist die "Spezifität", die vom Browser genutzt wird, um im Falle konkurrierender Stildefinitionen zu entscheiden, welche Regel Vorrang hat.
Welche Bedeutung haben die "At-Regeln" in CSS?
At-Regeln (wie @import oder @media) dienen der Erweiterbarkeit von CSS und ermöglichen es, Stylesheets für unterschiedliche Ausgabemedien wie Bildschirme oder Drucker zu definieren.
- Quote paper
- Fabian Schneider (Author), 2005, Eine Einführung in CSS, Munich, GRIN Verlag, https://www.grin.com/document/52060