CSS: Text gestalten

03. Juli 2016 von | Kategorie(n): Programmierung
Schlagwörter: // // //

WĂŒrde ich alles zeigen, was mit Texten möglich ist (in Kombi mit CSS), wĂŒrde das hier auf jeden Fall den Rahmen sprengen. Deshalb soll es jetzt nicht darum gehen alles bund, blinkend und grell zu machen (:D), sondern so, dass es angenehm zu lesen ist. 😉

Vorab

Wie könnte man einen Text gut lesbar machen ? Dies ist mit einfachen Dingen, wie Schriftart und SchriftgrĂ¶ĂŸe möglich. Aber auch Kleinigkeiten können zum angenehmen Lesen fĂŒhren: Zeilenabstand, Schriftfarbe. Schriftfarbe, indem man keinen tiefes Schwarz nimmt (#000), sondern lieber ein dunkles Grau (#222) :))

Quellcodeee

<html>
<head>
	<title> Text gestalten / CSS Beispiel </title></title>
	<style type="text/css">
		.gestaltet {
			font-family: Arial;
			font-size: 16px;
			color: #222;
			line-height: 24px;
		}
	</style>
</head>
<body>
	<div style="max-width:600px;">
		<h3> Text ohne Gestaltung </h3>
		<p> Das hier ist echt ein netter Platzhalter, findest du nicht ? CSS macht HTML schön, aber du findest auf coder-tim.de auch noch 
			Tutorials ĂŒber PHP. Das ist auch echt nice... Irgendwie wird das ganze hier grade zu einem Monolog. Und ich fĂŒrchte, die Rechtschreibung
			bleibt da etwas auf der Strecke. Was soll's ? Wer weiß, ob jemand den Text hier ĂŒberhaupt ließt... Vielleicht ja, vielleicht nein.
			Aber eigentlch macht es auch keinen Sinn, sich irgendwas aus den Fingern zu ziehen, oder ? Wenn es zu einem Thema nicht viel/genug zu sageb 
			gibt, brauch man auch nicht weiter drĂŒber reden, findest du nicht auch ?</p>
		<h3> Text mit Gestaltung </h3>
		<p class="gestaltet"> Das hier ist echt ein netter Platzhalter, findest du nicht ? CSS macht HTML schön, aber du findest auf coder-tim.de auch noch 
			Tutorials ĂŒber PHP. Das ist auch echt nice... Irgendwie wird das ganze hier grade zu einem Monolog. Und ich fĂŒrchte, die Rechtschreibung
			bleibt da etwas auf der Strecke. Was soll's ? Wer weiß, ob jemand den Text hier ĂŒberhaupt ließt... Vielleicht ja, vielleicht nein.
			Aber eigentlch macht es auch keinen Sinn, sich irgendwas aus den Fingern zu ziehen, oder ? Wenn es zu einem Thema nicht viel/genug zu sageb 
			gibt, brauch man auch nicht weiter drĂŒber reden, findest du nicht auch ?</p>
	</div>
</body>
</html>

Ansehen

ErklĂ€rung: Du siehst zwei Texte. Der obere ist einfach „normaler“ Text, so wie er halt aussieht, wenn dein Browser ihn ohne CSS-Einwirkung darstellt. Der untere ist einfach mit den Tipps und Tricks von oben bearbeitet.

Ich merke gerade: Mehr gibt’s da gar nicht zusagen 😀 Ups… Ich denke dieser kleine aber feine Quelltext erklĂ€rt sich von selbst (falls nicht ⇒ ab in die Kommentare mit deinen Fragen :D). Naja gut, das lĂ€uft dann wieder unter dem Tag kurzundknackig… aber diesmal vom Feinsten 😀

 

Du willst deinen Senf dazugeben ? Schau mal unter die Autor-Infos 😉  ⇓⇓⇓

<Tim Poerschke />

Was denkst du ĂŒber diesen Post?
  • Gut (0)
  • Hilfreich (0)
  • Nicht gut (0)
  • Lustig 😀 (0)
Diesen Post teilen:
Facebooktwittergoogle_plusredditpinterestlinkedinmail

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

29 − = 27