In diesem Artikel werde ich Ihnen die CSS-Styles etwas näher bringen. Also legen wir direkt los!
CSS-Styles zu Abständen und Anordungen
margin:
Ausführungen: margin; margin-left; margin-bottom; margin-right; margin-top
Das Attribut margin legt den Abstand zu benachbarten Elementen fest.
Syntax | margin-left: 20px
padding:
Ausführungen: padding; padding-left; padding-bottom; padding-right; padding-top
Das Attribut padding legt den Abstand innerhalb eines Elementes fest. Wenn beispielsweise einem Element ein Rahmen zugeordnet wurde und in diesem ein Text erscheint, kannst Du mit dem padding-Attribut den Abstand zum Rahmen selbst festlegen. Ziel ist eine optische Trennung beider Teile.
Syntax | padding-left: 20px
width:
Mit width legst Du die Breite des Elements fest. Wird meist bei Grafiken verwendet und zur Definition der Absatzbreite eines Textblocks.
Syntax | width: 400px
height:
Mit height legst Du die Höhe des Elements fest.
Syntax | height: 400px
CSS-Styles für Textauszeichnungen
font-family:
Das Attribut font-family definiert die Schriftart. Verwendet werden können und sollten nur Schriftarten, welche standardmässig mit Windows installiert und mitgeliefert sind. Ist eine Schriftart auf einem Besucher-PC nicht installiert, kann diese auch nicht angezeigt werden. Gewöhnlich wird in diesen Fällen die Schriftart Arial automatisch als Ersatz genutzt. Ebenfalls kann die Reihenfolge bei fehlenden Schriftarten definiert werden.
Syntax | font-family: Trebuchet MS, Verdana, Arial
font-size:
Mit font-size bestimmst Du die Schriftgröße.
Syntax | font-size: 12px
font-style:
Werte: oblique, normal, italic
font-style setzt die Schrift rekursiv.
Syntax | font-style: italic
font-weight:
Werte: 200, 300, 400, 500, 600, 700, 800, 900
Mit font-weight kann ein Wort fett angezeigt werden. Der Wert kann dabei zwischen 200 (dünn) und 900 (fett) gewählt werden.
Syntax | font-weight: 900
text-decoration:
Werte: underline, overline, line-through, blink
Die Eigenschaft text-decoration können Texte durchgestrichen, unterstrichen oder blinkend angezeigt werden.
Syntax | text-decoration: underline
text-align:
Werte: left, right, center, justify (Blocksatz)
Die Eigenschaft text-align richtet Texte als Absatz horizontal aus.
Syntax | text-align: left
color:
Durch den Einsatz von color erhält das markierte Wort eine Farbe. Diese werden in Form einer hexadezimalen Angabe dem color-Attribut zugewiesen. Viele Editoren bieten die Möglichkeit der automatischen Generierung eines hexadezimalen Codes durch Anklicken der gewünschten Farbe.
Syntax | color: #000000
Weitere häufig eingesetzte CSS-Styles
border:
Ausführungen: border; border-left; border-bottom; border-right; border-top
Das Attribut border umrahmt das Element. Erst wird Rahmendicke, dann Liniengestaltung und am Ende Farbe definiert.
Syntax | border: 2px solid #000000
Hinweis
CSS-Styles sind sehr flexibel hinsichtlich Attribute, Werte und Einheiten. Die hier gezeigten Beispiele und Informationen sollen Dir einen ersten Eindruck über die Anwendungsalternativen geben, welche möglich sind. Mit fortschreitender Tätigkeit lernst Du dann die Feinheiten und Darstellungsvarianten kennen.
