HOME -> CSS_ARTIKLER -> 05-css Lørdag, 19. august 2017

HOME
FORUM
OPEN DIRECTORY
BOOKMARK
Offentliggjort 2003 - Opdateret n/a

Overline og undeline

Artiklen giver et eksempel på forskellige farver på underline og overline

Har du nogensinde tænkt på at lave forskellige farver på underline og overline, og teksten i en helt tredje farve?
Dette kan gøres på en meget enkelt og simpel måde via css.
Se blot dette eksempel:


<html><head>
<title>Overline og undeline</title>

<style type="text/css">
p.underline {
text-decoration: underline;
color: #ff0000; /* rød */
}

p.underline span {
text-decoration: none;
color: #0066ff; /* blå */
}

p.overline {
text-decoration: overline;
color: #009900; /* grøn */
}

p.overline span {
text-decoration: none;
color: #ff9900; /* orange */
}

p span.over_under {
color: 9900ff; /* violet */
border-top: 1px solid #ff6600; /* orange */
border-bottom: 1px solid #ffff00; /* gul */
}
</style>

</head><body>

<b>Underline og tekst, alt i samme farve.</b>
<p class="underline">Teksten er skrevet med rød. Underline er også rød.</p>

<b>Underline i en farve, teksten i en anden.</b>
<p class="underline">Som forrige linie, alt i rød... <span> ...Men resten er skrevet med blå tekst og rød underline</span></p>

<b>Overline og tekst, alt i samme farve.</b>
<p class="overline">Teksten er skrevet med grøn. Overline er også grøn.</p>

<b>Overline i en farve, teksten i en anden.</b>
<p class="overline">Som forrige linie, alt i grøn...<span> ...Resten er skrevet med orange tekst og grøn overline</span></p>

<b>Overline og underline i to forskellige farver, teksten i en tredje.</b>
<p>De tryllebundne tilskuere, <span class="over_under">Carters medhjælpere</span> og de to andre <span class="over_under">anatomiprofessorer</span> der var ....</p>

</body></html>


Dette giver følgende resultat

 

Copyright © 2002 - 2017
NETeXplorer.dk · All rights reserved Top