HTML: Erste Styling-Versuche

01. Mai 2016 von | Kategorie(n): Programmierung
Schlagwörter: // // //

Die Grundlagen von HTML beherrschst du jetzt. Das ist doch schön! 🙂 Aber da wird es doch mal Zeit, das ganze Gebamsel gut aussehen zu lassen. 😀 Denn vielleicht möchte man auch mal Bilder einen Rahmen verpassen und die Ecken abrunden, ohne das Bild zu beschneiden. Auch wichtige Wörter oder AbsĂ€tze können zur besseren Lesbarkeit bearbeitet werden. Und da gibt’s noch mehr…

Styling. Wie soll das gehen ?

Das ĂŒbernimmt die Sprache CSS fĂŒr uns. Ihr kann man sagen: Mach den Hintergrund so und den Rahmen so (usw.). Genaueres erfĂ€hrst du in der CSS-Reihe.

<html>
<head>
	<title> Erste Styling Versuche </title>
</head>
<body style="background:lightgrey;">
	<h1 style="font-size:30px;font-family:Arial;color:#F00;"> Mal eine andere Überschrift 😀 </h1>
	<p style="background:black;color:#FFF;font-family:Arial;"> Cooler weißer Text auf schwarzem Hintergrund. Nicht schlecht 😉 <br/> Hier folgt eine Tabelle: </p>
	
	<table style="background:green;width:300px;">
		<tr>
			<td> Eugene </td>
			<td> 20 Pkt </td>
		</tr>
		<tr>
			<td> Abraham </td>
			<td> 17 Pkt </td>
		</tr>
	</table>
	<img src="amsterdam2016.JPG" style="width:300px;height:200px;border-radius:12px;" />
	</body>
</html>

Ansehen

ErklĂ€rung: Bei jedem HTML-Objekt ist nun ein neues Attribut zu erkennen, das style-Attribut. Dies sagt dem Browser, dass gestylt werden muss. Und alles was zwischen den GĂ€nsefĂŒĂŸchen steht, ist CSS-Syntax (nĂ€heres dazu erfĂ€hrst du ebenfalls in der CSS-Reihe; grob auch schon hier :D).

Aber was steht da in den GĂ€nsefĂŒĂŸchen? Die Syntax sieht so aus: Eigenschaft: Wert; (bspw. wie bei h1: font-size:30px;). Das Beispiel bedeutet, dass die SchriftgrĂ¶ĂŸe auf 30 Pixel gesetzt wird. Dies wird auch so angezeigt.

Die einzelnen CSS-Eigenschaften:

background: Diese Eigenschaft setzt die Hintergrundfarbe eines HTML-Objekts auf den entsprechenden Wert. Auch Bilder sind als Hintergrund möglich. Jedoch reichen fĂŒr den Anfang erstmal Farben. In der Regel werden diese im Hexadezimalsystem angegeben, z.B. #FF0000. Dies wĂ€re Rot, da in CSS die Farben im RGB-Format (Rot GrĂŒn Gelb) angegeben werden. Von 120 „Grundfarben“ kann auch der Name anstatt der Hexadezimalwert geschrieben werden. Wichtig: Am Bildschirm werden keine Farben gemischt, wie in Kunst :D. Hier wird Licht gemischt.

font-size: Wie schon erwĂ€hnt. Die SchriftgrĂ¶ĂŸe in Pixeln.

font-family: Diese Eigenschaft beschreibt die Schriftart. Doch sollten keine exklusiven, mega außergewöhnlichen Arten verwendet werden. Browser beherrschen nur die gĂ€ngigen Schriften. (Im Code habe ich Arial verwendet)

color: Das ist einfach die Schriftfarbe. Die Angabe erfolgt, wie bei der background-Eigenschaft.

width / height: Breite bzw, Höhe in Pixeln. Diese Eigenschaften ersetzen die bereits bekannten HTML-Attribute width & height.

Das beste zum Schluss 😀 ⇒ border-radius: Diese Angabe erfolgt ebenfalls in… dreimal raten… PIXELN!!! Wow :D. Es rundet die Ecken eines Objektes ab. Der Wert beschreibt dabei den Radius der abgerundeten Ecke. Einige Objekte, wie z.B. Tabellen lassen sich nicht abrunden… :/

 

Jo… Das war ganz schön viel Input auf einmal, oder ? 😀 Naja, hoffe es war verstĂ€ndlich und liest sich gut.

<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.

− 1 = 4