HTML / CSS LEVEL 2

Teil 3

Absolute Units

https://developer.mozilla.org/en-US/docs/Web/CSS/length#Absolute_length_units

http://jsbin.com/zapifak/edit?html,css,js,output

Pixel, je nach Anzeigegerät

cm, mm

1 cm / mm auf Display

Zoll, 1in = 2.54cm

Picas, 1pc = 12pt = 1/6in

Punkte, 1pt = 1/72i

Relative Units

Relativ zur Schriftgrösse

https://developer.mozilla.org/en-US/docs/Web/CSS/length#Font-relative_lengths

http://jsbin.com/hayico/edit?html,css,output

Schriftgrößen, 1em = aktuelle Schriftgröße

rem

Die Schriftgröße des Wurzelelements (<html>)

Breite der Null ("0") der aktuellen Schriftart.

Schrifthöhe, 1ex = aktuelle Schrifthöhe

http://jsbin.com/xikupu/edit?html,css,output

Relative Units

Relativ zum Viewport

https://developer.mozilla.org/en-US/docs/Web/CSS/length#Viewport-percentage_lengths

http://jsbin.com/toxiza/edit?html,css,output

1/100 der Viewport Höhe

1/100 der Viewport Breite

vmin

1/100 des kleinstmöglichen Wertes zwischen der Höhe und Breite des Viewports

vmax

1/100 des grösstmöglichen Wertes zwischen der Höhe und Breite des Viewports

Übung mit units

http://jsbin.com/valiqu/edit?html,css,output

The Percentage %

https://developer.mozilla.org/de/docs/Web/CSS/percentage

Immer kontextabhängig

Meistens auf Elternelement bezogen

Übung

Prozente richtig anwenden

Pseudo Elements

https://developer.mozilla.org/de/docs/Web/CSS/Pseudo-elements

:before

:after

<div>

</div>

Ursprünglicher <div> Inhalt

Übung

Pseudo Elemente für grafische Elemente verwenden

Ressourcen

https://css-tricks.com/the-lengths-of-css/

http://www.impressivewebs.com/understanding-em-units-css/

Weitere JSBins

http://jsbin.com/quqiyu/edit?html,css,output

http://jsbin.com/zacoxu/edit?html,css,output