CSS-Kursivschrift: Ändern Sie den Schriftstil. HTML5: Alte Tags Neue Zuordnung, die kursiv gedruckt wird

In diesem Artikel werden wir über die Auswahl von Text sprechen. kursiv HTML. Wie bei fettem Text kann kursiver Text auf drei Arten erstellt werden:

  • Etikett ich HTML;
  • Etikett em HTML;
  • CSS-Eigenschaft schriftstil.

Betrachten wir alle drei Optionen, wie Sie in HTML kursiv schreiben können, diskutieren Sie die Feinheiten dieses Problems und welche Methoden in bestimmten Situationen bequemer und korrekter zu verwenden sind.

Kursiver Text: Tag

Etikett ich (kursiv), ähnlich dem Tag b Bei fettem Text wird kursiver Text physisch hervorgehoben (dies bedeutet, dass sich nur der Stil des Textes ändert). Tag-Anwendung ich:

Website Builder "Nubex"

Somit wird der erforderliche Teil des Textes zwischen den Tags platziert .

Kursiver Text: Tag

Obwohl das Tag ich bleibt gültig, aus Sicht der Site-Optimierung ist es besser, das Tag zu verwenden em um logisch wichtige Textabschnitte hervorzuheben. Dies bedeutet, dass Suchroboter die Wichtigkeit des zwischen Tags platzierten Textes berücksichtigen. :

Webseitenersteller "Nubex"

Ergebnis:

Webseitenersteller "Nubex"

Vergessen Sie jedoch nicht, dass der Text in Tags eingeschlossen ist ich und emObwohl sie (in allen modernen Browsern) fast gleich angezeigt werden, sind sie im Wesentlichen nicht ganz identisch, wie oben erwähnt. Daher müssen Sie Tags nach Bedarf verwenden: Tag em HTML, um wichtige Textabschnitte zu rahmen und visuelles Kursivdesign mithilfe eines Tags anzuwenden ich oder CSS-Stile. Schauen wir uns nun die Verwendung von CSS-Stilen für die Auswahl von kursivem Text an.

Kursiver Text mit CSS

Verwenden Sie die Eigenschaft, um Stile für die Anzeige von Schriftarten in CSS festzulegen schriftstil, die folgende Werte annehmen kann: schräg (kursiver Text), kursiv (kursiv) und normal (normale Schrift).

Es lohnt sich, sich daran zu erinnern kursiv Schriftart und geneigtsind in ihrem Wesen nicht dasselbe. Kursivschrift ist eine spezielle Schriftart, die analog zu handgeschriebenem Text ist, und geneigt gebildet durch Neigen der regulären Schriftart nach rechts.

Attributanwendung schriftstil in der Praxis:

Kursiv mit CSS - "Nubex"

Unsere Websites sind in der Tat riesenschritt in der Webentwicklung.

Wir machen das wirklich qualität Websites.

Es muss jedoch beachtet werden, dass einige Browser Text mit der Eigenschaft enthalten schriftstil: schräg; darf nicht als kursiver Text interpretiert werden, sondern als kursiv.

Beschreibung

Gibt die Schriftart an - normal, kursiv oder kursiv. Wenn der Text kursiv oder kursiv eingestellt ist, konsultiert der Browser das System, um eine geeignete Schriftart zu finden. Wird die angegebene Schriftart nicht gefunden, simuliert der Browser mithilfe eines speziellen Algorithmus den gewünschten Texttyp. Das Ergebnis und die Qualität sind möglicherweise nicht zufriedenstellend, insbesondere beim Drucken eines Dokuments.

Syntax

schriftstil: normal | kursiv | schräg | erben

Die Werte

normal Normaler Textstil. kursiv kursiv. schräger kursiver Stil. Kursiv und Kursiv sind zwar ähnlich, aber nicht dasselbe. Kursiv ist eine spezielle Schrift, die die Handschrift imitiert, während die Schrägstellung durch Neigen gewöhnlicher Zeichen nach rechts entsteht. erben Erbt den Wert vom übergeordneten Element.

HTML5 CSS2.1 IE Cr Op Sa Fx

schriftstil

Duis te feugifacilisi

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud Übung ullamcorper suscipit lobortis nisl ut aliquip ex ea Commodo konsequat.

Das Ergebnis dieses Beispiels ist in Abb. 1 dargestellt. 1.

Zahl: 1. Anwenden der Eigenschaft im Schriftstil

Objektmodell

document.getElementById ("elementID") .style.fontStyle

Browser

Internet Explorer 7.0 oder höher unterstützt den geerbten Wert nicht.

Browser rendern immer Text mit dem schrägen Wert als kursiv.

In HTML spielt die Schriftgröße eine wichtige Rolle. Sie können den Benutzer auf wichtige Informationen auf der Website aufmerksam machen. Dabei ist nicht nur die Größe der Buchstaben wichtig, sondern auch deren Farbe, Dicke und sogar Familie.

Tags und Attribute beim Roboter mit HTML-Schriftarten

Die Hypertextsprache verfügt über eine Vielzahl von Werkzeugen zum Arbeiten mit Schriftarten. Schließlich ist die Textformatierung die Hauptaufgabe von HTML.

Der Grund für die Erstellung der HTML-Sprache war das Problem der Anzeige von Textformatierungsregeln in Browsern.


Betrachten Sie die Tags, die zum Arbeiten mit Schriftarten in HTML verwendet werden, und ihre Attribute. Das wichtigste ist das Tag ... Mithilfe der Werte der Attribute können Sie verschiedene Merkmale der Schriftart festlegen:

  • farbe - Legt die Farbe des Textes fest.
  • größe - Schriftgröße in herkömmlichen Einheiten.

Positive Attributwerte von 1 bis 7 werden unterstützt.

  • gesicht - Wird verwendet, um die Schriftfamilie des Textes festzulegen, der innerhalb des Tags verwendet werden soll ... Es werden mehrere Werte gleichzeitig unterstützt, die durch Kommas getrennt sind.

Nur der Text zwischen den Teilen des gekoppelten Schriftart-Tags wird formatiert. Der Rest des Textes wird in der Standardschriftart angezeigt.

Auch in HTML gibt es eine Reihe von gepaarten Tags, die nur eine Formatierungsregel angeben. Diese beinhalten:

  • - Setzt fette Schrift in HTML. Etikett Die Aktion ähnelt der vorherigen.
  • - die Größe ist größer als die Standardeinstellung;
  • - kleinere Schriftgröße;
  • - kursiver Text. Ähnliches Tag ;
  • - unterstrichener Text;
  • - durchgestrichen;
  • - Text nur in Kleinbuchstaben anzeigen;
  • - in Großbuchstaben.

Klartext

Miniaturansicht

Miniaturansicht

Mehr als üblich

Weniger als gewöhnlich

Kursivschrift

Kursivschrift

Unterstrichen

Durchgestrichen

Stilattributfunktionen

Zusätzlich zu den beschriebenen Tags gibt es verschiedene Möglichkeiten, die Schriftart in HTML zu ändern. Einer von ihnen verwendet das generische Stilattribut. Mithilfe der Werte seiner Eigenschaften können Sie den Anzeigestil für Schriftarten festlegen:

1) Schriftfamilie - Eigenschaft legt die Schriftfamilie fest. Die Aufzählung mehrerer Werte ist möglich.
Das Ändern der Schriftart in HTML auf den nächsten Wert erfolgt, wenn die vorherige Familie nicht auf dem Betriebssystem des Benutzers installiert ist.

Schreibsyntax:

schriftfamilie: Schriftname [, Schriftname [, ...]]

2) Schriftgröße - Die Größe wird von 1 bis 7 eingestellt. Dies ist eine der Hauptmethoden, mit denen Sie die Schrift in HTML erhöhen können.
Schreibsyntax:

schriftgröße: absolute Größe | relative Größe | Wert | Interesse | erben

Sie können auch die Schriftgröße einstellen:

  • In Pixeln;
  • In absoluten Werten ( xx-klein, x-klein, klein, mittel, groß);
  • In Prozent;
  • In Punkten (pt).

Schriftgröße: 7

Schriftgröße: 24px

Schriftgröße: x-groß

Schriftgröße: 200%

Schriftgröße: 24pt

3) Schriftstil - Legt den Schreibstil für die Schrift fest. Syntax:

schriftstil: normal | kursiv | schräg | erben

Werte:

  • normal - normale Schreibweise;
  • kursiv - kursiv;
  • schräg - rechtsgerichtete Schrift;
  • erben - erbt die Schreibweise des übergeordneten Elements.

Ein Beispiel für das Ändern der Schriftart in HTML mithilfe dieser Eigenschaft:

schriftstil: erben

schriftstil: kursiv

schriftstil: normal

schriftstil: schräg

4) Schriftvariante - konvertiert alle Großbuchstaben in Großbuchstaben. Syntax:

schriftvariante: normal | Kapitälchen | erben

Ein Beispiel für das Ändern der Schriftart in HTML mit dieser Eigenschaft:

schriftvariante: erben

schriftvariante: normal

schriftvariante: Kapitälchen

5) Schriftgröße - Mit dieser Option können Sie die Schreibstärke des Textes einstellen (Sättigung). Syntax:

schriftgröße: fett | kühner | heller | normal | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900

Werte:

  • fett - Legt die fettgedruckte HTML-Schrift fest.
  • kühner - dicker als normal;
  • leichter - weniger gesättigt im Vergleich zu normal;
  • normal - normale Schreibweise;
  • 100-900 - Legt die Schriftstärke in numerischen Äquivalenten fest.

schriftdicke: fett

schriftgröße: mutiger

schriftgröße: leichter

schriftgröße: normal

schriftgröße: 900

schriftgröße: 100

Die Schriftart-Eigenschaft und die HTML-Schriftfarbe

Schriftart ist eine weitere Containereigenschaft. Intern wurden die Werte mehrerer Eigenschaften zum Ändern von Schriftarten kombiniert. Die Schriftartensyntax lautet:

schriftart: Schriftgröße Schriftfamilie | erben

Außerdem können Schriftarten, die vom System in Beschriftungen auf verschiedenen Steuerelementen verwendet werden, als Wert festgelegt werden:

  • beschriftung - für Schaltflächen;
  • symbol - für Symbole;
  • menü - Menü;
  • meldungsfeld - für Dialogfelder;
  • kleine Beschriftung - für kleine Steuerelemente
  • statusleiste - Statusleistenschriftart.

schriftart: Symbol

schriftart: Beschriftung

schriftart: Menü

schriftart: Meldungsfeld

kleine Bildunterschrift

schriftart: Statusleiste

schriftart: kursiv 50px fett "Times New Roman", Times, Serife

Um die Schriftfarbe in HTML festzulegen, können Sie die Farbeigenschaft verwenden. Sie können die Farbe mithilfe eines Schlüsselworts oder eines RGB-Formats festlegen. Und auch in Form eines Hexadezimalcodes.

Jetzt werden wir die Haupt-Tags untersuchen. Beginnen wir mit den Tags, die auf der Seite benötigt werden, und bilden deren Struktur.

Block. Die Struktur der einfachsten Seite

Eine Site-Seite ist eine Nur-Text-Datei mit der Erweiterung .html... Diese Datei enthält den Text der HTML-Seite zusammen mit den Tags. Diese Datei muss die folgenden Tags haben: tag , der den Text der gesamten Site enthalten sollte (alles, was außerhalb dieses Tags geschrieben wird, wird vom Browser ignoriert), und darin sollten sich zwei weitere Tags befinden: tag für den Serviceinhalt der Seite und des Tags - für den Haupttext, der auf dem Browserbildschirm angezeigt wird.

Zum Bereitstellen von Inhalten, die sich innerhalb des Tags befinden Es kommen viele verschiedene Dinge herein, aber im Moment brauchen wir nur zwei davon. Dies ist ein Tag Hiermit wird der Name der Seite, die auf der Registerkarte des Browsers angezeigt wird, und das Tag festgelegt <meta> Hiermit wird die Seitencodierung festgelegt (sie wird im Attribut festgelegt <b>zeichensatz</b> und in der Regel zählt <b>utf-8</b>, mehr dazu im Video, das ein paar Absätze weiter unten sein wird).</p> <p>Auch vor dem Tag <html> Die Konstruktion wird normalerweise geschrieben <b>doctype</b>, gibt die Version der HTML-Sprache an, in der die Site erstellt wurde. Die aktuelle Version der Sprache ist Nummer fünf und der Doctype dafür sollte so aussehen -<!DOCTYPE html> .</p> <p>Schauen wir uns also die Grundstruktur der Seite an (um dieses Beispiel in einem Browser auszuführen, kopieren Sie es in eine Textdatei mit der Erweiterung <b>.html</b> und öffnen Sie in einem Browser, wenn Sie Probleme damit haben - sehen Sie sich das Video unter dem Beispiel an):</p> <p> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Dies ist der Titel Dies ist der Hauptinhalt der Seite.

Unter diesem Link erfahren Sie, wie dieses Beispiel in einem Browser aussieht.

Ich denke, nachdem Sie die Grundstruktur der Seite gelesen haben, haben Sie immer noch einige Verwirrung darüber, wie alles in der Praxis aussieht. Aus diesem Grund habe ich ein spezielles Video erstellt, in dem ich Ihnen zeigen werde, wie Sie Ihre erste HTML-Seite erstellen und im Browser ausführen (darin werde ich Ihnen auch den Seitentitel, Codierungen und das Code-Design erläutern). Schauen Sie es sich an und lesen Sie erst weiter:

Nun, da wir gelernt haben, wie man die einfachsten Seiten erstellt, werden wir nützliche Tags untersuchen, die in einem Tag verwendet werden sollten ... Dies sind Tags für Absätze, Überschriften, Listen, Links und andere nützliche Dinge. Also lasst uns anfangen.

Block. Absätze

Eines der Hauptelemente der Seite sind absätze... Sie können mit Absätzen in einem Buch verglichen werden - jeder Absatz beginnt in einer neuen Zeile und hat eine sogenannte rote Zeile (wenn die erste Zeile des Textes des Absatzes leicht nach rechts eingerückt ist). Standardmäßig gibt es keine rote Linie, aber es ist einfach (dazu später mehr).

Mit dem Tag wird ein Absatz erstellt

Auf diese Weise:

Dies ist der Titel

Dies ist ein Absatz.

Dies ist ein weiterer Absatz.

Und noch ein Absatz.

Dies ist ein Absatz.

Dies ist ein weiterer Absatz.

Und noch ein Absatz.

Block. Überschriften h1, h2, h3, h4, h5, h6

Neben Absätzen sind auf der Seite wichtige schlagzeilen... Sie können auch mit Titeln aus einem Buch verglichen werden - jedes Kapitel hat seinen eigenen Titel (den Titel dieses Kapitels) und ist in Absätze unterteilt, die auch ihre eigenen Titel haben. Nun, und der Haupttext der Seite ist in Absätzen.

Überschriften werden erstellt Tags verwenden

,

,

,

,

,
... Sie haben unterschiedliche Bedeutungsgrade. Im Titel h1 sollte haben der Titel der gesamten HTML-Seite, im h2 - Name blöcke Seiten in h3 - der Name der Unterblöcke und so weiter.

Alle Überschriften sind standardmäßig fett gedruckt und haben unterschiedliche Größen (dies kann über CSS geändert werden, dazu später mehr). Siehe Beispiel:

Dies ist der Titel

H1 Überschrift

H2 Überschrift

H3 Überschrift

H4 Überschrift

H5 Überschrift
H6 Überschrift

Dies ist der erste Absatz.

Dies ist der zweite Absatz.

Dies ist der dritte Absatz.

So sieht der Code im Browser aus:

H1 Überschrift

H2 Überschrift

H3 Überschrift

H4 Überschrift

H5 Überschrift
H6 Überschrift

Dies ist der erste Absatz.

Dies ist der zweite Absatz.

Dies ist der dritte Absatz.

Block. Fett

Sie wissen bereits, dass die Standardheader sind fettig... Sie können jedoch auch einfachen Text fett formatieren - nehmen Sie ihn einfach in das Tag auf ... Siehe Beispiel:

Dies ist der Titel

Dies ist normaler Text, und das ist fettig Text.

So sieht der Code im Browser aus:

Dies ist normaler Text, und das ist fettig Text.

sollte in einem anderen Tag verwendet werden, z. B. in einem Absatz. In diesem Fall erstellen Absätze die Gesamtstruktur der Seite (Absätze und Überschriften) und des Tags b macht einzelne Textstücke fett.

Block. Kursivschrift

Neben Fett können Sie auch machen kursivschrift mit dem Tag :

Dies ist der Titel

Dies ist normaler Text, und das ist kursiv Text.

So sieht der Code im Browser aus:

Block. Listen

Neben Absätzen und Überschriften gibt es ein weiteres wichtiges Element der Seite - dies ist die Listen... Solche Elemente sind wahrscheinlich allen Internetnutzern bekannt. Sie sind eine Auflistung von etwas (einer Liste) Punkt für Punkt. Normalerweise befindet sich neben jedem Element in der Liste ein ausgefüllter Kreis (dieser wird aufgerufen) marker aufführen).

Listen werden mit dem Tag erstellt

© 2020 Mobil- und Computer-Gadgets