Einfaches CSS Layout

Cascading Style Sheets (CSS)


1. Inline-Styledefinitionen

<h1 style="font-family: Helvetica; color: blue; ">Diese Überschrift wird in der Schriftart Helvetica und blau dargestellt</h1>

3. Externe Stylesheets (eigene CSS-Datei)

Formatvorlagen können (SOLLTEN) in einer separaten Dokumentdatei (Textdatei) abgelegt und von einem oder mehreren HTML-Dokumenten eingebunden werden. Die Syntax, um eine CSS-Datei einzubinden:

<html>
<head>
<title>Beispiel: Externe CSS Datei</title>
<link type="text/css" rel="stylesheet" media="all" href="style.css" />
</head>
[…]

CSS Konzepte

CSS-Regeln bestehen aus zwei Teilen: Selektoren und Eigenschaften. Der Selektor bestimmt, für welchen Teil der Website die Stildefinitionen gelten sollen. Auf den Selektor folgt ein Paar geschweifter Klammern. Zwischen den Klammern befinden sich eine oder mehrere Eigenschaften und deren Werte. Die Eigenschaft sagt dem Browser, welches Element verändert werden soll; der Wert gibt an, welche Änderungen durchgeführt werden sollen:

Selektor {
Eigenschaft: Wert;
}

Ein Beispiel: Die folgende Stildefinition sorgt dafür, dass jeder mit <p> ausgezeichnete Absatz mit einem grauen Hintergrund und schwarzem Rand (1px breit) dargestellt wird:

Übersicht über alle Selektoren: https://www.w3schools.com/cssref/css_selectors.asp.

Typen-Selektoren

Als Typen-Selektoren werden Selektoren bezeichnet, die ein bestimmtes Element oder ein HTML-Tag benennen, auf das die Stildefinitionen angewendet werden sollen:

Um einen Selektor für eine Klasse zu erstellen, wird dem Selektor ein Punkt vorangestellt:

.warning {
colour: red;
font-weight: bold;
}

Klassen-Selektoren werden in HTML-Tags über das Attribut „class“ eingebunden:

ID-Selektoren

ID-Selektoren verfügen über eine große Ähnlichkeit mit Klassen-Selektoren – nur dürfen sie gemäß der HTML-Spezifikation nur einmal im HTML-Code vorkommen. Um einen ID-Selektor anzulegen, wird dem Namen ein Doppelkreuz (#) vorangestellt:

#navigation {border: 2px solid #000000;}

Anschließend wird das HTML-Element mit dem id-Attribut ausgerüstet, das den Wert „navigation“ enthält:

Bitte beachten: class-Attribute werden verwendet, wenn die gleiche Stilfdefinition mehrere Male in einem Dokument benutzt werden soll. id-Attribute kommen zum Einsatz, wenn ein Stil nur auf ein einziges Element in einem Dokument angewendet werden soll.

Nachkommen-Selektoren (Kontext-Selektoren)

Nachkommen-Selektoren können die Definitionen von Typen- und Klassenselektoren überschreiben. Nachkommen-Selektoren bestehen aus zwei Elementen, wobei das zweite Element ein Nachfolger des ersten sein muss:

li a {
background-color: #cccccc;
}

Die oben aufgeführte Stildefinition sorgt dafür, dass Hyperlinks, die sich im HTML-Dokument innerhalb von Listenelementen befinden, mit grauem Hintergrund unterlegt werden.

Pseudoklassen

Mittels Pseudoklassen und Pseudoelementen lassen sich Deklarationen für HTML-Bestandteile definieren, die sich nicht durch ein eindeutiges HTML-Element ausdrücken lassen, z.B. ein „noch nicht besuchter Verweis“ oder der „erste Buchstabe eines Absatzes.

In dem obigen Beispiel wird ein Link in blauer Schrift dargestellt (a:link). Befindet sich der Mauszeiger über dem Link (a:hover), wechselt die Farbe des Hyperlinks zu Rot. Wird der Link angeklickt, erscheint er grau (a:active). Der Hyperlink einer bereits besuchten Website (a:visited) wird purpurfarben gekennzeichnet.

Coole Transitions mit hover: https://www.w3schools.com/howto/howto_css_transition_hover.asp.

Boxmodell

Klassisches Boxmodell
Klassisches Boxmodell

(Quelle: http://de.selfhtml.org/css/formate/box_modell.htm)

Beispiel:

#exampleBox {
width: 1024px;
height: 768px;
padding: 5px;
padding-left: 10px;
border: 2px solid #cccccc;
margin: 15px;
}

Positionierung: relative, absolute, fixed

CSS ermöglicht drei Arten der Positionierung:

  • Relative Positionierung: positioniert eine Box / einen Container relativ zu der Position, die sie im normalen Textfluss hat.
  • Absolute Positionierung: positioniert eine Box entweder relativ zu einem ebenfalls positionierten Elternelement, oder – sofern kein positioniertes Elternelement existiert – absolut im Dokument.
  • Fixe Positionierung: positioniert eine Box absolut; beim Scrollen bleibt die Box an ihrer Position stehen („fixed“).

W3Schools position Tutorial: https://www.w3schools.com/css/css_positioning.asp.

Farben

Ein guter – und umfangreicher Überblick über Farbnamen und ihre hexadezimalen Entsprechungen findet sich unter https://material.io/tools/color/.

Textumfluss: float

float: left bewirkt, dass nachfolgende Elemente im Textfluss um das mit float: left definierte Element herumfließen. Analog zu float: left ist die Angabe float: right – hierbei wird die Überschrift rechts ausgerichtet, der nachfolgende Text umfließt die Überschrift links.

<h1 style="width: 150px; float: left">
Rechts umflossene Überschrift
</h1>
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
sed diam nonumy eirmod tempor invidunt ut labore et dolore
magna aliquyam erat, sed diam voluptua.
</p>