SELF-Treffen in Mannheim 2025
SELFHTML wird 30 Jahre alt! → Veranstaltungs-Ankündigung.
Beispiel:CSS2 text-decoration-2.html
Aus SELFHTML-Wiki
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./Beispiel:SELFHTML-Beispiel-Grundlayout.css">
<title>text-decoration-2</title>
<style>
p {
text-decoration: 2px blue underline;
}
p span {
color: red;
}
.sub1 {
text-decoration: none;
}
.sub2 {
display: block;
}
.sub3 {
display: inline-block;
}
body {
font-size: 1.3em;
padding: 0 1em;
}
</style>
</head>
<body>
<h1>Wie sich <code>text-decoration</code> auf Kindelemente auswirkt</h1>
<p>Dieser Absatz wird unterstrichen.
<span class="sub1">Der rote Teil dieses Absatzes steht in einem span
mit der Eigenschaft <code>text-decoration: none</code>.</span>
Danach geht der Absatz ganz normal weiter.
Textumbruch wird durchgeführt, als ob kein span-Element vorhanden sei.</p>
<p>Dieser Absatz wird unterstrichen.
<span class="sub2">Der rote Teil dieses Absatzes steht in einem span
mit der Eigenschaft <code>display: block</code>.</span>
Danach geht der Absatz ganz normal weiter.
Das block-Element steht komplett auf einer eigenen Zeile, aber unterstrichen ist es trotzdem.</p>
<p>Dieser Absatz wird unterstrichen.
<span class="sub3">Der rote Teil dieses Absatzes steht in einem span
mit der Eigenschaft <code>display: inline-block</code>.</span>
Danach geht der Absatz ganz normal weiter.
Das inline-block Element wird auf einer Zeile zusammengehalten. Sofern das inline-Element keinen inneren Umbruch benötigt, bleibt der Text dahinter dann aber
wieder normal im Inline-Fluss.</p>
</body>
</html>
