p, a { /*alle
\\
===== 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.
\\
===== Vererbung =====
Vererbung heißt, dass Styleeigenschaften von einem Element an ein beliebiges in ihm enthaltenes Element weitergegeben werden. Oder einfacher: Die Eigenschaften eines Elements werden von dem übergeordneten bestimmt. \\
Eigenschaften werden jedoch nur vererbt sofern sie nicht überschrieben werden und es keinen Standardwert vom Browser gibt. \\
Man kann ein Element aber auch zwingen die Eigenschaft zu erben anstatt sie vom Browser zugewiesen zu bekommen. Dabei muss man der Eigenschaft lediglich den Wert inherit geben. \\
Eine Besonderheit bei der Vererbung gibt es bei der Vererbung von relativen Größen. Dann bezieht sich nämlich die Größe des untergeordneten Elements relativ auf das Übergeordnete.
Z.B. 0,8em • 0,8em = 0,64 des obersten Wertes
\\
===== 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 (
=== in CSS ===
#menueliste (auch möglich: ul#menueliste) {
/* CSS-Eigenschaften für Elemente mit ID menueliste */
}
.menuepunkt (auch möglich: li.menuepunkt) {
/* CSS-Eigenschaften für Elemente mit Klasse menuepunkt*/
}
\\
===== Kaskadierung =====
Stoßen mehrere Stylesheets aufeinander (z.B. die Standardeigenschaften vom Browser für Elemente wie h1 und Links zum einen, ein externes Stylesheet der Website und zusätzlich noch eine Inline-Styleangabe) so stellt sich die Frage, welche Eigenschaften sich durchsetzen, wenn 2 oder mehrere Stylesheets das Aussehen desselben Elements bestimmen wollen. Dabei gilt, dass sich die Eigenschaften durchsetzen die am nächsten zum Element stehen. \\
Folgende Hierarchie gibt es, umgesetzt wird immer die höchstmögliche Stufe in dieser Hierarchie:
* Default-Einstellungen des Browsers
* externe Stylesheets; werden mehrere externe Style Sheets mit einem Dokument verlinkt, haben im Konfliktfall die in der zuletzt eingelesenen CSS-Datei enthaltenen Anweisungen Vorrang
* eingebettete (im Dokumentskopf definierte) Style Sheets
* Inline-Stylevorgaben
Wie bereits bekannt, kann man mehrere (X)HTML-Elemente ineinander verschachteln und somit können durch die Vererbung einem Element verschiedene Werte für die gleiche CSS-Eigenschaft zugewiesen werden. Dabei gilt: Es setzt sich der Wert durch, der am spezifischten für das jeweilige Element ist, also sich auf das nächstliegende Element bezieht.
\\
===== Spezielle Selektoren - Pseudoklassen =====
Links können je nach aktuellem Zustand (bereits geöffnet – „visited“, mit Maus darüber – „hover“ etc.) verschieden formatiert werden. Mit CSS können alle Elemente über sogenannte Pseudoklassen angesprochen werden. \\
Dazu schreibt man einfach das Element gefolgt von einem Doppelpunkt und dem Zustand. Z.B. //a:visited {}// \\
Die wichtigsten Pseudoklassen sind:
^ Zustandsname ^ Erklärung ^
| link | Standard: Der Link wurde noch nicht aufgerufen, wird auch nicht mit der Maus berührt oder ähnliches |
| visited | Der Link wurde vom Besucher bereits aufgerufen, er ist im Verlauf des verwendeten Browsers |
| hover | Der Link wird mit der Maus gerade berührt |
| focus | Der Link hat aktuell den Fokus |
| active | Der Link wird gerade angeklickt, die Maustaste wurde aber noch nicht losgelassen |
\\
===== Browser-Weichen =====
Ein Problem, das bei neueren Browsern immer seltener auftritt, ist die unterschiedliche bzw. falsche Darstellung von CSS-Angaben bei alten Browsern (v.a. IE). Eine Möglichkeit browserspezifische Styles zu implementieren bieten Browser-Weichen.
Die CSS-Datei ieold.css wird nur in IE-Versionen vor Version 8 eingebunden.
\\
===== Medienspezifische CSS-Dateien =====
Es gibt die Möglichkeit, bestimmte CSS-Dateien nur für ein bestimmtes Ausgabemedium zu verwenden. Am wichtigsten ist hier wohl die Möglichkeit, für den Druck ein anderes Layout als für die normale Anzeige der Website zu verwenden. \\
Andere Medien sind z.B. Beamer („projection“), PDAs („handheld“) oder TV-Ähnliches („tv“). Im Normalfall bindet man eine CSS-Datei für alle ein und überschreibt dann mit weiteren medienspezifischen CSS-Dateien das Stylesheet für das betreffende Medium.
\\
===== Positionierung =====
==== Statische Positionierung ====
Die statische Positionierung ist die häufigst-angwendete und darum auch Standardpositionierung. Die Elemente werden damit im normalen Textfluss dargestellt.
==== Absolute Positionierung ====
Bei der absoluen Positionierung werden die Element aus dem Textfluss genommen, und an eine festgelegte Stelle gerückt. Dadurch können sich auch mehrere Elemente überlagern.
Angegeben wird wieder Positionierungstyp mit position: absolute, während die Position mit den Eigenschaften left: .., top: .., right: .. und bottom: .. festgelegt wird. Die Werte für diese Eigenschaften können beliebige Längenangaben mit allen bekannten Einheiten sein. Sie beziehen sich, wenn es kein übergeordnetes Element gibt, das selbst mit position: absolute; positioniert wird, auf das Browserfenster - ansonsten auf das übergeordnete Element (aber eben nur unter der Bedingung, das dieses übergeordnete Element selbst absolut positioniert ist!). Meist gibt man für left, top, right und bottom einen Wert mit der Einheit em an, weil sich das Design somit an die Schriftgröße es Benutzers anpasst.
Die Eigenschaften stehen immer für Abstände, also top: legt den Abstand vom obersten Rand des Browserfensters bzw. des übergeordneten Elements fest.
Man verwendet immer ENTWEDER top: .. ODER bottom: .. bzw. left: .. ODER right: ..
==== Relative Positionierung ====
Bei der relativen Positionierung wird ein Element relativ zu ihrem eigentlichen Platz bei statischer Positionierung positoniert. Dabei verändert sich die Position der umgebenden Elemente nicht. \\
Mit den zusätzlichen Eigenschaften //top//, //right//, //bottom// und //left// kann man das Element dann durch Längenangaben verschieben.