CSS

Aus Jonas Notizen Webseite
Version vom 29. April 2020, 02:13 Uhr von Admin (Diskussion | Beiträge) (Visual Editor Test)
(Unterschied) ← Nächstältere Version | Aktuelle Version (Unterschied) | Nächstjüngere Version → (Unterschied)
Zur Navigation springen Zur Suche springen

Grundlagen

Geschichte

Quote von W3Schools:

HTML was NEVER intended to contain elements for formatting a web page!
HTML was created to describe the content of a web page, like:
<h1>This is a heading</h1>
<p>This is a paragraph.</p>

When elements like <font>, and color attributes were added to the HTML 3.2 specification, it started a nightmare for web developers. Development of large websites, where fonts and color information were added to every single page, became a long and expensive process.

To solve this problem, the World Wide Web Consortium (W3C) created CSS.
CSS removed the style formatting from the HTML page!
CSS saves a lot of work. It can control the layout of multiple web pages all at once.

Kommentare

Kommentare dienen dazu, den Quelltext für den Menschen leichter verständlich zu machen. Kommentare sind Texte im Quellcode, die vom Browser ignoriert werden und somit keinen Einfluss auf das Ergebnis haben.
Da der Browser bei einer Anfrage den gesamten Inhalt einer Datei bekommt, kann Sie der Nutzer über gewisse "Entwickler-Tools" in den meisten Browsern dennoch einsehen!


// ILLEGAL - End-of-Line Kommentare werden nicht ünterstützt
/*
Valider Kommentar, welcher sich über
mehrere Zeilen erstrecken kann
*/

Selektoren

CSS basiert auf sog. "Rulesets", welche aus 2 Teilen bestehen:

  • Selector (Selektor): Welches HTML-Element wir ansprechen/verändern wollen
  • Properties (Eigenschaften): Die zu verändernten Eigenschaften (Eigenschaft: NeuerWert;)
/* Syntax */
[SELEKTOR], [SELEKTOR2], ... {
    Eigenschaft1: Wert;
    Eigenschaft2: Wert;
    ...
}

/* Beispiel: Spricht jedes <p>-Element an und ändert den CSS-Wert von "color" auf "red"*/
p {
    color: red;
}


Arten von Selektoren
Selektor-Typ Spricht ... an
Name jeden "Name"-Tag
.Klasse jeden Tag, welche diese "Klasse" besitzt
#ID den Tag mit der "ID"

Selektoren kombinieren

Selektoren können auch kombiniert werden, um mehr Klarheit zu schaffen und an eine höhere Priorität zu gelangen. Beispiel:

/* Beispiel: Spricht jeden <p>-Tag mit der Klasse "cool" an */
p.cool {
    color: red;
}

Selektoren bedingt kombinieren

Name Kombinator Spricht ... an
Nachkommen div p jeden <p>-Tag, der sich in einem <div> befindet
Kinder div > p jeden <p>-Tag, welcher ein direkter Kindes-Tag von <div> ist
Direkter-Nachbar div + p Den direkt nachfolgenden <p>-Tag eines <div>s
Nachbar div ~ p Die nachfolgenden <p>-Tags eines <div>s
<div id="main">
    <p>Text1</p> <!-- Wird vom "div#main p" (Nachkommen) sowie "div#main > p " (Kinder) Selektor angesprochen -->
    <div>
        <p>Text2</p> <!-- Wird vom "div#main p" (Nachkommen) Selektor angesprochen (Nicht vom "div#main > p " (Kinder), weil es kein direktes Kind von "div#main" ist) -->
    </div>
</div>

<p>Text3</p> <!-- Wird vom "div#main + p" (Direkt-Nachbar) sowie "div#main ~ p" (Nachbar) Selektor angesprochen -->
<p>Text4</p> <!-- Wird vom "div#main ~ p" (Nachbar) Selektor angesprochen (Nicht vom "div#main + p " (Direkt-Nachbar), weil es nicht der erste <p> Nachfolger vom "div#main" ist)-->

Kaskadieren

Das C in CSS steht für Cascading - deutsch: "Kaskadieren".
Cascading bedeutet dass ein Element sein Aussehen vom ungebenden Elementen erbt.

Im folgenden Beispiel setzen wir das color-Attribut vom <p>-Element auf red.

  • Wegen der Kaskadierung hat auch dass <span>-Element, das innerhalb von <p> liegt, die-selbe color-Eigenschaft.
<p style="color: red;">Ich bin <span>immernoch</span> rot.</p>

Welche Eigenschaften kaskadieren + inherit

Nicht alle Eigenschaften kaskadieren.
Jene Eigenschaften die kaskadieren können akzeptieren auch den speziellen Wert inherit, der explizit bedeutet: "Erbe diese Eigenschaft vom umgebenden Element".

Kaskadiert Kaskadiert nicht
color background und background-*
font und font-* border und border-*
letter-spacing display
line-height float und clear
list-style und list-style-* height und width
text-align margin und margin-*
text-indent min- und max-height und -width
text-transform overflow
visibility padding und padding-*
white-space position
word-spacing top, bottom, left und right
text-decoration
vertical-align
z-index

CSS in Webseite einfügen

Um CSS in eine Webseite einzufügen gibt es 3 Möglichkeiten:

Inline (Sollte man nicht)

CSS-Eigenschaften direkt mithilfe vom style-Attribut des HTML-Elements einfügen.

<p style="color:red;">ROT</p>

Intern (Gut zum Testen)

CSS-Quellcode in einen eigenen Tag, welcher meist im Header/Footer plaziert wird, einfügen.

  • Besser als Inline, weil hierdurch zmdst. eine gewisse Trennung von CSS und HTML stattfindet und man mit Selektoren arbeiten kann und somit viel weniger wiederholen muss.
<style>
p {
    color: red;
}
</style>

<p>ROT</p>

Externe Datei (Optimalste Lösung)

Im HTML-Code nur einen Verweis auf eine Datei mit dem CSS-Quellcode einfügen.

  • Dies ist die optimalste Lösung, weil hier
    • eine eindeutige Trennung vom Aufbau (HTML) und Style (CSS) stattfindet,
    • man die CSS-Datei auf mehreren Seiten einfach einbinden kann und
    • der Browser die CSS-Datei cachen kann und für jede Webseite - die exakt diese Datei anfordert - nicht extra herunterladen muss
<link rel="stylesheet" type="text/css" href="Ordner/Datei.css"> <!-- "href" kann auch eine URL sein -->

<p>ROT</p>

Pseudo-Klassen: Spezielle Zustände selektieren

Eine Pseudoklasse wird verwendet, um einen speziellen Zustand eines Elements zu selektieren.

Syntax:

/* Bemerke: 1 Doppelpunkt bei Pseudo-KLASSEN, 2 Doppelpunkte bei Pseude-ELEMENTEN  */
[SELEKTOR]:[PSEUDO-KLASSE] {
  Eigenschaft1: Wert;
  Eigenschaft2: Wert;
  ...
}

Eine Liste aller Pseude-Klassen findet man hier.

<nowiki>
/* Selektiert das erste "&lt;i>"-Element eines "&lt;p>"-Elements */
p i:first-child {
    ...
}
/* Selektiert jedes "&lt;i>"-Element des ersten "&lt;p>"-Elements eines anderen Elements */
p:first-child i {
    ...
}
</nowiki>

Pseudo-Elemente: Bestimmte Teile selektieren

Ein CSS-Pseudoelement wird verwendet, um bestimmte Teile eines Elements zu selektieren. Beispiele dafür wären:

  • das erste Wort/die erste Zeile eines Elements zu stylen
  • Inhalt vor/nach einem Element einzufügen
/* Bemerke: 2 Doppelpunkte bei Pseude-ELEMENTEN, und 1 Doppelpunkt bei Pseudo-KLASSEN */
[SELEKTOR]::[PSEUDO-ELEMENT] {
  ...
}

Eine Liste aller Pseudo-Element findet man hier. (Gewisse Pseudo-Element-Selektoren können nur bestimmte Eigenschaften verändern, )

p::first-line {
  color: #ff0000;
  font-variant: small-caps;
}

Attribut-Selektor

Es ist möglich, HTML-Elemente mit bestimmten Attributen oder Attributwerten speziell zu gestalten.
Syntax:

SELEKTOR:[ATTRIBUT="TEXT"]{
    ...
}
Syntax Selektiert Elemente...
...[attribute] die das angegebene attribute enthalten
...[attribute="[value]"] bei denen der Wert von [attribute] auf "[value]" gesetzt ist
...[attribute~="[value]"] bei denen der Wert von [attribute] das Wort "[value]" enthält
="[value]"] bei denen der Wert von [attribute] mit genau dem Wort "[value]" anfängt (Ist der Wert "[attribute]XY" wird er nicht einbezogen, weil das erste Wort "[attribute]XY" ist, und nicht "[attribute]" alleine. Wörter werden durch ein "-" getrennt)
...[attribute^="[value]"] =" wird hier auch "[value]XY" einbezogen)
="[value]"] bei denen der Wert von [attribute] mit genau dem Wort "[value]" endet (Ist der Wert "[attribute]XY" wird er nicht einbezogen, weil das erste Wort "[attribute]XY" ist, und nicht "[attribute]" alleine. Wörter werden durch ein "-" getrennt)
...[attribute$="[value]"] =" wird hier auch "[value]XY" einbezogen)

Dies kann dazu verwendet werden, um gewisse Form-Elemente zu stylen:

input[type="text"] {
  ...
}

input[type="button"] {
  ...
}

Welcher Selektor wird bevorzugt

Wenn es denn fall gibt, dass mehrere Selektoren auf das gleiche Objekt zeigen (und dieses verändern wollen), gibt es gewisse Regeln:

  • Der Universelle Selektor (* oder body) hat am wenigsten Mitsprache-Rechte
  • Der Klassen-Selektor (.) hat ein vielfach höheres Mitsprache-Recht als ein Element-Selektor
  • Der ID-Selektor (#) hat ein höheres Mitsprache-Recht als Element/Attribut-Selektoren

Je genauer ein Selektor formuliert ist, desto eher werden seine Eigenschafts-Werte bevorzugt.

Gibt es 2 exakt gleiche Selektoren wird derjenige, der dem Element am nähsten liegt, bevorzugt.

/* Externe CSS-Datei: */
#content h1 {background-color: red;}

/* (Interner) Style, unterhalb des Verweises auf eine externe CSS-Datei: */
<style>
#content h1 { 
  background-color: yellow; /* Wird bevorzugt, da es im Quellcode unterhalb der CSS-Datei liegt */
}
</style>

<h1>Ich bin Geld</h1>

Genauigkeits-Hierarchie

(Je weiter oben desto mehr wird es bevorzugter):

  • Inline styles - < h1 style="color: #ffffff;">.
  • IDs - #navbar.
  • Attribute, Klassen und Pseudo-Klassen - .classes, [attributes] und Pseudo-Klassen :hover, :focus, etc.
  • Element-Namen und Pseudo-Elemente - h1, div, ::before and ::after.

Genauigkeit kalkulieren

Bei 0 starten. Je

  • 1000 für Style-Attribute
  • 100 für ID
  • 10 für jedes Attribute, jede Klasse oder jede Pseudo-Klasse
  • 1 für Element-Namen oder Pseudo-Element

hinzufügen. (Höher = besser)

Beispiele:

<nowiki>
A: h1
B: #content h1
C: <div id="content"><h1 style="color: #ffffff">Heading</h1></div>
</nowiki>

Die Genauigkeit von A ist 1 (1xElement) Die Genauigkeit von B ist 101 (1xID-Referenz und 1xElement) Die Genauigkeit von C ist 1000 (inline styling)

div#a {background-color: green;} /* Wird angewandt, weil es sein Element am genausten Beschreibt (mit Tag#ID) */
#a {background-color: yellow;}
div[id=a] {background-color: blue;}

Wenn es 2 komplett gleiche Selektoren gibt, gewinnt der am unteren Ende der CSS Datei.

h1 {background-color: yellow;}
h1 {background-color: red;} /* Wird angewandt, weil weiter unten ist */

Eigenschaften

Color

Eigenschaft Was verändert es?
color Farbe des Textes
background-color Farbe des Hintergrunds
border-color Farbe der Umrandung (Falls vorhanden)

Farb-Eigenschaften können auf mehrere Weisen angegeben werden:

  1. Simpler Name: Zur vereinfachung definiert CSS 140 Farben nach Englischen-Namen
  2. RGB (Rot, Gelb, Blau):
    1. Als Funktion: rgb(red, green, blue) für RGB und rgba(red, green, blue, alpha) für RGB mit Durchsichtigkeit.
    2. In HEXADEZIMAL-Schreibweise: #rrggbb oder #rgb (#333 wird als #333333 interpretiert)
  3. HSL (Farbton, Sättigung, Licht-Gehalt): hsl(hue, saturation, lightness) für HSL und hsla(hue, saturation, lightness, alpha) für HSL mit Durchsichtigkeit


RGB = Wertebereich jeweils von-bis 0-255
ALPHA = Wertebereich von-bis 0.0-1.0 (1= Vollkommen sichtbar, 0= Unsichtbar)

Background

Eigenschaft Beschreibung Beispiel
background-color Definiert eine Farbe als Hintergrund background-color: red;
background-image Definiert ein Bild als Hintergrund background-image: url("/images/paper.gif");
background-repeat Definiert, wie sich das Bild verdoppeln soll um Wie sich das Bild verdoppeln soll, sodass es den Bereich abdeckt background-repeat: repeat-y;
background-attachment Definiert ob/wie das Bild mit der Seite mit-scrollt background-attachment: fixed;
background-position Definiert die Start-Position des Bildes background-position: center;
background-size Definiert die zu nutzende größe des Bildes background-size: 300px 100px;


Größen-Angaben

(Für eine Liste aller Größeneinheiten sowie dessen Beschreibung hat selfhtml.org einen guten Beitrag):

Eigenschaft Bedeutung/Bemerkung
Physische Einheiten
cm (Centimeter)
mm (Millimeter)
in (Zoll) (1in = 96px = 2.54cm)
pt (Punkt) (1pt = 1/72 of 1in oder 1,33px)
pc (Pica) (1pc = 12pt oder 16px)
px (Pixel) Die Physische Größe ist bei einem Pixel variabel - Je nach Pixel-Dichte und Bildschirm-Größe kann ein Pixel klein, aber auch groß sein (1px = 1/96th of 1in oder 0,75pt)
Relative Einheiten
em Ein em repräsentiert die vom Browser berechnete Schriftgröße des Elements, oder im Falle von font-size: ... des Eltern-Elements. (2em = 2 mal so groß)
rem (Wurzel-em) Ein rem (root-em) entspricht der Schriftgröße, die für das Wurzelelement (in HTML das html-Element) festgelegt wurde.
ex ("x"-Höhe) Sofern die verwendete Schriftart eine Höhe für den Buchstaben "x" definiert, wird dieser Wert verwendet. Andernfalls entspricht ein ex genau einem halben em (0.5em).
ch ("0"-Breite) Sofern die verwendete Schriftart eine Breite für den Buchstaben "0" definiert, wird dieser Wert verwendet. Andernfalls wird versucht die durchschnittliche Breite aller Zeichen zu berechnen.
vm (Viewport-Breite) Die Einheit vw entspricht dem 100. Teil der Breite des Anzeigebereichs (Viewport).
vh (Viewport-Höhe) Die Einheit vh entspricht dem 100. Teil der Höhe des Anzeigebereichs (Viewport).
vmin (Viewport-Minimalabmessung) Die Einheit vmin entspricht dem 100. Teil der Breite oder der Höhe des Anzeigebereichs (Viewport), je nachdem, welcher Wert der kleinere ist. Bei einem Viewport mit den Maßen 621px×500px entspräche 1vmin also genau 5px.
vmax (Viewport-Maximalabmessung) Die Einheit vmax entspricht dem 100. Teil der Breite oder der Höhe des Anzeigebereichs (Viewport), je nachdem, welcher Wert der größere ist. Bei einem Viewport mit den Maßen 800px×431px entspräche 1vmax also genau 8px.
% (Prozent) 100% entsprechen der maximal einnehmbaren Größe. (Wenn ein Bild mit 100% in einem div liegt, dass width: 300px; hat, ist das Bild auch nur 300px groß.)

Das Das CSS Box-Model (Content, Padding Border, Margin)

Alle HTML-Elemente können wie eine Box angesehen werden, welche aus folgenden Eigenschaften/Bereichen besteht:

  • dem Content: Der eigentliche Text/das eigentliche Bild
  • dem Padding: Transparenter Abstand-Bereich rund um dem Inhalt
  • der Border: Eine Umrandung des Paddings
  • das Margin: Transparenter Abstand-Bereich rund um die Border

Width + Height

Die Eigenschaften width und height wirken nur auf den Content-Bereich. Zur eigentliche größe, welche das Element einnimt, gehört natürlich die ganze Box.

Dynamische Größen (Max-Width/Height)

Für Responsiven-Webseiten benutzt man meißt [max/min ]-width und [max/min ]-height. Diese legen die minimale/maximale Größe eines Objektes fest.

  • Würde man nur width: 400px; verwenden, und der Nutzer hat ein Gerät welches in der Breite unter 400-Pixel ist, kann er einen gewissen Abschnitt garnicht erst sehen oder muss extra nach Rechts scrollen und sieht immer nur einen Teil.
  • Wenn man hingegen max-width: 400px; verwendet, kann die Box bei kleineren Geräten sich auch dementsprechend anpassen

Border

Eigenschaft Was verändert es? Beispiel
border alle Border-Eigenschaften in einer Deklaration border: 5px solid red;
border-color* alle Farben der 4 Ränder border-color: red blue orange yellow;
border-radius* alle 4 Rand-Radien border-radius: 25px 20px 15px 5px;*
border-style* alle Styles der 4 Seiten (Siehe W3Schools PlayIt! für eine >interaktive< Auflistung aller Möglichkeiten) border-style: dotted solid double dashed;*
border-width* die längen aller 4 Seiten border-width: 8px 6px 4px 2px;

Zusätzlich zu den obrigen "1-Zeile-Deklarationen" kann man auch noch jede Seite in einer einzelnen Zeile deklarieren: border-[top/right/bottom/left]-[color/style/width]

Bei mit Sternchen(*)-markierten Eigenschaften gibt es mehre Möglichkeiten:

  • Mit 4 Werten definiert man jeweils oben rechts unten links an
  • Mit 3 Werten definiert man jeweils oben rechts-links unten an
  • Mit 2 Werten definiert man jeweils oben-unten rechts-links an
  • Mit nur einem Wert definiert man alle seiten zugleich

Outline

Anders wie die Border ist die Outline nicht Teil der Tag-Boxs, und kann somit ggf. anderen Content überdecken.

Eigenschaft Was verändert es?
outline alle Outline-Eigenschaften in einer Deklaration outline: 5px dotted green;
outline-color* Farbe der Outline outline-color: red blue orange yellow;
outline-offset* Abstand zwischen Outline und der eigentlichen Border des Elements outline-offset: 2px;
outline-style* Style des Outlines (Siehe W3Schools PlayIt! für eine >interaktive< Auflistung aller Möglichkeiten) outline-style: dotted solid double dashed;
outline-width* Breite der Outline outline-width: 8px 6px 4px 2px;

Bei mit Sternchen(*)-markierten Eigenschaften gibt es mehre Möglichkeiten:

  • Mit 4 Werten definiert man jeweils oben rechts unten links an
  • Mit 3 Werten definiert man jeweils oben rechts-links unten an
  • Mit 2 Werten definiert man jeweils oben-unten rechts-links an
  • Mit nur einem Wert definiert man alle seiten zugleich

Texte

Eigenschaft Was verändert es?
color Farbe des Texts color: red;
direction Richtung des Textes (Rechts-zu-Links / Links-zu-Rechts) direction: rtl;
letter-spacing Abstand zwischen einzelnen Buchstaben letter-spacing: 1px;
word-spacing Abstand zwischen Wörtern word-spacing: 1em;
line-height Größe einer Zeile line-height: 150%;
text-align Horizentale Text-Ausrichtung text-align: center;
text-decoration Text-Dekoration text-decoration: underline overline dotted red;
text-indent Indentation (Abstand) der ersten Zeile eines Textes text-indent: -2em;
text-shadow Schatten-Effekt des Textes text-shadow: 2px 2px #ff0000;
text-transform Kapitalisierung des Textes text-transform: uppercase;
text-overflow Wie nicht anzeigbarer Inhalt dargestellt werden soll (zB. das div-Element schränkt den Text in eine vorgesehene Größe) text-overflow: ellipsis;
vertical-align Vertikale Text-Ausrichtung vertical-align: text-top;
white-space Wie Zeilenumbrüche des HTML-Dokuments angezeigt werden sollen. (Ob ein Umbruch im HTML-Quellcode auch ein Umbruch in der Anzeige bewirken soll, wie <br> es macht)) white-space: nowrap;

Schriftarten

Eigenschaft Was verändert es?
font Alle Eigenschaften in einer Deklaration italic bold 12px/30px Georgia, serif
font-family Schriftfamilie font-family: "Times New Roman", Times, serif
font-size Schriftgröße font-size: 2em;
font-variant Ob die Schrift in small-caps dargestellt werden soll font-variant: small-caps;
font-weight Linien-Dicke der Schrift font-weight: bold;

Unterschied: Serif, Sans-Serif und Monospace

Schriftarten können grundsätzlich in 3 Gruppen, sog. "Generic Fonts", unterteilt werden.

Generic Font (Gruppe) Beispiele Beschreibung
Serif Times New Roman, Georgia Feine Linien am Ende einiger Charaktere
Serif Arial, Verdana Keine Serifen, Strichstärke der Buchstaben (nahezu) gleichmäßig
Monospace Courier New, Lucida Console Alle Charaktere haben die gleiche Breite

TODO wie man schriftarten von einer externen Quelle einfügt (https://en.wikipedia.org/wiki/Web_typography)

Icons

Am einfachsten fügt man Icons mit sog. CSS-Icons-Bibliotheken zu seiner Webseite hinzu. Meine Favoriten:

  • FontAwesome: <script defer src="https://use.fontawesome.com/releases/v5.7.1/js/all.js" integrity="sha384-eVEQC9zshBn0rFj4+TU78eNA19HMNigMviK/PU/FFjLXqa/GKPgX58rvt5Z8PLs7" crossorigin="anonymous"></script>
  • Google Material Icons: <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

All diese Icons sind Frei-Skalierbare "Vektor-Grafiken", dessen Eigenschaften man mit CSS verändern kann (Farbe, Größe, Schatten)

Position

Die position-Eigenschaft bestimmt, welche Methode zur Positionierung eines Elements genutzt werden soll.

Wert Beschreibung
static (Standard) Positioniert sich nach dem Flow der Webseite.
relative Positioniert sich relativ zu seiner normalen Position und dient als Anker-Punkt für weitere Elemente mit Relativ-Koordinaten (Siehe unten)
fixed Positioniert sich relativ zu dem Viewport der Webseite. Ein fixes Element ist wie auf einer eigenen Ebene: Es verändert den Webseiten-Flow nicht und scrollt nicht mit.
absolute Positioniert sich relativ zu seinem nähesten Anker-Punkt/Vorfahren. (Kontrast: fixed nimmt immer den Viewport als Anker)
sticky Ein Element mit position: sticky; wechselt seinen Status zwischen fixed und relative:

Wenn man es eigentlicht nicht-mehr sehen würde wechselt es auf fixed, um ggf. durch die angegebenen Relativ-Koordinaten wieder auf dem Bildschirm zu fixiert zu erscheinen (- ohne jegliches JS).

TODO weiterlesen und ggf. korrigieren und hinzufügen

(Relativ)-Koordinaten

Bei allen Positionierungs-Methoden - ausgeschlossen static - kann die relative-Positionierung durch die Eigenschaften top, right, bottom und left verschoben werden.
Zur Veränderung müssen mindestens 1 oder 2 der genannten Eigenschaften (X/Y) gesetzt werden.

Beispiele:

  • Setzte ich bei einem relative-Element left: 50px; wird es 50px nach rechts eingerückt.
  • Setzte ich bei einem static-Element bottom: 0px; right: 0px; wird es ganz unten Rechts sein

Z-Index

Die Eigenschaft z-index trägt zur Bestimmung, welches Element über einem anderen liegt, bei.

Bei komplexeren Projekten merkt man schnell: Es gibt mehr Variablen die zur Bestimmung "welches Element über einem anderen sein sollte" mitwirken, als nur ein höherer/niedriger z-index Wert. Siehe hierzu einen Eintrag von freecodecamp.org über das Thema z-index und Stacking Context.

Display

Die display-Eigenschaft beschreibt wie oder ob ein Element angezeigt werden soll:

display-Wert Beispiel Beschreibung
block <div>, <h1> - <h6>, <p>, <form>, <header>, <footer>, <section> Ein Block-Level Element startet immer eine neue Linie und nimmt die gesamte verfügbare Breite ein
inline <span>, <a>, <img> Ein Inline-Level Element startet keine neue Zeile und nimmt nur die Breite ein, welche es benötigt
inline-block <span>, <a>, <img> Wie inline, erlaubt jedoch das setzten von width und height
none <script> Versteckt das HTML Element, als würde es nicht mehr existieren und stört somit nicht-mehr den Flow der Webseite. (Platzt kann von etwas anderem eingenommen werden).

Im Gegenzug dazu macht visibility: hidden; das HTML-Element nur unsichtbar. Siehe W3Schools TryIt!: display

Ein oft genutztes Beispiel ist es, Listen-Elemente (<li>) für Horizontale Menüs auf display: inline; zu setzen[1].

Overflow

Die overflow-Eigenschaft beschreibt ob ein Content abgeschnitten werden soll oder eine Scroll-Bar hinzugefügt werden soll.

  • visible (Standard): Der überragende Content wird nicht abgeschnitten und geht über die Box hinaus
  • hidden: Der überragende Content wird abgeschnitten (clipped) und somit nichtmehr sichtbar
  • scroll: Der Content wird abgeschnitten (clipped) aber dafür wird eine Scrolling-Leiste hinzugefügt, um den restlichen Inhalt anzusehen
  • auto: Wie scroll, fügt die Scrolling-Leiste aber nur wenn nötig hinzu

Zudem gibt es noch overflow-x und overflow-y für die unterschiedlichen Scroll-Leisten.

Float und Clear

Die float-Eigenschaft definiert wie ein Element sich im Flow schwebend-platzieren soll - und die clear-Eigenschaft bestimmt, auf welcher Seite keine Elemente schweben dürfen.
Wird/Wurde oft verwendet, um ein Bild neben einen Text zu platzieren.

float-Wert Beschreibung
none (Standard) Das Element positioniert sich nach dem Flow der Webseite
left Das Element positioniert sich auf der linken Seite
right Das Element positioniert sich auf der rechten Seite
clear-Wert Beschreibung
none (Standard) Erlaubt schwebende Elemente auf beiden Seiten
left Erlaubt keine schwebenden Elemente auf der linken Seite
right Erlaubt keine schwebenden Elemente auf der rechten Seite
both Erlaubt keine schwebenden Elemente


Um zB. 3 Bilder nebeneinander anzuzeigen kann man diese in ein div mit folgenden Eigenschaften packen: Beispiel: 3 div's, welche zB. ein Bild beinhalten können, nebeneinander platzieren lassen:

div {
  float: left;
  width: 33.33%; /* 3 Container (25% für 4, 50% für 2, ...) */
  padding: 5px; /* if you want space between the images */
}

Opacity

Die opacity-Eigenschaft definiert die Transparenz (den sog. Alpha-Wert) eines jeglichen Elements. Sie kann einen Wert von 0.0 (Völlige Transparenz) bis 1.0 (Völlige Sichtbarikeit) einnehmen.

Pseudo-Klassen von Hyperlinks

Pseudo-Klasse Beschreibung
a:link Normaler, nicht besuchter Link
a:visited Ein bereits besuchter Link
a:hover Ein Link über den die Maus gerade hovert
a:active Ein Link auf den gerade geklickt wird

Wichtige Merkmale:

  • a:hover MUSS nach a:link und a:visited kommen
  • a:active MUSS nach a:hover kommen

Tipp: text-decoration: none; wird oft genutzt, um die unterline von einem Link zu entfernen.

Aus Links werden Knöpfe

Mit einer Kombination aus mehreren Eigenschaften und Pseudo-Klassen kann man einen Link wie einen Knopf aussehen lassen, der beim Hovern den Status verändert und beim Klicken sich wie bei einem "Knopf-Druck" eindrückt:
(Hier eine Webseite, die dich solch einen Knopf in hand-um-drehen generieren lässt: https://www.bestcssbuttongenerator.com/)

Beispiel-CSS:

<!--HTML-->
<a href="#" class="myButton">Hey</a>

<!--CSS-->
.myButton {
	background-color:#44c767;
	-moz-border-radius:28px;
	-webkit-border-radius:28px;
	border-radius:28px;
	border:1px solid #18ab29;
	display:inline-block;

	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	font-size:17px;
	padding:16px 31px;

	text-decoration:none;
	text-shadow:0px 1px 0px #2f6627;
}
.myButton:hover {
	background-color:#5cbf2a;
}
.myButton:active {
	position:relative;
	top:1px;
}

Listen

Eigenschaft Was verändert es? Beispiel
list-style Definiert ob die List-Item Markierung zum Content gehört oder ausserhalb davon liegen soll. list-style-position: inside;
list-style-position Position des List-Item-Markers (In der Content-Box des Items oder eigene Box)
list-style-type Definiert einen vorgeschriebenen Art für die List-Item Markierung. list-style-type: circle;
list-style-image Lässt einen ein eigenes Bild als List-Item Markierung definieren. list-style-image: url('sqpurple.gif');


Tabellen

Mit der Pseudo-Klasse :nth-child([even/odd/Zahl]) des tr (Table Row)-Elements kann mann jede n-te Zeile unterschiedlich kaskadieren.

Interesannte Links zum Thema Tabellen:

Responsive Tabellen

Um eine Tabelle Responsiv zu machen, kann man die Tabelle mit einem div umranden dessen overflow-x-Eigenschaft auf auto gesetzt wurde.
Ist das Endgerät nicht breit genug, um die Tabelle in der vollen Länge auf dem Bildschirm darzustellen, wird hiermit ein Vertikaler Scrollbalken angezeigt - anstatt dass die Seite einen unnötigen und nervigen Scrollbalken bekommt oder raus-steht.


TODO Weiterschreiben mit CSS Advanced Eigenschaften https://www.w3schools.com/css/

Beispiel-Projekte

Navigations-Bar mit CSS Dropdown Menüs Forms stylen CSS-Counter Beispiel mit Listen CSS Responsives Webseiten-Layout