\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{} verwendbar\newline \html{

Rote Überschrift

} \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{

rote Überschrift

\end{lstlisting} \newpage \begin{lstlisting}[language=HTML5,caption=HTML \texttt{}-Tag,label=code:html5_link_tag] Blabla ... \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}[noitemsep] \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: ;} $\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) {}; \node[knoten] at (-3,-2) (DIV1) {
~~~~}; \node[red] at ($(DIV1) + (0.8,0)$) {2}; \node[knoten] at (3,-2) (DIV2) {
~~~~}; \node[red] at ($(DIV2) + (0.8,0)$) {4}; \node[knoten] at (-6,-4) (P1) {

~~~~}; \node[red] at ($(P1) + (0.7,0)$) {1}; \node[knoten] at (-3.5,-4) (UL) {