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 |
\\ [[http://de.wikipedia.org/wiki/Cascading_Style_Sheets#Selektoren|Weitere Selektoren (Wikipedia)]]
\\
===== 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 style_IE8.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 Elemente aus dem Textfluss genommen, und an eine festgelegte Stelle gerückt. Dadurch können sich auch mehrere Elemente überlagern.
Mit den zusätzlichen Eigenschaften //top//, //right//, //bottom// und //left// kann man das Element dann durch Längenangaben verschieben. 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 absolut positioniert ist, auf das Browserfenster. Meist gibt man einen Wert mit der Einheit em an, weil sich das Design somit an die Schriftgröße des 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//.
=== Überlappungen ===
Bei absoluter Positionierung kann es natürlich auch zu Überlappungen mehrerer Elemente kommen. Will man festlegen, welches Elemente dabei vorne liegen, macht man das mit der Eigenschaft //z-index// - je höher der Wert dieser Eigenschaft, desto weiter vorne erscheint das Element. Der Wert muss in keiner bestimmten Folge angegeben werden, sondern es können beispielsweise auch die Werte 5, 16, 33, 67 vorkommen.
==== Relative Positionierung ====
Auch hier stehen die Eigenschaften //top//, //right//, //bottom// und //left// zur Verfügung. \\
Jedoch wird das Element hier nicht relativ zum Browserfenster (bzw. übergeordnetem Element) positioniert, sondern relativ zur ursprünglichen (statischen) Positionierung.
==== Fixierte Positionierung ====
Auch die fixierte Positionierung arbeitet mit den Eigenschaften //top//, //right//, //bottom// und //left//, ähnlich wie die absolute Positionierung. \\
Jedoch beziehen sich die Angaben stets auf das Browserfenster und das Element scrollt nicht mit, sondern bleibt immer an einer fixen Bildschirmposition.
\\
===== Listen und Aufzählungen =====
Auch die bereits bekannten Listen kann man mit CSS einfach formatieren, häufig werden auch Menüs von Webseiten mit Listen gestaltet.
Die wichtigsten Eigenschaften sind:
^ Eigenschaft ^ erlaubte Werte ^ Erklärung ^
| list-style-type | beides: none \\ ul: disc, circle, square \\ ol: decimal, lower-alpha, upper-alpha, lower-roman, upper-roman, lower-greek, ... | Bestimmt das Aufzählungszeichen (Standardmäßig disc - gefüllter Kreis) |
| list-style-image | none, url(), Inherit (vererbt vom übergeordneten Element) | Für die Verwendung einer Grafik anstatt eines Symbols von list-style-type |
| list-style-position | inside, outside (Standard) | Bestimmt, ob Aufzählungszeichen innerhalb oder außerhalb des Textblocks stehen sollen |
\\
===== Boxmodell =====
Block-Elemente verwenden zur Darstellung das Boxmodell. Eine Box (Block-Element) hat immer einen Rahmen (//border//), einen Innenabstand (//padding//) zwischen Inhalt und dem Rahmen und einen Außenabstand (//margin//), der den Abstand rund um den Rahmen angibt.
Eine sehr wichtige Eigenschaft der Block-Elemente ist der Rahmen. Es können die Farbe (//border-color//), die Breite des Rahmens (//border-width//) und die Art des Rahmens (//border-style//) angesprochen werden. Diese Eigenschaften werden zusammengefasst mit //border//. Außerdem können auch nur einzelne Rahmen-Seiten angesprochen werden (z.B. border-left(-color)).
{{:inf:inf7b_201011:box1.gif|Block-Element}}
\\
===== Float und Clear =====
Eine weitere Möglichkeit, die Darstellung von Webseiten zu verändern, bieten die Float- und Clear-Eigenschaften.
Float setzt die für Block-Elemente geltende Regel, dass diese in einer neuen Zeile beginnen außer Kraft. Es bewirkt also, dass keine Veränderung des normalen Textflusses stattfindet.
Das geschieht, indem das betroffene Element von den anderen umflossen wird. Dem Element, das umfließen soll, weißt man die Regel //float: left// (für links umfließen) oder //float: right// (für rechts umfließen) zu. Der Standardwert ist natürlich //float: none//, also nicht umfließen.
Das Problem ist nun, dass ein Element nicht nur von dem nächsten Absatz umflossen wird, sondern von allen folgenden Elementen. Das Umfließen muss also nach dem gewünschten Element wieder mit der Regel //clear: left//, //clear: right// oder //clear: both// stoppen. Die clear-Regel muss dem Element zugewiesen werden, das als erstes nicht mehr umfließen soll.
==== Übung ====
- Erstelle ein (X)HTML-Dokument, in dem (in einem div-Element) ein Bild von einem Textabsatz gefolgt wird. \\ {{:inf:inf7b_201011:css:bild.jpg|bild.jpg}}
- Versuche nun das Bild einmal links und einmal rechts zu umfließen. Teile dazu die zwei divs durch eine Linie (