Beispiel:CSS2 font.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" media="screen" href="./Beispiel:SELFHTML-Beispiel-Grundlayout.css">
<title>font</title>
<style>
.formatiert {
color: #333;
}
.formatiert h2 {font-family: "Comic Sans MS", cursive, sans-serif; background: LightGreen;
}
.formatiert span {
white-space: nowrap;
color: green;
}
.formatiert p {
font: bold .9em/150% Georgia, Times, serif; color: #666;
}
.formatiert code {
font: 1.2em/150% Courier, monospace; color: #999;
}
</style>
</head>
<body>
<h1>Die Eigenschaft <code>font</code></h1>
<h2> HTML-Markup ohne CSS</h2>
<p>Ohne weitere CSS-Formatierungen verwenden Browser ein <strong>eigenes Stylesheet</strong>, in dem die einzelnen Textstrukturierungselemente ihre eigenen <em>Festlegungen</em> haben.</b></p>
<p>Dies betrifft:</p>
<ul>
<li>Schriftgröße <code>font-size</code></li>
<li>Schriftfamilie <code>font-family</code></li>
<li>Neigung <code>font-style</code></li>
<li>Strichstärke <code>font-weight</code></li>
<li>Schriftfarbe <code>color</code></li>
</ul>
<article class="formatiert">
<h2>HTML-Markup <span>mit CSS</span></h2>
<p>Die Angaben zur verwendeten Schrift lassen sich vielfältig kombinieren.<br>
Für diesen Absatz gilt zum Beispiel:
<code><pre>{font: bold 0.9em/150% Georgia,Times,serif;}</pre></code>.
</p>
</article>
<p style="color:#c82f04; border-left: medium solid; padding-left: 0.5em;">Untersuche die Schriftformatierung im <a href="https://wiki.selfhtml.org/wiki/Arbeiten_mit_dem_Seiteninspektor#Farben_und_Kontraste">Seiteninspektor</a>.<br>Achte auf die Kontraste!</h2>
<p>Zum Tutorial: <a href="https://wiki.selfhtml.org/wiki/Typografie/Schriftformatierung">Typografie/Schriftformatierung</a>.</p>
<a href="https://forum.selfhtml.org/advent/2024"><div style="display:grid;grid-template-columns: 63px 1fr; gap:0.5em;"><img src="https://wiki.selfhtml.org/images/a/ad/Selfhtml-nico.png" alt="SELFHTML-Logo mit Adventsmütze" width="63px"><p>Zurück zum <br><b>Adventskalender 2024</b>.</p></div></a>
</body>
</html>
