Titel: Vortrag zum Thema CSS

1. Was ist CSS?

• 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


Quelle: http://css.fractatulum.net/