====== 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// und //float//, //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, … //vertical-align// ist wiederum eine Eigenschaft, die sich nur auf Inline-Elemente anwenden lässt. ==== DIV und SPAN ==== Die beiden HTML-Elemente
und haben besondere Bedeutung für Stylesheets. Der Grund ist, dass sie selber eigenschaftslos sind. Der einzige Unterschied besteht darin, dass das div-Element eine neue Zeile im Textfluss erzwingt (Block), während span innerhalb eines Textes verwendet werden kann und keinen neuen Absatz erzeugt (Inline). Unter Verwendung von div oder span ist es also möglich, beliebigen Textabschnitten Klassenstyles zuzuweisen. ===== IDs und Klassen ===== Zur Verknüpfung von CSS mit (X)HTML werden primär sogenannte Klassen und IDs verwendet, womit einzelne und Gruppen von Elementen gestaltet werden können. ==== IDs ==== * weist man einem einzigen Element im XHTML-Code zu, es darf nur einmal vorkommen und bestimmt ein Element somit eindeutig (was auch bei JavaScript wichtig ist). * werden im XHTML-Code mit dem Attribut id angegeben. * im CSS-Code werden sie mit dem Rautezeichen (#) angesteuert. * Verwendung z.B. für ein DIV, in dem der Footer der Website liegt - dieser kommt nur einmalig vor ==== Klassen ==== * werden bzw. können mehreren Elementen im XHTML-Code zugewiesen werden * werden im XHTML-Code mit dem Attribut class angegeben. * im CSS-Code werden sie mit einem Punkt (.) angesteuert * Verwendung z.B. für Überschriften, eine Überschrift des gleichen Ranges (z.B. h3) kann auf derselben Seite mehrmals vorkommen