%Teilweise Erzeugt mit dem LaTeX-Generator: http://latex.sehnot.de

%Schriftgröße, Layout, Papierformat, Art des Dokumentes
\documentclass[10pt,oneside,a4paper]{scrartcl}

%Einstellungen der Seitenränder
\usepackage[left=2cm,right=2cm,top=1.5cm,bottom=1.5cm,includeheadfoot]{geometry}

%neue Rechtschreibung
\usepackage[ngerman]{babel}

%Umlaute ermöglichen
\usepackage[utf8]{inputenc}

%Gesamtseitenzahl
\usepackage{lastpage}

% Kopf- und Fußzeile
\usepackage[automark]{scrpage2}

%Quellcode-Listings
\usepackage{listings}

%Hyperlinks
\usepackage{hyperref}

%Hyperlinks
\usepackage{multicol}




%Kopfzeile
\ihead{Webentwicklung}
\chead{}
\ohead{http://kohnlehome.de/html/css.pdf}
\setheadsepline{0.5pt}

%Fußzeile
\setfootsepline{0.5pt}
\ifoot{Franz Kohnle}
\cfoot{Seite \thepage\ von  \pageref{LastPage}}
\ofoot{\today}

\pagestyle{scrheadings}

\begin{document}

% Überschrift 
\begin{center}
\LARGE % Schriftgröße
\bfseries % Fettdruck
\sffamily % Serifenlose Schrift
CSS
\end{center}

\section{Allgemeine Syntax}
\begin{verbatim} 
selector1, selector2 {
  property1: value1;
  property2: value2
}
\end{verbatim}


\section{Einbinden in HTML}
\subsection*{a) Externe Datei}
\begin{verbatim} 
<link rel="stylesheet" href="style.css">
\end{verbatim}

\subsection*{b) im head-Bereich}
\begin{verbatim} 
<style>
  div { 
      color: red;
      background-color: green
  }
</style>
\end{verbatim}

\subsection*{c) Inline}
\begin{verbatim} 
<div style="color: red; background-color: green"> ... </div>
\end{verbatim}


\section{Selektoren}
\begin{multicols}{2}
\subsection*{Grundlegende Selektoren}
\begin{itemize}
\item Universal: \texttt{*}
\item Typ: \texttt{Element}
\item Klasse: \texttt{.Klasse}
\item ID: \texttt{.ID}
\item Attribut: \texttt{[Attribut]}, \texttt{[Attribut=Wert]}, ...
\end{itemize}

\subsection*{Kombinatoren}
\begin{itemize}
\item Nachfahren: \texttt{a b}
\item Kind: \texttt{a > b}
\item Geschwister: \texttt{a \~}  \texttt{b}
\item angrenzende Geschwister: \texttt{a + b}
\end{itemize}

\subsection*{Pseudoelemente}
\begin{itemize}
\item \texttt{::before}
\item \texttt{::after}
\item \texttt{::first-letter}
\item \texttt{::first-line}
\item \texttt{::selection}
\end{itemize}

\subsection*{Pseudoklassen}
\begin{itemize}
\item unbesuchter Link: \texttt{:link}
\item besuchter Link: \texttt{:visited}
\item Mauszeiger über Link: \texttt{:hover}
\item momentan angeklickt: \texttt{:active}
\item ...
\end{itemize}
\end{multicols}

\newpage

\section{Eigenschaften}
\begin{itemize}
\item background
\item color
\item border
\item font
\item text
\item height, width
\item margin, padding
\item ...
\end{itemize}

\section{Werte}

\subsection*{Farben}
\begin{itemize}
\item Farbkonstanten: \texttt{red}, \texttt{green}, \texttt{blue}, ...
\item Rot-Grün-Blau hexadezimal: \texttt{\#rrggbb} oder \texttt{\#rgb}
\item Rot-Grün-Blau dezimal: \texttt{rgb(0, 255, 255)}
\item Rot-Grün-Blau-alpha (mit Transparenz):  \texttt{rgba(0, 255, 255, 0.5)}
\item Hue-Saturation-Lightness: \texttt{hsl(360, 100\%, 100\%)}
\item Hue-Saturation-Lightness-Alpha: \texttt{hsla(360, 100\%, 100\%, 0.5)}
\end{itemize}

\subsection*{Längen}
\begin{itemize}
\item \texttt{px}
\item \texttt{em} (Schriftgröße des Elternelements): media-queries
\item \texttt{rem} (Schriftgröße des html-Elements): font-size, margin, padding
\item \texttt{\%} (relativ zum Elternelement)
\item \texttt{vw} (relativ zu 1 Prozent der Breite des Viewports)
\item \texttt{vh} (relativ zu 1 Prozent der Höhe des Viewports)
\end{itemize}

\newpage

\section{Layout}
\subsection*{Box-Model}
\begin{multicols}{2}
\subsubsection*{box-sizing: content-box (default)}
\begin{verbatim}
+----------------------------------+
|              margin              |
|   +--------------------------+   |
|   |          border          |   |
|   |   +------------------+   |   |
|   |   |     padding      |   |   |
|   |   |   +----------+   |   |   |    ^
|   |   |   |          |   |   |   |    |
|   |   |   |  Inhalt  |   |   |   |  height
|   |   |   |          |   |   |   |    |
|   |   |   +----------+   |   |   |    v
|   |   |                  |   |   |
|   |   +------------------+   |   |
|   |                          |   |
|   +--------------------------+   |
|                                  |
+----------------------------------+

            <--width-->
\end{verbatim}

\subsubsection*{box-sizing: border-box}
\begin{verbatim}
       +----------------------------------+
       |              margin              |
  ^    |   +--------------------------+   |
  |    |   |          border          |   |
  |    |   |   +------------------+   |   |
  |    |   |   |     padding      |   |   |
  |    |   |   |   +----------+   |   |   |
  |    |   |   |   |          |   |   |   |
height |   |   |   |  Inhalt  |   |   |   |
  |    |   |   |   |          |   |   |   |
  |    |   |   |   +----------+   |   |   |
  |    |   |   |                  |   |   |
  |    |   |   +------------------+   |   |
  |    |   |                          |   |
  v    |   +--------------------------+   |
       |                                  |
       +----------------------------------+

           <---------width------------>
\end{verbatim}
\end{multicols}


\subsection*{Formating context}
\begin{itemize}
	\item Outer display type (Interaktion mit anderen Boxen)
	\begin{itemize}
		\item Block
		\begin{itemize}
			\item oben $\rightarrow$ unten
			\item Breite: Breite des Elternelements
			\item Höhe: dass Inhalt reinpasst
			\item kann mit width und height verändert werden
			\item collapsing margin (größerer Wert)
		\end{itemize}
		\item Inline
		\begin{itemize}
			\item links $\rightarrow$ rechts
			\item Höhe und Breite je nach Inhalt
			\item width, height werden ignoriert (ausser bei display: inline-block)
			\item padding, margin nur horizontal
		\end{itemize}	
	\end{itemize}
	\item Inner display type (Verhalten der Kindelemente)
	\begin{itemize}
		\item flow
		\item flow-root
		\item flex
		\item grid
		\item table
	\end{itemize}
\end{itemize}

\newpage

\subsection*{Flexbox}
\begin{itemize}
	\item container
	\begin{itemize}
		\item display: flex;
		\item justify-content: horizontal
		\item align-items: vertikal
		\item align-content: bei mehreren Zeilen
	\end{itemize}
	\item item
	\begin{itemize}
		\item flex-grow: 1;       // darf größer als 200px werden
		\item flex-shrink: 1;     // darf kleiner als 200px werden
		\item flex-basis: 200px;  // default-Größe
	\end{itemize}
\end{itemize}
\end{document}
