Textformatierungen in Blogs per CSS
Wer Texte im Internet verfasst, der will diese unter Umständen zur besseren Lesbarkeit formatieren. Meistens nutzt man die Fett- oder Kursivschrift. Trotzdem möchte man vielleicht bestimmte Textpassagen noch mehr hervorheben – und das geht per CSS wirklich klasse.
Natürlich könnte man mit Codes im Quelltext arbeiten – so ist der in der Einleitung versehene grüne Text mit “<span style="background-color: #a3df61">” codiert. Bei dieser Variante hat man aber nicht die Möglichkeit “mal eben schnell” komplette Boxen zu erstellen:
Kaffee gefällig?
Grüne Box
Rote Box
Gelbe Box
Wie realisiert man das Ganze? Man öffnet die style.css des Themes und trägt folgende Werte ein (Beispielwerte, die ich genommen habe):
/* GelbeBox */
p.gelb {
padding: 0.57143em 0.78571em;
background: #ffffa0;
border: 1px solid #e5e597;
}
Eine rote Box sieht so aus:
/* RoteBox */
p.rot {
padding: 0.57143em 0.78571em;
background: #ff4f52;
border: 1px solid #ef1d21;
}
Wer noch ein wenig mit Hintergrundbildern herumexperimentiert, kann dies auch tun – wie ich oben in der Box “Kaffee gefällig”. Dieser Code sieht so aus:
/* subfeed: Feed Image */
p.subfeed {
background: #f2f2f2 url(‘images/kaffeederherr.gif’)
no-repeat top right;
padding: 0.57143em 0.78571em;
border: 1px solid #ddd;
}
Besagte Codes kommen – wie gesagt – in die style.css. Um diesen auch sichtbar zu machen, muss man beim Schreiben eines Textes in die HTML-Ansicht gehen. Text, der in einer roten Box erscheinen soll, müsste so formatiert werden: <p class="rot">Rote Box</p>.
Geile Sache – inspiriert via Hostintheshell.
Artikel per RSS-Feed
Caschy bei Google+
Caschy bei Twitter
Caschy bei Facebook
Caschy bei XING
Caschy bei YouTube
12 Kommentare zu “Textformatierungen in Blogs per CSS”
hoschi sagt
schöne sache aber ist der Sinn der CSS Nutzung nicht der dass man den Style seines Inhaltes immer wieder neu ändern kann. wenn die Formatierung jedoch 1x gemacht wird und immer so bleibt, wie zb in einem Blog, ist es doch sinnvoller das ganze direkt im Code zu machen und nicht über Css zu gehen.
Kommentar am 24. Juni 2008 um 20:56 geschrieben.
MasterG sagt
@hoschi geh mal auf eine Seite und stell im Firefox unter Ansicht->Webseiten-Stil “Kein Siel ein” und du wirst sehen das es sehr sinnvoll ist das Design in eine Externe CSS auszulagern.
1. Könnte mann so für jeden Browser ein anderes Design Bauen.
2. Laden Schmascheien Spider die CSS nicht mit wenn du jetzt das ganze im HTML Quellcode gepackt hast dann muss der Spider das ganze aber zwangsläufig mit laden und das verursacht auf beiden seiten unnötigen Traffic
Kommentar am 24. Juni 2008 um 23:04 geschrieben.
Bernd (
@http://blog.bernd-distler.net) sagt
hoschi: Sinn von CSS ist es, Design und Inhalt zu trennen. Wenn du die Formatierung direkt in den PHP-Code von WordPress bzw. jeder anderen HTML-Seite schreibst, tust du eben genau das Gegenteil.
In der HTML-Ausgabe definierst du nur die Befehle, wie z. B. Links verlinken (geile Wort-Kombination) oder erstellst mit div Container, die über class eine Eigenschaftsgruppe zugewiesen bekommen.
Das Aussehen der definierst du (soweit möglich) immer in der CSS-Datei. Wenn du dann das Design ändern willst, brauchst du nur die CSS-Datei anpassen und eben nicht im HTML-Code pfuschen.
Kommentar am 25. Juni 2008 um 08:20 geschrieben.
Cindy sagt
da sag ich nicht nein
Kommentar am 25. Juni 2008 um 09:43 geschrieben.
caschy sagt
Bin ja anerkannter Koffeinjunkie
Kommentar am 25. Juni 2008 um 09:46 geschrieben.
JayJay sagt
Also, wenn ich in diesem Post nicht die Kaffeetasse
kennen gelernt hätte, dann wüsste ich nicht, dass dein neues favicon eine Kaffeetasse ist…
Kommentar am 25. Juni 2008 um 12:13 geschrieben.
caschy sagt
Ja, mit das Einzige, womit man mich assoziieren kann – deshalb von mir gewählt =)
Kommentar am 25. Juni 2008 um 12:19 geschrieben.
chevygnon sagt
Das vorherige Favicon mag zwar inhaltsleer gewesen sein, aber es war auffällig und hatte, zumindest meiner Meinung nach, einen hohen Wiedererkennungswert.
Die Kaffeetasse ist so unauffällig…
Muss ich wohl doch mal ein Plugin zum Ändern des Favicons testen.
Kommentar am 26. Juni 2008 um 00:03 geschrieben.
LastOne sagt
Wenn du dein altes Favicon nicht mehr nutzt, was dagegen wenn ich das in etwas abgewandelter Form bei mir umsetze?
Kommentar am 1. Juli 2008 um 18:08 geschrieben.
caschy sagt
Nur zu =)
Kommentar am 1. Juli 2008 um 18:28 geschrieben.
2 Trackback(s)