Beispiel:CSS2 font.html

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche
<!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>