Sura 1 Artworks

Acrylmalerei, Mischtechniken, Webdesign

CSS-Tipps und Tricks: Abschnitte wie mit einem Textmarker markieren

Posted by sura1 - 25. Februar 2009

februar_25
Bookmark and Share

CSS-Tipps und Tricks: Textmarker

Wie Sie Abschnitte auf einer Webseite wie mit einem Textmarker markieren

Effekte, die wie Markierungen eines Textmarkers aussehen, lassen sich sehr einfach realisieren. Den gewünschten Bereich mit dem <span>-Tag einschließen und eine Hintergrundfarbe und wenn nötig eine separate Schriftfarbe angeben. Zusätzlich ist zu empfehlen, mit dem CSS-Befehl padding einen linken und rechten Seitenabstand festzulegen.

Beispiel 1:

Die Schriftfarbe innerhalb des <span>-Tags ist weiß (#fff), die Hintergrundfarben sind grün (#690) und rot (#920c0d) und der Seitenabstand beträgt links und rechts 3px (padding: 0 3px;).

HTML-Code mit CSS Inline-Styles:

<p>Effekte, die wie
<span style="color:#fff;background-color:#690;padding:0 3px;">
Markierungen eines Textmarkers</span> aussehen, lassen sich sehr
einfach realisieren.</p>
<p>Den gewünschten Bereich
<span style="color:#fff; background-color:#920c0d; padding:0 3px;">
mit dem span-Tag einschließen</span> und eine Hintergrundfarbe
angeben.</p>

Ergebnis:

Effekte, die wie Markierungen eines Textmarkers aussehen, lassen sich sehr einfach realisieren. Den gewünschten Bereich mit dem <span>-Tag einschließen und eine Hintergrundfarbe angeben.

Beispiel 2:

Die Schriftfarbe innerhalb des <span>-Tags ist weiß (#fff) bzw. schwarz (#000), die Hintergrundfarben sind gelb (#ff0), rot (#f00), blau (#00f) und grün (#690) und der Seitenabstand beträgt links und rechts jeweils 3px (padding: 0 3px;).

HTML-Code mit CSS Inline-Styles:

<p>
Etiam cursus lacus in eros.
<span style="color:#000;background-color:#ff0;padding:0 3px;">
Praesent congue lacinia nunc</span>.
Cras placerat, risus in ullamcorper commodo;augue mauris rhoncus
ante, at vulputate urna sapien nec tortor. Pellentesque erat ipsum,
volutpat sed, varius accumsan,
<span style="color:#fff;background-color:#f00;padding:0 3px;">
convallis at, quam</span>.
Sed quis est non dolor tempus volutpat. Curabitur convallis. Ut id
lectus. Donec lacus. Etiam porttitor. Pellentesque habitant morbi
tristique senectus et netus et malesuada fames ac turpis egestas.</p>

<p>Quisque at leo.
<span style="color:#fff;background-color:#00f;padding:0 3px;">
Donec ac urna. Etiam commodo.</span>
Cras suscipit justo quis neque.In id sem. Mauris vitae lectus ut massa
dignissim commodo. Vivamus aliquam, turpis ac
<span style="color:#fff;background-color:#690;padding:0 3px;">
scelerisque convallis,nisl velit dictum ligula</span>, ac congue nunc
diam ac nunc. Donec purus diam, pulvinar sit amet, scelerisque vitae,
vehicula ac, odio.
</p>

Ergebnis:

Etiam cursus lacus in eros. Praesent congue lacinia nunc. Cras placerat, risus in ullamcorper commodo. Augue mauris rhoncus ante, at vulputate urna sapien nec tortor. Pellentesque erat ipsum, volutpat sed, varius accumsan, convallis at, quam. Sed quis est non dolor tempus volutpat. Curabitur convallis. Ut id lectus. Donec lacus. Etiam porttitor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

Quisque at leo. Donec ac urna. Etiam commodo. Cras suscipit justo quis neque.In id sem. Mauris vitae lectus ut massa dignissim commodo. Vivamus aliquam, turpis ac scelerisque convallis, nisl velit dictum ligula, ac congue nunc diam ac nunc. Donec purus diam, pulvinar sit amet, scelerisque vitae, vehicula ac, odio.

Ausführliche Infos zu HTML und CSS:

CSS 4 YOU
Michael Jendryschik – Einführung in HTML und CSS
The Styleworks – CSS Praxis
Dr.Web – CSS Grundlagen

Ähnliche Artikel:
CSS Float: Schwebende Boxen (Theorie und Praxis)
CSS Sidebar mit runden Boxen
Styling Blockquotes - Zitate mit CSS gestalten
HTML/CSS-Grundlagen: Unterschied zwischen relativer und absoluter Positionierung
HTML/CSS-Übung: 5 Beispiele, wie Sie ungeordnete Listen formatieren
CSS/HTML-Übung: 6 Wege, wie Sie Grafiken mit Rahmen versehen können
CSS-Tricks: Walking Links - Spazierende Links 
CSS-Experimente: Flashartige Links mit CSS erstellen
CSS-Tricks: Die nach-allen-Seiten-ausdehnbare Box
CSS-Tricks: Kennzeichnung von besuchten Links
CSS-Tricks: Div-Boxen mit runden Ecken (7 Variationen)
CSS Bildergalerie - CSS Sliding Gallery von CSSPlay
CSSplay: Inline links - block styling

Kommentar verfassen

Trage deine Daten unten ein oder klicke ein Icon um dich einzuloggen:

WordPress.com-Logo

Du kommentierst mit Deinem WordPress.com-Konto. Abmelden / Ändern )

Twitter-Bild

Du kommentierst mit Deinem Twitter-Konto. Abmelden / Ändern )

Facebook-Foto

Du kommentierst mit Deinem Facebook-Konto. Abmelden / Ändern )

Google+ Foto

Du kommentierst mit Deinem Google+-Konto. Abmelden / Ändern )

Verbinde mit %s

 
%d Bloggern gefällt das: