Kategorie: CSS

Tips und Tricks rund um die Verwendung von Cascading Style Sheets CSS. Wie man das Erscheinunghsbild einer Webseite durch die Verwendung von Cascading Style Sheets verändern kann. Welche Möglichkeiten Cascing Style Sheets bieten. Inline Styles versus Style Sheets. Bugfixes für Internet Explorer

Font Awesome – der quasi Icon-Standard

Seien wir doch mal ehrlich: so ziemlich jede Seite, die man heutzutage besucht, bietet an der einen oder anderen Stelle Icons. Und in den allermeisten Fällen dürften diese Icons aus dem Font Awesome-Satz entsprungen sein. Font Awesome ist zunächst mal ein Schriften-Toolkit, basierend auf CSS und LESS, mit dem sich spezielle Vektorgrafiken anzeigen lassen. Im […]

19. Februar 2020 | CSS

Cascading Style Sheets (CSS) gibt es nun seit gut zehn Jahren. Sie haben sich zum Standard für die Formatierung von Schriften und Aussehen von HTML entwickelt. Die Angaben, die entweder in einer ausgelagerten Datei oder im Code der Seite selbst eingebettet sein können, haben den Tag <font> abgelöst. Durch Vergabe von eindeutigen Bezeichnungen und für mehrere Elemente verwendbare Klassen lassen sich im Zusammenspiel mit Javascript komplexe Programme erstellen, die somit auf die einzelnen Teile zugreifen und sie verändern können.
Aber das wirklich tolle an Cascading Style Sheets CSS ist, dass sich damit auch einige anspruchsvolle Formatierungen nachbilden lassen, die die Herzen von Typografen höher schlagen lassen werden. Stilistische Veränderungen, die man vorher nur von anspruchsvollen Textsatzprogrammen wie Quark XPress oder Adobe InDesign kannte, gehen bis zu einem gewissen Grad auch in CSS. Selbst Formatierungen, die das typografisch sowieso nicht besonders fähige Microsoft Word nicht kann, lassen sich erzeugen.

Hier mal ein kurzer Schnelldurchlauf:

font-weight:bold

Dieser Absatz ist in Bold gesetzt, zu deutsch in Fettschrift

font-style: italic

Dieser Text ist kursiv gesetzt

Neben den Selbstverständlichkeiten wie der Veränderung von Schriftschnitt, Schriftfarbe und Größe kann man mit dem Kommando line-height die Zeilenhöhe beeinflussen.

Dieser Beispieltext hat einen ganz engen Zeilenzwischenraum. Er ist mit einem Zeilenabstand von nur 12 Punkt formatiert, wodurch sich das Lesen des Textes deutlich erschweren dürfte. Das ist absichtlich passiert. um den Effekt dieser Formatierung auch mal über mehrere Zeilen hin demonstrieren zu können.

Diese Formatierung dürfte vor allem dann hilfreich sein, wenn man Kleingedrucktes noch etwas kleiner und unleserlicher am unteren Rand einer Seite anzeigen lassen möchte. Normalerweise möchte man als Webdesigner ja vermeiden, dass manche Texte nicht zu lesen sind, aber wenn man besonders fiese Klauseln abdrucken muss, aber nicht unbedingt will, dass die Kunden sie auch wirklich lesen bevor sie sie akzeptieren, dann dürfte ein kleiner Zeilenabstand dabei helfen. Ein Schelm übrigens der Böses dabei denkt.

Auch ein sehr netter typografischer Effekt ist die Einrückung des Absatzanfangs. Der Einzug, also der Leerraum zu Beginn eines Absatzes, kann auch mit Cascading Style Sheets erzeugt werden. Hierfür muß dem<p>, das den Absatz umfasst, über die Erweiterung style=“text-indent:1em“ mitgeteilt werden, wie groß die Einrückung sein soll. Die Werte können in Punkt (pt), Pica (pc), Zoll (in), Millimeter (mm), Zentimeter (cm), Pixel (px), Element (em), kleines x (ex) oder relativ in Prozent (%) angegeben werden.

Dies ist ein weiterer Beispieltext, bei dem das erste Wort des Absatzes eingerückt ist, die restlichen Zeilen hingegen sodaß ein klassisches Textbild entsteht, dass den Leser zum Weiterlesen animiert und den Text harmonisch und gefällig aussehen lässt. Diese Art von Textsatz sieht man noch häufig im Buchsatz und in einigen Zeitschriften. .

Man kann das Ganze aber auch anders herum verwenden und nur die erste Zeile links anfangen lassen, während die restlichen Zeilen eines Absatzes eingerückt werden. Dies erreicht man indem man dem Attribut text-indent einen negativen Wert gibt, den Abstand (padding) aber positiv hält.

text-indent:-2em;
padding-left:2em;

Dies ist ein Beispiel für negativen Einzug am Absatzanfang und positiven Abstandwert für den restlichen Absatz. Es gibt mit Sicherheit einige Verwendungsmöglichkeiten für diese Art von Formatierung.

Auch Kapitälchen lassen sich umsetzen, also die Großbuchstaben, die anstelle der Kleinbuchstaben eingesetzt werden.
font-variant: small-caps

Dieser Text wurde mit Kapitälchen gesetzt. Alle Buchstaben sind Großbuchstaben, nur die Versalien sind richtig große Großbuchstaben

Mit letter-spacing kann man auch Sperrungen erzeugen. Zulässig sind hierbei ebenfalls Zahlenwerte in Punkt (pt), Pica (pc), Zoll (in), Millimeter (mm), Zentimeter (cm), Pixel (px), Element (em), kleines x (ex) oder relativ in Prozent (%).

letter-spacing:.2em;

Dieser Text wurde mit einer Sperrung von 5em gesetzt. Dabei stehen die einzelnen Buchstaben sehr weit auseinander, wodurch der ganze Text relativ schwer zu lesen ist. Diese Art der Formatierung eignet sich wohl eher für Headlines and auszeichnungen als für Fließtext.

Mehr zum Thema:
Barrierefreies Webdesign – Typografie | Lankau.de

Fließende Positionierung mit CSS

Während man früher als Webdesigner häufig schon beim Codieren dran denken musste, wo welches Element auf der fertigen Seite hin soll, kann man sich durch die Verwendung von Cascading Style Sheets (CSS) viel Zeit und Nerven sparen und Dinge dynamisch positionieren.

14. Oktober 2011 | CSS