Ich bin am umbauen!

HTML

hey wie gehts?

CSS

hey wie gehts?
hey wie gehts?

Grundbausteine für das Textstyling

Schriftart (font-family)

unter SCHRIFTART bitte gewünschte Schriftart eingeben (z.B. Comic Sams MS)

Standard Schriftarten:
Comic Sans MS, Times New Roman, Verdana, Courier New, Impact, Arial, Lucida Sans, Fantasy, Century Gothic, Georgia


→ hier mehr Schriftarten

 

<font family="SCHRIFTART">TEXT</font>

 

besserer Code (alternativ):

<span style="font-family:SCHRIFTART;">TEXT</span>

Schriftgröße (font-size)

Schriftgröße 22px Schriftgröße 17px Schriftgröße 12px

für ZAHL bitte die gewünschte Größe eingeben (der Text oben ist Größe 5)

<font size="ZAHL">TEXT</font>

 

besserer Code in Pixelangabe (px):

<span style="font-size: 10px;">TEXT</span>

Textfarbe (color)

Hexadezimal

Farbiger Text

für FARBCODE bitte gewuenschte Farbcode eingeben (zB. FF6A6A)

Farbcodes unter http://www.html-php-mysql.de/generatoren/colors.php

<font color="#FARBCODE">TEXT</font>

 

besserer Code (alternativ):

<span style="color:#FARBCODE;">TEXT</span>

RGB / RGBA - Transparente Farben

Neben Hexadezimal Farben (kurz Hex, wegen 6 Zahlen) gibt es auch RGB Farben. In Prinzip sind das 2 verschiedene Möglichkeiten eine Farbe zu definieren. Ihr könnt eure Hex-Codes hier → Hex zu RGB in RGB umwandeln.

Beispiel:

rgb(34,139,34)

CODE:
background:rgb(34,139,34);
228B22

CODE:
background:#228B22;

Es gibt eine Möglichkeit eure Farbe mit einem RGBA Farbcode transparent zu machen. Ihr nehmt euren RGB-Code und fügt dahinter euren Transparentswert ein: 1.0 ist 100% und 0.0 ist 0% der Farbe

Wichtig ist, dass ihr rgba vor der Klammer schreibt. Diesen Farbcode [zB 

rgba(34,139,34,0.5)] könnt ihr einfach statt den Hex-Code (#228B22) einsetzen

 

rgba(34,139,34,0.7)
rgba(34,139,34,0.5)
rgba(34,139,34,0.3)

CODE:
background:rgba(34,139,34,0.5);
 

Schriftstil (font-style)

italic, normal

italic: kursiv

normal: normal

<span style="font-style:italic;">TEXT</span>

 

Alternativ:

<i>TEXT</i>

Schriftgewicht (font-weight)

bold, normal

bold: fett

normal: normal

<span style="font-weight:bold;">TEXT</span>

 

Alternativ:

<b>TEXT</b>

Buchstabenabstand (letter-spacing)

Positiver Abstand (3px)
Negativer Abstand (-3px)
<span style="letter-spacing: 3px">TEXT</span>

bei 3px könnt ihr euren gewünschten Abstand zwischen dem Text eingeben (ihr könnt auch negative Werte eingeben um den Abstand zu verringern)

Textdekoration (text-decoration)

underline, overline, blink, line-through, normal

underline: unterstrichen

overline: überstrichen

blink: blinkend

line-through: durchgestrichen

normal: normal

<span style="text-decoration:underline">TEXT</span>

 

Alternativ für unterstrichen:

<u>TEXT</u>

 

Alternativ für durchgestrichen:

<s>TEXT</s>

Texttransform (text-transform)

uppercase, lowercase, capitalize, none

mit diesem Code könnt ihr einen Textbereich mit
Klein- oder Großbuchstaben erzwingen.
none: normaler Text
uppercase: nur Großbuchstaben
lowercase: nur Kleinbuchstaben
capitalize: Wortanfänge als Großbuchstaben

<span style="text-transform:normal">TEXT</span>

Hochgestellt und Tiefgestellt

hochgestellte Zahl oder Text CO2

<sup>TEXT</sup>

 

teifgestellte Zahl oder Text H2O

<sub>TEXT</sub>

Textausrichtungen


DER TEXT IST
ZENTRIERT VERFASST
<center>TEXT</center>

DER TEXT IST
LINKSBÜNDIG VERFASST
<div align="left">TEXT</div>

DER TEXT IST
RECHTSBÜNDIG VERFASST
<div align="right">TEXT</div>

DER TEXT IST ALS BLOCK VERFASST Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor
<div align="justify">TEXT</div>

Attribute kombinieren


Groeße + Farbe + Schriftart

Ihr könnt auch alle Attribute in einem Code zusammenfassen, was wesentlich einfacher ist. Die Reihenfolge und die Anzahl/Menge der Attribute ist dabei egal!

<font face="SCHRIFTART" color="#FARBCODE" size="ZAHL">TEXT</font>

(z.B. <font face="century gothic" color="#008000" size="7">TEXT</font>)

 

besserer Code (alternativ):

<span style="font-family: SCHRIFTART;color: #FARBCODE;font-size: ZAHLpx">TEXT</span>

Zeilenumbruch

Text<br>Text