====== CSS (Cascading Style Sheets) ====== ===== Vorteile von CSS ===== * Trennung von Inhalt und Layout möglich * Einfachere Wartung, Änderung in CSS-Datei gilt sofort für gesamte Website mit allen Unterseiten * Suchmaschinenoptimierung einfacher, da die Crawler den CSS-Code nicht lesen und sich somit ganz auf den Inhalt der Website konzentrieren können * Erleichterte Barrierefreiheit * Deutlich mehr Möglichkeiten zur Formatierung als mit (X)HTML ===== Schreibweise ===== Die Styleangaben werden als einfacher Text in einer .css-Datei gespeichert. Die Formatierung lautet dabei wie folgt: p, a { /*alle

und Elemente werden angesprochen Eigenschaften in geschwungener Klammer*/ color: red; /*Eigenschaft und Wert sind durch Doppelpunkt getrennt Doppelpunkt als Abschluss*/ background: white url(bild.png) fixed no-repeat top left; /*manche Eigenschaften lassen sich in einer Eigenschaft zusammenfassen*/ } ===== Einbindung in (X)HTML ===== ==== Externe Styles: Einbindung einer CSS-Datei im -Bereich ==== Die CSS-Eigenschaften werden in eine externe Datei ausgelagert. Diese Datei wird dann im -Bereich mit einem -Tag eingebunden. ==== Interne Styles: Definieren der CSS-Eigenschaften im -Bereich ==== Bei dieser Methode werden die CSS-Eigenschaften nicht ausgelagert, sondern direkt innerhalb eines style-Tags im -Bereich festgelegt. ==== Inline-Styles: CSS-Eigenschaften direkt im (X)HTML-Tag festlegen ==== Diese Methode eignet sich besonders, wenn es nur 1-2 CSS-Formatierung für die ganze Seite gibt. Dann wird die Eigenschaft direkt im Tag innerhalb eines style-Attributs festgelegt. Das ist ein Text. ===== Block- und Inlineelemente ===== (X)HTML-Elemente unterscheidet man in 2 Klassen: Block-Element und Inline-Elemente. Zwischen diesen beiden Typen gibt es Unterschiede in der Handhabung per CSS und den verfügbaren CSS-Eigenschaften. Die Unterschiede und Eigenschaften sind häufig auch von den Dokumenttyp-Definitionen abhängig. \\ Bei vielen Elementen kann man die Darstellung als Block-Element oder Inline-Element erzwingen, auch wenn es sich nicht um ein solches Element handelt. Dies funktioniert mit der Eigenschaft display. ==== Block-Elemente ==== * Starten in neuer Zeile und enden mit Zeilenumbruch * Folglich ist es ohne Einsatz von CSS nicht möglich, mehrere Block-Elemente nebeneinander darzustellen * Block-Elemente können Inline-Elemente und andere Block-Elemente beinhalten, manchmal auch nur Inline-Elemente (z.B.

…

- Absatz), nur Block-Elemente oder keine weiteren Elemente * Verwendung oft als Container, also übergeordnetes Element für andere Elemente Bestimmte wichtige Eigenschaften lassen sich nur auf Block-Elemente anwenden, wie z.B. //clear//, //text-align// oder //text-indent//(Einrückung). ==== Inline-Elemente ==== * Werden in der aktuellen Zeile (im Textfluss) dargestellt (
für Zeilenumbruch davor und danach notwendig) * Inline-Elemente können nur andere Inline-Elemente beinhalten, manchmal auch keine weiteren Elemente * Verwendungszweck sind für gewöhnlich Inhalte, die der Benutzer sieht, also Text, Bilder, Links, …