462 lines
21 KiB
TeX
462 lines
21 KiB
TeX
\chapter{CSS}\index{CSS}
|
|
\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
|
|
\html{<h1 style="color: red;">Rote Überschrift</h1>}
|
|
\begin{itemize}[noitemsep]
|
|
\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)\\
|
|
\end{tabular}
|
|
\end{enumerate}
|
|
|
|
\bigskip
|
|
\begin{lstlisting}[language=HTML5,caption=HTML \texttt{<style>}-Tag,label=code:html5_style_tag]
|
|
<html>
|
|
<head>
|
|
<title>Blabla</title>
|
|
<style type="text/css">
|
|
h1 { color: red; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1>rote Überschrift</h1>
|
|
</body>
|
|
</html>
|
|
\end{lstlisting}
|
|
|
|
\newpage
|
|
\begin{lstlisting}[language=HTML5,caption=HTML \texttt{<link>}-Tag,label=code:html5_link_tag]
|
|
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>Blabla</title>
|
|
<link href="URL" type="text/css" rel="stylesheet" title="Name der Auswahlvariante" media="all" />
|
|
</head>
|
|
<body>
|
|
...
|
|
</body>
|
|
</html>
|
|
\end{lstlisting}
|
|
|
|
|
|
\section{\code{@import}-Statement}\index{CSS!import}
|
|
\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}]
|
|
@import "URL/zur/datei.css" [mediatype]; // oder:
|
|
@import url("URL/zur/datei.css") [mediatype];
|
|
\end{lstlisting}
|
|
|
|
\begin{description}
|
|
\item[\code{mediatype}] optional, \zB \code{all}, \code{screen}, \code{speech}
|
|
\end{description}
|
|
|
|
|
|
\section{CSS Struktur}\index{CSS!Struktur}
|
|
|
|
\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:
|
|
|
|
\qquad \css{h1, h2 \{ color: red; font-size: 16pt; \}}
|
|
|
|
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.
|
|
|
|
\begin{figure}[ht]
|
|
\centering
|
|
\includegraphics[width=0.8\textwidth]{Bilder/CSS_Box_Modell.png}
|
|
\caption{CSS Box Modell}
|
|
\label{fig:css_modell}
|
|
\end{figure}
|
|
|
|
\css{div \{ width: 40mm; padding: 3mm; border-width: 2mm; margin: 5mm; \}}
|
|
|
|
$\Rightarrow$ Gesamtbreite: 60mm, da padding, border-width und margin doppelt gezählt werden.
|
|
|
|
Falls es keine explizite Angabe durch den Autor der Seite gibt, so wird folgendes verwendet:
|
|
|
|
\begin{itemize}[noitemsep]
|
|
\item Default-Vorgabe (\code{user-agent})
|
|
\item dynamische Anpassung (hier an den Inhalt)
|
|
\end{itemize}
|
|
|
|
\subsection{Eigenschaften/\enquote{properties}}
|
|
|
|
\subsubsection{Eigenschaft \enquote{\code{display}}}
|
|
|
|
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.
|
|
\end{Tipp}
|
|
|
|
|
|
\subsubsection{Eigenschaft \enquote{\code{position}}}
|
|
|
|
\begin{tabular}{ll}
|
|
\code{position: static;} & \enquote{normale} Position, Default-Wert \\
|
|
\code{position: relative;} & relative Verschiebung zur \enquote{normalen} Position\\
|
|
& Der Platzbedarf bleibt an der ursprünglichen Position erhalten \\
|
|
\code{position: absolute;} & Positionierung relativ zum nächsten Vorfahren, welches eine \\
|
|
& von \code{static} verschiedene Position aufweist (bzw. \html{body}) \\
|
|
\code{position: fixed;} & Positionierung relativ zum Browserfenster (\enquote{viewport}) \\
|
|
\end{tabular}
|
|
\bigskip
|
|
|
|
Unterschied \code{fixed} zu \code{static}/\code{absolute}/\code{relative}: scrollt nicht mit bzw. scrollt mit.
|
|
|
|
Unterschied \code{absolute}/\code{fixed} zu \code{static}/\code{relative}: Element hat keinen Platzbedarf bzw. hat Platzbedarf.
|
|
|
|
Die tatsächliche \enquote{Position} wird angegeben mittels \code{top}, \code{bottom}, \code{left} und \code{right}.
|
|
|
|
\code{width}, \code{right}, \code{margin}, \code{top}, \ldots erwarten Längenangaben als Werte. Diese können sein:
|
|
|
|
\begin{itemize}
|
|
\item absolute Werte, \zB $50mm$, $3in$, $2pt$ (\enquote{Punkt der Schriftsetzer}) $\Rightarrow$ werden selten verwendet
|
|
\item relative Werte, \zB \medskip
|
|
|
|
\begin{tabular}{ll}
|
|
300px & Pixel, \dash relativ zur Bildschirmauflösung. Meist ungünstige Wahl \\
|
|
& für allgemeine Größenangaben, verwendet \zB für \code{border} Angaben \\
|
|
50\% & Prozentangabe, \dash relativ zur entsprechenden Bezugsgröße des Elternelements \\
|
|
& meist oder oft eine gute Wahl (\code{width} $\Rightarrow$ \code{width}, \code{top} $\Rightarrow$ \code{height}) \\
|
|
2em & Breite des Kleinbuchstabens \enquote{m} in der aktuellen Schrift. Ebenfalls eine gute Wahl. \\
|
|
4rem & Breite des Kleinbuchstabens \enquote{m} in der Schrift des \code{root} Elements \\
|
|
& (für die Unterstützung siehe \url{http://caniuse.com/\#feat=rem}) \\
|
|
3ex & Höhe des Kleinbuchstabens \enquote{x} in der aktuellen Schrift \\
|
|
&
|
|
\end{tabular}
|
|
\end{itemize}
|
|
|
|
\subsubsection{Eigenschaften \enquote{margin}, \enquote{padding}, \enquote{border-width}, \ldots}
|
|
|
|
Diese Eigenschaften sind Sammeleigenschaften für die Dimensionen an allen vier Seiten.
|
|
|
|
\begin{tabular}{llll}
|
|
margin-top & padding-top & border-top-width & \ldots \\
|
|
margin-right & padding-right & border-right-width & \ldots \\
|
|
margin-bottom & padding-bottom & border-bottom-width & \ldots \\
|
|
margin-left & padding-left & border-left-width & \ldots
|
|
\end{tabular}
|
|
\bigskip
|
|
|
|
Gesammelt ergibt dies zum Beispiel:
|
|
|
|
\qquad \code{margin: 1mm 2mm 3mm 4mm;}
|
|
|
|
Die Eigenschaften werden in der Reihenfolge \code{top}, \code{right}, \code{bottom} und \code{left} mit Leerzeichen getrennt angegeben.
|
|
Es können aber auch weniger Werte angegeben werden. Fehlende Werte werden ersetzt:
|
|
|
|
\begin{itemize}[noitemsep]
|
|
\item left = right (3 oder 2 Werte)
|
|
\item bottom = top (2 Werte)
|
|
\item left = bottom = right = top (1 Wert)
|
|
\end{itemize}
|
|
|
|
\code{border} ist auch eine Sammeleigenschaft für:
|
|
\begin{enumerate}[noitemsep]
|
|
\item \code{border-width} $\Rightarrow$
|
|
\item \code{border-style} $\Rightarrow$ jeweils ebenfalls eine Sammeleigenschaft für vier Seiten
|
|
\item \code{border-color} $\Rightarrow$
|
|
\end{enumerate}
|
|
|
|
\begin{description}
|
|
\item[\code{border-style}] \texttt{solid | dotted | dashed | double | \ldots | none}
|
|
\item[\code{border-color}] \hfill
|
|
\begin{itemize}[noitemsep]
|
|
\item \texttt{red | green | blue|...}
|
|
\item \texttt{\#abc1f5} (RGB-Angabe, je zwei Zeichen)
|
|
\item \texttt{\#a5f} $\hat{=}$ \texttt{\#aa55ff} (RGB-Angabe, je ein Zeichen)
|
|
\item \texttt{rgb(122,231,85)} (RGB-Angabe)
|
|
\item \texttt{rgba(122,231,85,0.5)} (RGB-Angabe + Alpha-Kanal für Deckkraft von 0 bis 1)
|
|
\item weitere Farbmodelle sind \uA \code{hsl(\ldots), hsla(\ldots), \ldots}
|
|
\item weiteres Schlüsselwort, manchmal anwendbar (\zB für Hintergrundfarbe): \code{transparent} (bei \code{rgba()} nicht mehr notwendig
|
|
\end{itemize}
|
|
\end{description}
|
|
|
|
Weitere Eigenschaften mit Farbangaben sind \uA:
|
|
\begin{itemize}[noitemsep]
|
|
\item \code{color} (Schriftfarbe)
|
|
\item \code{background-color} (Hintergrundfarbe)
|
|
\end{itemize}
|
|
|
|
|
|
\subsubsection{Eigenschaften für den Hintergrund}
|
|
|
|
\begin{itemize}[noitemsep]
|
|
\item \code{background-image: url("{}url/zum/bild.jpg"{});}
|
|
\item \code{background-repeat: no-repeat | repeat | repeat-x | repeat-y;}
|
|
\item \code{background-position: left|right|center top|bottom|center;}\newline oder Längenangabe (mit Positionierung der Bildmitte)
|
|
\item \code{background-attachment: fixed | scroll;}
|
|
\end{itemize}
|
|
|
|
\subsubsection{Eigenschaften für Schriften}
|
|
|
|
\begin{itemize}[noitemsep]
|
|
\item \code{font-style: normal|italic|oblique} schräggestellte Schrift
|
|
\item \code{font-variant: normal|small-caps} \enquote{Kapitälchen}
|
|
\item \code{font-weight: normal|bold|bolder|lighter|X\%|Zahl} Schriftdicke: Die meisten Schriften unterstützen nur zwei verschiedene Schriftdicken
|
|
\item \code{font-size:} Schriftgröße -- Angabe der Längenangabe (vorzugsweise Prozentwerte)
|
|
\item \code{font-family: \textquotedbl{}Name der Schriftfamilie\textquotedbl | serif | sans-serif | cursive | monospace | fantasy } \newline
|
|
Alternativangaben werden durch Kommata getrennt angegeben
|
|
\end{itemize}
|
|
|
|
Die Sammeleigenschaft dafür ist \code{font}.
|
|
|
|
|
|
\section{Ergänzungen -- CSS}
|
|
|
|
Positionierung:
|
|
\enquote{dritte} Dimension: \code{z-index: <Zahlenwert>;}
|
|
|
|
$\Rightarrow$ Element mit größeren \code{z-index} überlagern Elemente mit kleinerem \code{z-index}
|
|
|
|
\begin{figure}[h]
|
|
\centering
|
|
\begin{tikzpicture}[
|
|
scale=0.80,
|
|
knoten/.style={
|
|
rectangle,
|
|
fill=green!15,
|
|
draw=green!70!black,
|
|
minimum width=14mm,
|
|
inner sep=5pt
|
|
},
|
|
thick
|
|
]
|
|
|
|
\node[knoten] at (0,0) (BODY) {<body>};
|
|
\node[knoten] at (-3,-2) (DIV1) {<div>~~~~}; \node[red] at ($(DIV1) + (0.8,0)$) {2};
|
|
\node[knoten] at (3,-2) (DIV2) {<div>~~~~}; \node[red] at ($(DIV2) + (0.8,0)$) {4};
|
|
\node[knoten] at (-6,-4) (P1) {<p>~~~~}; \node[red] at ($(P1) + (0.7,0)$) {1};
|
|
\node[knoten] at (-3.5,-4) (UL) {<ul>~~~~~}; \node[red] at ($(UL) + (0.75,0)$) {2};
|
|
\node[knoten] at (-1,-4) (P2) {<p>~~~~~}; \node[red] at ($(P2) + (0.7,0)$) {5};
|
|
\node[knoten] at (2,-4) (DIV3) {<div>~~~~}; \node[red] at ($(DIV3) + (0.8,0)$) {3};
|
|
\node[knoten] at (4.5,-4) (H1) {<h1>~~~~}; \node[red] at ($(H1) + (0.8,0)$) {1};
|
|
|
|
|
|
\draw[->,thick] (BODY) -- (DIV1) ;
|
|
\draw[->,thick] (BODY) -- (DIV2) ;
|
|
\draw[->,thick] (DIV1) -- (P1) ;
|
|
\draw[->,thick] (DIV1) -- (UL) ;
|
|
\draw[->,thick] (DIV1) -- (P2) ;
|
|
\draw[->,thick] (DIV2) -- (DIV3) ;
|
|
\draw[->,thick] (DIV2) -- (H1) ;
|
|
|
|
|
|
\draw[blue,very thick,->] (P2) to[out=-60,in=-110] (DIV3);
|
|
\node[blue] at ($(P2)+(1.4,-1.6)$) {liegt unter};
|
|
|
|
\end{tikzpicture}
|
|
\caption{Beispiel -- Z-Index}
|
|
\label{fig:abb_1}
|
|
\end{figure}
|
|
|
|
Wie in \autoref{fig:abb_1} zu sehen ist, bezieht sich der \code{z-index} auf den aktuellen Kontext und nicht notwendigerweise dokumentenweit.
|
|
|
|
\begin{figure}[ht]
|
|
\centering
|
|
\includegraphics[width=0.6\textwidth]{Bilder/CSS_float.png}
|
|
\caption{CSS -- \code{float}}
|
|
\label{fig:css_float}
|
|
\end{figure}
|
|
|
|
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).
|
|
|
|
\begin{lstlisting}[language=CSS,caption=Selektoren]
|
|
body { font-size: 12pt; }
|
|
h1 { font-size: 18pt; }
|
|
\end{lstlisting}
|
|
|
|
Grundsätzlich gilt die Regel mit dem für das jeweilige Element spezifischsten Selektor. Weniger weit vererbte Selektoren sind spezifischer.
|
|
|
|
Eigenschaft für Aufzählungszeilen bei Listen:
|
|
|
|
\css{li \{ list-style-type: decimal; \}}\newline
|
|
$\Rightarrow$ gilt für alle \html{<li>} (sowohl für \html{<ul>} als auch für \html{<ol>}).
|
|
|
|
Deswegen ist folgendes besser: \css{ol \{ list-style-type: decimal; \}}
|
|
|
|
\subsubsection{Kontextselektoren}\index{Selektoren!Kontext}
|
|
|
|
\begin{tabular}{ll}
|
|
\code{ol li \{\ldots \}} & $\Rightarrow$ gilt für \textit{alle} \html{<li>}-Kinder eines \html{<ol>} \\
|
|
\code{ol > li \{\ldots \}} & $\Rightarrow$ gilt für alle \textit{direkten} \html{<li>}-Kinder eines \html{<ol>} (keine Kindeskinder) \\
|
|
\code{h1 \circa{} p \{\ldots \}} & $\Rightarrow$ gilt für \html{<p>}, wenn es einen vorangegangenen Geschwisterknoten \html{<h1>} gibt. \\
|
|
\code{h1 + p \{ \ldots \}} & $\Rightarrow$ gilt für alle \html{<p>}, die einen direkten Vorgänger \html{<h1>} haben. \\
|
|
\end{tabular}
|
|
|
|
\medskip
|
|
Die Kombination von Selektoren ist möglich:\newline
|
|
\hspace*{5mm} \code{h1 + p + p \{\ldots \}} $\Rightarrow$ gilt für das genau 2. \html{<p>} welches direkt auf \html{<h1>} folgt.
|
|
|
|
Kontextselektoren sind spezifischer als Selektoren ohne Kontext!
|
|
|
|
\subsubsection{Attributselektoren}\index{Selektoren!Attribut}
|
|
|
|
\begin{tabular}{p{5.8cm}lp{9.3cm}}
|
|
\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{a[href*="google."] \{\ldots \}} & $\Rightarrow$ & gilt für alle \html{<a>}-Tags, die auf Google verweisen (bzw. die \code{google.} enthalten).\\
|
|
|
|
\end{tabular}
|
|
|
|
\subsubsection{Klassenselektoren}\index{Selektoren!Klasse}
|
|
|
|
\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.
|
|
|
|
|
|
\subsubsection{ID-Selektoren}\index{Selektoren!ID}
|
|
\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!
|
|
|
|
\pagebreak
|
|
\subsubsection{Pseudoklassen}\index{Selektoren!Pseudoklassen}
|
|
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.
|
|
\end{Achtung}
|
|
|
|
\subsubsection{Pseudoelemente}\index{Selektoren!Pseudoelemente}
|
|
|
|
\code{a[href\^{}="http://"]:after \{ content: "{}Achtung! Externer Link"; \}} \newline
|
|
\code{a[href\$=".pdf"]:after \{ content: url("logo-pdf.png"); \}} \newline
|
|
\code{a[href\$=".pdf"]:before \{ content: url("logo-pdf.png"); \}} \newline
|
|
|
|
weitere sind \uA
|
|
|
|
\begin{tabular}{ll}
|
|
\code{:first-letter \{\ldots\}} & Der erste Buchstabe \\
|
|
\code{:first-line \{\ldots\}} & Die erste Zeile \\
|
|
\code{:first-child \{\ldots\}} & Das erste Kindelement \\
|
|
\end{tabular}
|
|
|
|
Es gibt noch viele weitere Pseudoelemente in aktuellen \acs{CSS} Versionen, die jedoch nicht für die Vorlesung von Bedeutung sind.
|
|
|
|
Selektoren mit Pseudoklassen haben grundsätzlich dieselbe Spezifität wie \enquote{normalen} Klassen.
|
|
|
|
\pagebreak
|
|
\subsection{Quellen von CSS-Regeln}\label{sec:CSS_Quellen}
|
|
Es gibt verschiedene Quellen von CSS-Regeln. Diese sind:
|
|
|
|
\begin{description}
|
|
\item[author] Vom Webautor
|
|
|
|
\begin{itemize}[noitemsep]
|
|
\item \html{<link>}-Tag (am \enquote{unspezifischsten})
|
|
\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
|
|
\hspace*{5mm} \code{body \{ \textit{font-family: serif !important}; font-size:50pt; \}}
|
|
|
|
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?}
|
|
\end{Hinweis}
|