[Blogger] VerschiedeneTexteffekte mit CSS/HTML ✤

Hey Zusammen ^^
Ja, ich bin's wieder und wie ihr voraussichtlich sehen könnt, hab ich hier bereits ein paar einfache Effekte eingefügt, was den Text angeht.

Und darum geht es auch. Ich möcht euch heute ein paar einfach Text-effekte mithilfe von Html bzw. CSS zeigen.
Ich fang mit einfachen Tags an, die man auch direkt bei Verfassen reinmachen kann, aber wenn man seine Posts vorwiegend im HTML schreibt, oder zum Beispiel irgendwo anders HTML-Tags verwenden will (ein Beispiel wären Blogger-Kommis^^) will, ist es definitiv nicht schlecht diese zu kennen.
Bei denjenigen, bei denen keine Erklärung nötig ist, zeig ich euch einfach den Code und darüber jeweils das Ergebnis.

Dieser Text wird Fett angezeigt.
Dieser hier auch.
<b>Dieser Text wird Fett angezeigt.</b>
<strong>Dieser hier auch.</strong>

Hier haben wir ein Beispiel für einen kursiven Text
Und dieser Tag, hat den gleichen Effekt
<i>Hier haben wir ein Beispiel für einen kursiven Text</i>
<em>Und dieser Tag, hat den gleichen Effekt</em>

Und hier haben wir einen Text, mit dem wir Code anzeigen können, wie zum Beispiel <a href='bliblablubbisteinlink'>BliBlaBlubb</a>
<code>Und hier haben wir einen Text, mit dem wir Code anzeigen können, wie zum Beispiel <a href='bliblablubbisteinlink'>BliBlaBlubb</a> </code>



Der Text hier wird mittig angezeigt

Der ebenfalls

<center>Der Text hier wird mittig angezeigt</center>
<p align='center'> Der ebenfalls </p>

Und der fährt so toll von einer Seite zur anderen ^^
<marquee>Und der fährt so toll von einer Seite zur anderen ^^</marquee>

grosser Text
<span style="font-size: large;">grosser Text</span>

Unterstrichener Text
<u>Unterstrichener Text</u>

Durchgestrichener Text
<strike>Durchgestrichener Text</strike>

Roter Text

ebenfalls

<div style="color: red;"> Roter Text </div>
<p style='color:red'> ebenfalls </p>
Hier kann das red natürlich auch durch den Farbcode ersetzt werden. (#FF0000).

Nun zu den CSS-definierten Stilen.
Zu Beginn definiert man das CSS, dann wendet man es an.

Dieser Text erscheint nur in Grossbuchstaben.

/*CSS
----------------*/
<style type="text/css">
p.allesgross {text-transform:uppercase};
</style>

//angewendet
<p class='allesgross'> Dieser Text erscheint nur in Grossbuchstaben.</p>

Dieser Text ist so zusammengedrückt, dass man ihn nicht mehr lesen kann.

<style type="text/css">
p.eng {letter-spacing: -3px}
</style>
<p class='eng'> Dieser Text ist so zusammengedrückt, dass man ihn nicht mehr lesen kann.</p>

Und damit kann man bestimmte Details hervorheben die für wichtig erachtet werden.
Und damit kann man <span class='textmarker'> bestimmte Details hervorheben </span> die für wichtig erachtet werden.

<style type="text/css">
span.textmarker{
background-color:yellow;
}
</style>

Joa, das sind so die "schnellen" Formatierungen, aber was, wenn man einige dieser Stile kombinieren will? Es empfielt sich, ein CSS zu schreiben, welches man einfügen kann, wo immer man will.

Hier seht ihr, dass die Schrift auf "Lobster Two" gewechselt hat, die Grösse bei 20 Punkt, fett und der Zeilenabstand etwas vergrössert ist, sowie die Farbe "magenta" hinzugefügt wurde.


<style type="text/css">
.PrettyLook{
font-family: Lobster Two;
font-size: 20pt;
font-style: bold;
line-height: 20pt;
color: magenta;
}
</style>

<p class='PrettyLook'> Hier seht ihr, dass die Schrift auf "Lobster Two" gewechselt hat, die Grösse bei 20 Punkt, fett und der Zeilenabstand etwas vergrössert ist, sowie die Farbe "magenta" hinzugefügt wurde.</p>

Joa, das war's jetzt mal. Ich hoffe es hat dem ein oder anderen von euch was gebracht. =)