\acf{CSS} ist eine Sprache, welche \acs{HTML} (und andere Sprachen) mit Aussehen versieht. Es gibt eine Vielzahl an Quellen von \acs{CSS}-Regeln (Kaskade\index{Kaskade})
Die Einbindung von \acs{CSS} in \acs{HTML} ist möglich durch:
\begin{enumerate}[noitemsep]
\item Universalattribut \code{style} für jeden Tag im \html{<body>} verwendbar\newline
\item[$\ominus$] keine Trennung von Struktur und Aussehen
\item[$\oplus$] gut für Prototyping und für explizit anders aussehende Elemente
\end{itemize}
\item\html{<style>}-Tag im \html{<head>} der \acs{HTML}-Seite (siehe \autoref{code:html5_style_tag} auf Seite~\pageref{code:html5_style_tag} als Beispiel)
\begin{itemize}[noitemsep]
\item[$\oplus$] Trennung von Aussehen und Struktur klar innerhalb der Datei
\item[$\oplus$] eine Regel hat Auswirkung auf alle selektierten Tags $\Rightarrow$ einheitliches Aussehen wird ermöglicht
\item[$\ominus$] Design ist separat in jeder Seite vorhanden, bei Designänderungen müssen alle HTML-Seiten angepasst werden
\end{itemize}
\item\html{<link>}-Tag im \html{<head>} der \acs{HTML}-Seite (siehe \autoref{code:html5_link_tag} auf Seite~\pageref{code:html5_link_tag} als Beispiel)\newline
Das Attribut \code{rel} (\enquote{relation}) gibt die Beziehung an. Auch möglich: \enquote{alternate stylesheet} für verschiedene auswählbare Aussehensvarianten.
Das Attribut \code{media} gibt das Ausgabegerät an. Beispiele:
\medskip
\begin{tabular}{cll}
• &\code{all}&$\Rightarrow$ für alle Ausgabegeräte \\
• &\code{screen}&$\Rightarrow$ für (Computer-)Bildschirme \\
• &\code{print}&$\Rightarrow$ für Ausdrucke der Seite \\
• &\code{speech}&$\Rightarrow$ für Blinde oder Sehbehinderte. Die Seite wird vorgelesen. Bestimmte\\
&&\phantom{$\Rightarrow$} Menüpunkte können dafür \zB ausgeblendet werden.\\
• &\code{handheld}&$\Rightarrow$ für sehr kleine Geräte (veraltet)\\
\code{@import}-Statement zu Beginn eines \acs{CSS}-Regelblocks (externe \acs{CSS}-Datei oder innerhalb des Style-Tags). Hiermit wird eine andere \acs{CSS}-Datei eingebunden.
\bigskip
\begin{lstlisting}[language=CSS,caption={@import-Anweisung in CSS}]
\acs{CSS} besteht aus beliebig vielen \enquote{Regeln}. Jede Regel besteht aus (mindestens) einer Zeile. Jede Regel besteht aus \enquote{Selektor} und \enquote{Deklaration} im Format:
\qquad\css{selector \{ declaration; \}}
Jede Regel kann mehrere Selektoren enthalten, welche durch Kommata voneinander getrennt werden.
Jede Regel kann mehrere Deklarationen enthalten, welche in derselben geschweiften Klammer jeweils mit \enquote{;} abgeschlossen werden.
Der Selektor wählt die Elemente (\enquote{Tags}) aus, für welche die Regel gilt. Die Deklaration gibt das \enquote{Aussehen} für die selektierten Elemente vor, \zB:
Ein Selektor ist im einfachsten Fall ein Tagname, \zB\code{h1} (oder die Wildcard \enquote{\code{*}} für alle Tagnamen).
Eine Deklaration besteht aus einer Eigenschaft (property) und einem Wert (value) im Format:
\qquad\code{property: value;}
\subsection{Positionierung: \enquote{Box-Model}}
In \acs{CSS} gibt es das sogenannte \enquote{Box-Model}. Was es genau bedeutet, wird in \autoref{fig:css_modell}\footnote{Quelle: \url{https://wiki.selfhtml.org/wiki/CSS/Box-Modell}} gezeigt.
Die Eigenschaft \code{display} gibt an, wie die Elemente im Fluss dargestellt werden:
\begin{tabular}{ll}
\code{display: inline;}& Innerhalb einer Zeile (sofern genug Platz)\\
\code{display: block;}& Beginnt und endet auf jeden Fall in einer eigenen Zeile\\
\code{display: none;}& Element wird nicht dargestellt und nimmt auch keinen Platz ein
\end{tabular}
\bigskip
Es gibt noch weitere \code{values} als Spezialfälle für Tabellen, Listen, \ldots
\bigskip
\begin{Tipp}
Eine Alternative zu \code{display: none;} ist \code{visibility: hidden;} (anstatt \code{visibility: visible;}). Damit wird das Element nicht dargestellt, nimmt aber seinen Platz in Anspruch.
Umfließen von Inhalten mit \code{float: none|left|right;} (siehe \autoref{fig:css_float}).
Nachfolgende Inhalte befinden sich bei \code{left} auf der rechten Seite (das Bild links). Möchte man \zB die nächste Überschrift nicht neben den \code{floats} haben, so kann man dies machen mit:
\code{clear: none|left|right|both;}
Damit werden alle offenen (\code{left/right}) \code{floats} vor dem aktuellen Element gesetzt/\enquote{geschlossen}.
\subsection{Selektoren}\index{Selektoren}
Regeln werden vererbt (auf Kinder und Kindeskinder).
\code{a[href] \{\ldots\}}&$\Rightarrow$& gilt für \html{<a>}-Tags mit \code{href}-Attribut. \\
\code{a[href="{}/"] \{\ldots\}}&$\Rightarrow$& gilt für \html{<a>}-Tags mit Wert von \code{href}-Attribut \enquote{/} (Verweis auf die Einstiegsseite). \\
\code{a[href\^{}="http"] \{\ldots\}}&$\Rightarrow$& gilt für alle \html{<a>}-Tags, deren \code{href}-Attribut mit \enquote{http} beginnt \\
\code{a[href\^{}="http://"], a[href\^{}="https://"] \{\ldots\}}&$\Rightarrow$& gilt für alle \html{<a>}-Tags, die auf externe Seiten verlinken. \\
\code{a[href\$=".pdf"] \{\ldots\}}&$\Rightarrow$& gilt für alle \html{<a>}-Tags, die auf eine PDF verweisen.\\
\code{div.klassenname \{\ldots\}}$\Rightarrow$ gilt für alle \html{<div>} der Klasse \enquote{klassenname}\newline (\html{<div class="klassenname"></div>}).
Ein Klassenselektor ist spezifischer als beliebig viele Kontexte eines Selektors.
\code{div\#idwert \{\ldots\}}$\Rightarrow$ gilt für einen \html{<div>} mit ID \enquote{idwert}.
\begin{Hinweis}
\code{.klassenname} und \code{\#idwert} anstatt \code{div.klassenname} und \code{div\#idwert} ist auch möglich. Dann gibt es keine Beschränkung auf bestimmte Elementarten!
\end{Hinweis}
Ein ID-Selektor ist auf jeden Fall spezifischer als ein Klassenselektor!
Einige Pseudoklassen sind abhängig von \enquote{externen Randbedingungen}
\begin{tabular}{llp{11cm}}
\code{a:link}&$\Rightarrow$& gilt für alle \html{<a>}-Tags, welche Hyperlinks darstellen \newline
(Alternative für \code{a[href] \{\ldots\}}).\\
\code{a:visited \{\ldots\}}&$\Rightarrow$& gilt für alle \html{<a>}-Tags, welche \textit{besuchte }Hyperlinks darstellen).\\
\code{a:focus \{\ldots\}}&$\Rightarrow$& gilt für alle \html{<a>}-Tags, die den aktuellen Fokus haben\newline
(\zB mit der Tab Taste).\\
\code{a:hover \{\ldots\}}&$\Rightarrow$& gilt für alle \html{<a>}-Tags, über der sich der Mauszeiger im Moment befindet.\\
\code{a:active \{\ldots\}}&$\Rightarrow$& gilt für alle \html{<a>}-Tags, die im Moment geklickt werden.\\
\end{tabular}
\medskip
\begin{Achtung}
Alle Selektoren sind gleich spezifisch, \dash die Reihenfolge ist wichtig. Die letztnotierte Regel überschreibt die anderen. Im oberen Beispiel darf deswegen \code{a:link \{...\}} nicht nach \code{a:hover \{...\}} stehen, da dies ansonsten überschrieben werden würde.
\item\html{<style>}-Tag im \html{<head>} (dazwischen)
\item\html{style}-Attribut (ist am spezifischsten)
\end{itemize}
(bei gleicher Spezifität der Selektoren)
Grundsätzlich: Eine Regel (bzw. beim \code{style}-Attribut die Deklaration) überschreibt andere Regeln mit gleicher Spezifität des Selektors, welche sich \enquote{weiter weg vom Element} befinden.
\item[user] Betrachter der Website.
\item[user-agent] Webbrowser, mit dem der User die Seite anschaut.
\end{description}
Prioritätenreihenfolge (bei gleicher Spezifität des Selektors):
\hspace*{5mm}\code{author > user > user-agent}
\textbf{Barrierefreiheit?}
Mit \code{!important} kann die Priorität einer Deklaration erhöht werden:\newline
Nur die Schriftfamiliendeklaration hat Vorrang vor allen anderen Deklarationen ohne \code{!important}.
Es gibt eine andere Prioritätsreihenfolge bei \code{!important}:\newline
\hspace*{5mm}\code{user > author}
Der \code{user-agent} hat keine \code{!important}-Deklarationen!
\bigskip
\begin{Hinweis}[frametitle={Beispiel für eine Klausuraufgabe}]
Es ist eine \acs{HTML}- und \acs{CSS}-Datei vorgegeben. Die \acs{HTML}-Datei enthält Überschriften unterschiedlicher Art, welche unterschiedlich gestyled wurden (über IDs, Klassen, \ldots). Auch user- und author-Stylesheets wurden angegeben.
Die Klausurfrage lautet dann: \enquote{Welche Farbe wird für welche Überschrift verwendet?}
