nicht angemeldet
Hallo,
ich habe mal ein praktisches Beispiel erstellt. Die Ebenen können natürlich beliebig erweitert werden und dass die Farben noch angepasst werden können sollte klar sein.
Falls die einzelnen Ebenen jeweils zusätzlich in einer Zeile stehen sollen, einfach im CSS beim ersten mark das "display: block;" aktivieren.
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<title>Hervorhebungen 01</title>
<meta name="description" content="HTML5, CSS3">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/*Grundeinstellungen*/
@media all {
/* Neue HTML5-Elemente für ältere Browser als Block-Elemente übergeben */
header, nav, main, aside, footer, section, article, figure, figcaption, audio, video {
display: block;
}
* {
box-sizing: border-box;
}
html {
font-size: 120%;
}
body {
padding: 0.5rem;
margin: 0;
}
}
/*Spezielle Einstellungen*/
@media all {
mark {
background-color: orange;
/*display: block;*/
}
mark mark {
background-color: green;
}
mark mark mark {
color: white;
background-color: blue;
}
mark mark mark mark {
color: white;
background-color: red;
}
}
</style>
</head>
<body>
<p>Um ein triviales Beispiel zu nehmen, wer von uns unterzieht sich je anstrengender <mark>{ körperlicher Betätigung, außer um Vorteile daraus zu ziehen?}</mark> Aber wer hat irgend ein Recht, einen Menschen zu tadeln, der die Entscheidung trifft, eine Freude <mark>{zu genießen, <mark>{die keine unangenehmen Folgen hat, oder einen, der Schmerz vermeidet}</mark>, welcher keine daraus}</mark> resultierende Freude nach sich zieht?</p>
<p>Um ein triviales Beispiel zu nehmen, wer von uns unterzieht sich je anstrengender <mark>{ <mark>{körperlicher <mark>{Betätigung, <mark>{außer um}</mark> Vorteile}</mark> daraus}</mark> zu ziehen?}</mark> Aber wer hat irgend ein Recht, einen Menschen zu tadeln, der die Entscheidung trifft, eine Freude <mark>{zu genießen, <mark>{die keine unangenehmen Folgen hat, oder einen, der Schmerz vermeidet}</mark>, welcher keine daraus}</mark> resultierende Freude nach sich zieht?</p>
</body>
</html>
Gruss
MrMurphy
Tabellenkalk
Gunnar Bittersmann
Auge
Matthias Apsel
JürgenB