Diesen Artikel teilen
Infos zum Artikel
Artikel-Thema: Praktisches CSS-Beispiel für Dimensionen beim Text
Beschreibung: Praktisches Beispiel in 👍 CSS für die Dimensionen von Text mit voreingestellter ✅ Breite und Höhe für ein späteres Layout.
Das Beispiel zeigt, wie sich der Text verändern lässt, indem man die Dimensionen definiert. Normalerweise wird man mit Absätze arbeiten und die Höhe des Zeilenabstandes festlegen sowie den Abstand zum Rahmen des Textbereiches. Man kann aber auch aus Stilmittel heraus ganz andere Dimensionen wählen wie in diesem Fall mit einem roten Balken, der hervorgehoben wirkt und den Text in den Mittelpunkt rückt.
Ein anderes Stilmittel sind unterschiedliche Breiten beim Text, wobei es nicht ein Text für sich sein muss. Man kann die Höhe und die Breite auch bei anderen Elementen festlegen wie auch bei Bildern, Tabellen und ähnlichen Modulen, die man auf einer Webseite oder einer ganz bestimmten Unterseite anzeigen möchte.
Webhosting mit viel Software bei Alfahosting (Affiliate-Link)
Absatz ohne Einstellungen.
Das ist ein ganz normaler Absatz, der ohne CSS eingestellt wurde. Er nutzt die gesamte Breite aus.
Dieser Absatz nutzt die gesamte Breite nicht aus, sondern ist auf 60 Prozent der verfügbaren Fläche begrenzt.
Eine weitere Ebene mit max-height:20%;
Zeile zwei geht sich noch aus
Zeile drei auch
Aber Zeile vier wäre schon außerhalb - die Höhe wird aber nicht erweitert.
In den Anfangszeiten des Webdesign hat man mit sehr vielen Farben und teilweise komplett dunkelblauem Hintergrund gearbeitet, weil man mit den Farben spielen konnte. Längst ist man darauf gekommen, dass ein weißer Hintergrund besser ist, weil man den Text aufgrund des Kontrastes viel besser und leichter lesen kann. Aber damit hat man die Möglichkeit, andere Farben einzusetzen, um Inhalte hervorzuheben.
Das kann eine Werbeschaltung sein, das kann aber auch eine wichtige Zusatzinformation sein, wie man das bei Zeitungen als Infobox kennt. Durch den Wechsel der Hintergrundfarbe hebt man solche Elemente sehr leicht hervor und erreicht viel mehr als etwa mit dickem Rahmen oder ähnlichen Ideen.
Webhosting bei Alfahosting - jetzt gratis testen! (Affiliate-Link)
Die Positionierung ist in CSS eine der Hauptaufgaben und am Anfang nicht immer schlüssig. Margin wird gerne mit Padding verwechselt und nicht jedes float ist richtig gesetzt. Aber wenn man sich eingearbeitet hat, hat man ein mächtiges Werkzeug zur Verfügung. Wichtig ist dabei das Verständnis der Positionsarten.
Ein ganz eigenes Thema ist float, das eigentlich als Textfluss umschrieben werden muss. Doch es regeln das Verhältnis von ganzen Textbereichen oder den Hauptspalten zueinander ebenso.
Ebenfalls sehr oft im Einsatz sind natürlich die Abstände - Abstand vor und nach der Überschrift, vor und nach dem Text sind nur ein paar der Situationen.
Weitere Möglichkeiten bestehen darin, die Breite zu begrenzen oder die Höhe fest anzugeben. Auch die Arbeit mit verschiedenen Schichten oder auch Ebenen mit Indexangabe ist eine Option bei der Positionierung.
Themenseiten
Artikel-Thema: Praktisches CSS-Beispiel für Dimensionen beim Text
Beschreibung: Praktisches Beispiel in 👍 CSS für die Dimensionen von Text mit voreingestellter ✅ Breite und Höhe für ein späteres Layout.
Grundlagen
HTML-Grundlagen
CSS-Grundlagen
Javascript-Grundlagen
PHP-Grundlagen
MySQL-Grundlagen
SEO-Grundlagen
Infos, Tipps, Vermarktung
Webdesign-Lexikon
Online-Werbung
PHP-Codeschnipsel
Praxisartikel