diff options
Diffstat (limited to 'files/de/web/guide/css/getting_started/textstyles/index.html')
| -rw-r--r-- | files/de/web/guide/css/getting_started/textstyles/index.html | 151 |
1 files changed, 151 insertions, 0 deletions
diff --git a/files/de/web/guide/css/getting_started/textstyles/index.html b/files/de/web/guide/css/getting_started/textstyles/index.html new file mode 100644 index 0000000000..d03bea91e6 --- /dev/null +++ b/files/de/web/guide/css/getting_started/textstyles/index.html @@ -0,0 +1,151 @@ +--- +title: Textstyles +slug: Web/Guide/CSS/Getting_started/Textstyles +translation_of: Learn/CSS/Styling_text/Fundamentals +--- +<p>{{ CSSTutorialTOC() }}</p> + +<p>{{previousPage("/de/docs/Web/Guide/CSS/Getting_Started/Lesbares_CSS", "Lesbares CSS")}}<span class="seoSummary">Das ist der siebte Teil des <a href="/de/docs/Web/Guide/CSS/Getting_Started" title="/de/docs/Web/Guide/CSS/Getting_Started">CSS Getting Started</a> Tutorials. Er enthält weitere Beispiele für Textstyles. Sie verändern Ihren Stylesheet, um verschiedene Schriftarten zu verwenden.</span></p> + +<h2 class="clearLeft" id="Information_Textstyles">Information: Textstyles</h2> + +<p>CSS besitzt verschiedene Eigenschaften, um Text zu gestalten.</p> + +<p>Es gibt zur Gemütlichkeit eine Eigenschaft {{ cssxref("font") }}, mit der sich verschiedene Aspekte auf einmal definieren lassen, wie zum Beispiel:</p> + +<ul> + <li>Fettgedruckt, kursiv und kleine Großbuchstaben</li> + <li>Schriftgröße</li> + <li>Zeilenhöhe</li> + <li>Schriftart</li> +</ul> + +<div class="tuto_example"> +<div class="tuto_type">Beispiel</div> + +<pre class="brush:css">p { + font: italic 75%/125% "Comic Sans MS", cursive; +} +</pre> + +<p>Diese Regel setzt verschiedene Eigenschaften der Schrift und macht alle Absätze kursiv.</p> + +<p>Die Schriftgröße wird auf drei Viertel der Größe jedes Absatzelements gesetzt und die Zeilenhöhe wird auf 125% (ein wenig größer als normal) gesetzt.</p> + +<p>Die Art der Schrift wird auf auf Comic Sans MS gesetzt. Wenn aber die Schriftart im Webbrowser nicht verfügbar ist, wird die standardmäßig kursiv (handgeschriebene) Art verwendet.</p> + +<p>Diese Regel hat den Nebeneffekt, dass alle dicken und kleinen Anfangsbuchstaben auf <code>normal</code> zurückgesetzt werden.</p> +</div> + +<h3 id="Schriftarten">Schriftarten</h3> + +<p>Sie können nicht vorhersagen welche Schriftarten der Leser Ihres Dokument installiert hat. Deshalb ist es eine gute Idee eine Liste von Alternativen in bevorzugter Reihenfolge anzugeben.</p> + +<p>Beenden Sie die Liste mit einer eingebauten Standardschriftart: <code>serif</code>, <code>sans-serif</code>, <code>cursive</code>, <code>fantasy</code> oder <code>monospace</code>.</p> + +<p>Wenn die Schriftart ein Feature des Dokuments nicht unterstützt, kann der Webbrowser eine andere Schriftart dafür auswählen. Das Dokument könnte zum Beispiel spezielle Zeichen enthalten, die von der Schriftart nicht unterstützt werden. Wenn der Webbrowser eine andere Schriftart finden kann, die diese Zeichen unterstützt, verwendet er diese.</p> + +<p>Um nur Schriftart anzugeben, können Sie die {{ cssxref("font-family") }} Eigenschaft verwenden.</p> + +<h3 id="Schriftgrößen">Schriftgrößen</h3> + +<p>Benutzer des Webbrowsers können die standardmäßige Schriftgröße überschreiben oder die Textgröße während dem Lesen ändern. Deshalb macht es überall wo es geht Sinn eine relative Größe zu verwenden.</p> + +<p>Sie können die bereits vordefinierten Werte wie <code>small</code>, <code>medium</code> und <code>large</code> verwenden. Sie können aber auch relative Werte zur Schriftgröße des Elternelements wie <code>smaller</code>, <code>larger</code>, <code>150%</code> oder <code>1.5em</code> verwenden. Ein "em" ist äquivalent zu der Breite des Buchstabens "m" (für die Schriftgröße des Elternelements). Damit sind <code>1.5em</code> eineinhalb Mal so groß als die Schrift im Elternelement.</p> + +<p>Wenn nötig können Sie eine genaue Größe wie <code>14px</code> (14 Pixel) für einen Bildschirm oder <code>14pt</code> (14 Punkt) für einen Drucker angeben. Das ist aber für Benutzer mit einer Sehbehinderung nicht zugänglich, da sie damit die Schriftgröße nicht mehr ändern können. Eine zugänglichere Strategie wäre, eine bereits vordefinierten Wert wie medium auf dem höchsten Element im Dokument zu setzen und dann relative Größen auf allen Kindelementen zu verwenden.</p> + +<p>Um nur die Schriftgröße anzugeben, können Sie die {{ cssxref("font-size") }} Eigenschaft verwenden.</p> + +<h3 id="Zeilenhöhe">Zeilenhöhe</h3> + +<p>Die Zeilenhöhe gibt den Abstand zwischen Zeilen an. Wenn Ihr Dokument lange Absätze über viele Zeilen hat, kann ein größerer Zeilenabstand als normal besonders bei einer kleinen Schriftgröße einfacher zum Lesen zu sein.</p> + +<p>Um nur die Zeilenhöhe anzugeben, können Sie die {{ cssxref("line-height") }} Eigenschaft verwenden.</p> + +<h3 id="Textdekoration">Textdekoration</h3> + +<p>Die separate {{ cssxref("text-decoration") }} Eigenschaft kann andere Styles wie <code>underline</code> oder <code>line-through</code> definieren. Sie können sie auf <code>none</code> setzen, um explizit jede Textdekoration zu entfernen.</p> + +<h3 id="Andere_Eigenschaften">Andere Eigenschaften</h3> + +<p>Um nur kursiv anzugeben, verwenden Sie {{ cssxref("font-style") }}<code>: italic;</code><br> + Um nur fettgedruckt anzugeben, verwenden Sie <code>{{ cssxref("font-weight") }}: bold;</code><br> + Um nur kleine Großbuchstaben anzugeben, verwenden Sie <code>{{ cssxref("font-variant") }}: small-caps;</code></p> + +<p>Um eine Eigenschaft einzeln abzuschalten, können Sie den Wert <code>normal</code> oder <code>inherit</code> angeben.</p> + +<div class="tuto_details"> +<div class="tuto_type">Mehr Details</div> + +<p>Sie können Textstyles auf viele andere Wege angeben.</p> + +<p>Einige der hier erwähnten Eigenschaften haben zum Beispiel andere Werte, die Sie auch verwenden können.</p> + +<p>Vermeiden Sie in einem komplexen Stylesheet die abgekürzte <code>font</code> Eigenschaft, da sie Nebeneffekte hat (setzt andere individuelle Eigenschaften zurück).</p> + +<p>Für alle Details von Eigenschaften, die mit Schriften zu tun haben, gehen Sie bitte auf <a class="external" href="http://www.w3.org/TR/CSS21/fonts.html">Fonts</a> in der CSS Spezifikation. Die kompletten Details zur Textdekoration finden Sie unter <a class="external" href="http://www.w3.org/TR/CSS21/text.html">Text</a>.</p> + +<p>Wenn Sie nicht von den installierten Schriftarten auf dem System des Benutzers abhängig sein wollen, können Sie {{ cssxref("@font-face") }} verwenden, um einen Online Font anzugeben. Dazu muss der Webbrowser des Benutzers diese Regel aber auch unterstützen.</p> +</div> + +<h2 id="Aktion_Schriftart_angeben">Aktion: Schriftart angeben</h2> + +<p>Für ein einfaches Dokument können sie eine Schrift auf dem {{ HTMLElement("body") }} Element angeben und der Rest des Dokuments erbt diese Regel.</p> + +<ol> + <li>Bearbeiten Sie Ihre CSS Datei.</li> + <li>Fügen sie die folgendene Regel hinzu, um die Schrift im gesamten Dokument zu bestimmen. Der Anfang der CSS Datei ist eine logische Stelle dafür, aber es hat auch an anderen Stellen in der Datei denselben Effekt: + <pre class="eval">body { + font: 16px "Comic Sans MS", cursive; +} +</pre> + </li> + <li>Kommentieren sie Regel und fügen Sie nach Ihrem Geschmak Zeilenumbrüche und Leerzeichen hinzu.</li> + <li>Speichern Sie die Datei und aktualisieren Sie Ihren Webbrowser um die Änderung zu sehen. Wenn Sie die Schrift Comic Sans MS oder eine andere Schrift, welche kursiv nicht unterstützt, auf Ihren Computer haben, wählt Ihr Webbrowser eine andere Schriftart für den kursiven Text in der ersten Zeile aus: + <table style="border: 2px outset #36b; padding: 1em;"> + <tbody> + <tr> + <td style="font: italic 16px 'Comic Sans MS', cursive; color: blue;"><strong style="color: red;">C</strong>ascading <strong style="color: green;">S</strong>tyle <strong style="color: green;">S</strong>heets</td> + </tr> + <tr> + <td style="font: 16px 'Comic Sans MS', cursive; color: blue;"><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets</td> + </tr> + </tbody> + </table> + </li> + <li>Wählen Sie <strong>Ansicht > Schirftgröße > Vergrößern</strong> (oder <strong>Ansicht > Zoom > Vergrößern</strong>) im Menü Ihres Webbrowsers aus. Obwohl Sie 16 Pixel im Sil angegeben haben, kann der Benutzer die Schriftgröße in der Ansicht ändern.</li> +</ol> + +<div class="tuto_example"> +<div class="tuto_type">Herausforderung</div> + +<p>Machen Sie alle sechs Anfangsbuchstaben zweimal so groß in der serif Standardschrift vom Webbrowser ohne etwas anderes zu verändern:</p> + +<table> + <tbody> + <tr> + <td style="font: italic 16px 'Comic Sans MS', cursive; color: blue;"><strong style="color: red; font: 200% serif;">C</strong>ascading <strong style="color: green; font: 200% serif;">S</strong>tyle <strong style="color: green; font: 200% serif;">S</strong>heets</td> + </tr> + <tr> + <td style="font: 16px 'Comic Sans MS', cursive; color: blue;"><strong style="color: red; font: 200% serif;">C</strong>ascading <strong style="color: red; font: 200% serif;">S</strong>tyle <strong style="color: red; font: 200% serif;">S</strong>heets</td> + </tr> + </tbody> +</table> + +<div class="tuto_details" id="tutochallenge"> +<div class="tuto_type">Mögliche Lösung</div> + +<p>Fügen Sie die folgende Style Deklaration zur <code>strong</code> Regel hinzu:</p> + +<pre class="brush: css"> font: 200% serif; +</pre> +Wenn Sie getrennte Deklarationen für <code>font-size</code> und <code>font-family</code> verwenden, dann wird die <code>font-style</code> Einstellung auf dem ersten Absatz <em>nicht</em> überschrieben. + +<p> </p> +<a class="hideAnswer" href="#challenge">Hide solution</a></div> +<a href="#tutochallenge" title="Eine mögliche Lösung für die Herausforderung darstellen">Sehen Sie sich die Lösung an.</a></div> + +<h2 id="Was_kommt_als_Nächstes">Was kommt als Nächstes?</h2> + +<p>{{nextPage("/de/docs/Web/Guide/CSS/Getting_started/Farbe", "Farbe")}}Ihr Beispieldokument verwendet bereits verschiedene benannte Farben. Der <a href="/de/docs/Web/Guide/CSS/Getting_Started/Farbe" title="/de/docs/Web/Guide/CSS/Getting_Started/Farbe">nächste Teil</a> listet die Namen der Standardfarben auf und erklärt wie Sie eigene Farben definieren können<strong>.</strong></p> |