Das HTML-Tag in Großbuchstaben. CSS-Stile mithilfe von Pseudoelementen nutzen. Kulturdenkmal des Mittelalters
Guten Tag, Geeks des Baustellenaufbaus. In der heutigen Veröffentlichung werden wir uns mit einem Thema befassen, das sich auf die Gestaltung von Textinhalten bezieht. Aus diesem Grund lernen Sie, wie Sie Großbuchstaben per CSS setzen. Machen Sie sich mit verschiedenen Optionen zum Erstellen einer Drop-Cap vertraut und probieren Sie natürlich alles in der Praxis aus. Kommen wir nun zum lustigen Teil!
Lassen Sie uns den Text transformieren
Mit kaskadierenden Stylesheets können Sie sowohl das erste Zeichen des Blocks als auch den gesamten Text ändern. Ich zeige Ihnen, wie Sie beides können. Darüber hinaus werden alle in diesem Artikel genannten Tools in drei Sprachstufen unterstützt: css1, css2, css2.1 und css3.
Ich beginne mit einer interessanten Eigenschaft, die den gesamten Textinhalt in der Auswahl ändert. Das texttransformation.
Das benannte Element kann Zeichen in Groß- und Kleinbuchstaben konvertieren und auch jedes erste Zeichen des Wortes groß schreiben. Ich habe mehr über die Werte in der Tabelle geschrieben.
Um das theoretische Material zu konsolidieren, nehmen Sie ein Beispiel.
Beachtung!
! Rabatt auf alle Schönheitsprodukte morgen!
Die Aktion gilt in allen Filialen in Ihrer Stadt.
Erstellen Sie eine Drop-Cap
Wenn Sie nicht wissen, was der Begriff „Drop Cap“ bedeutet, ist dies der richtige Zeitpunkt, um dies herauszufinden, da er in direktem Zusammenhang mit dem aktuellen Thema steht.
Der Anfangsbuchstabe (oder manchmal auch der Anfangsbuchstabe) ist der erste Buchstabe des Kapitels, der sich von den anderen durch seine Größe, Farbe und in einigen Fällen sogar das Schriftdesign unterscheidet. Im wirklichen Leben findet sich ein Beispiel für einen solchen Brief in alten Manuskripten und Büchern.
Es gibt verschiedene Möglichkeiten, eine Initiale zu erstellen. Oft wird ein Zeichen mit einem Markup-Sprach-Tag unterschieden und danach werden bestimmte Eigenschaften in den Stilen vorgeschrieben, die es modifizieren. Dies ist ein guter Weg, aber in dieser Veröffentlichung geht es um CSS-Mechanismen (die meiner Meinung nach in diesem Fall viel logischer und bequemer zu verwenden sind).
Um das Problem zu lösen, können Sie ein Tool wie verwenden.
In diesem Fall wird also der erste Buchstabe verwendet. Wie alle Pseudoelemente wird es dem Selektor zugewiesen, der durch Doppelpunkte getrennt ist. Danach werden gemäß allen Regeln von Stylesheets Eigenschaften angegeben. Sie können jedoch nur die Eigenschaften anwenden, die sich auf das Bearbeiten von Schriftarten, Auffüllen, Farbe, Hintergrund, Rändern und Rahmen beziehen.
Ich schlage vor, ein konkretes Beispiel zu betrachten. Bei der Implementierung des vorgestellten kleinen Programms habe ich beschlossen, nicht nur eine farbige Abdeckkappe herzustellen, sondern diese mit Blumen zu füllen. Dazu müssen Sie einige knifflige Tricks anwenden, um eine transparente Schriftfarbe festzulegen und den Buchstaben mit dem ausgewählten Bild zu füllen.
Dieser Absatz enthält einen Satz mit sehr interessantem Inhalt.
Lassen Sie uns im nächsten Absatz eine interessante Geschichte fortsetzen.
Das Ergebnis sieht sehr attraktiv und ungewöhnlich aus, was die perfekte Lösung für ist.
Wie Sie sehen können, ist dieses Thema sehr einfach. Sie können den von mir angegebenen Code problemlos für Ihre Webressourcen verwenden und ihn an Ihren Stil anpassen.
Wenn das präsentierte Material für Sie nützlich war, abonnieren Sie Updates in meinem Blog und vergessen Sie nicht, das gewonnene Wissen (und natürlich einen Link zu meinem Blog) mit Ihren Freunden zu teilen. Viel Erfolg!
Tschüss!
Viele Grüße, Roman Chueshov
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 kombiniert, mit denen Schriftarten geändert werden sollen. 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 sowohl im Schlüsselwort- als auch im RGB-Format festlegen. Und auch in Form eines Hexadezimalcodes.
Steuert die Konvertierung von Elementtext in Groß- oder Kleinbuchstaben. Wenn der Wert nicht "none" ist, wird der Fall des Quelltextes geändert.
kurze Information
Bezeichnungen
| Beschreibung | Beispiel | |
|---|---|---|
| <тип> | Gibt die Art des Wertes an. | <размер> |
| A && B. | Die Werte müssen in der angegebenen Reihenfolge angezeigt werden. | <размер> && <цвет> |
| A | B. | Gibt an, dass nur einer der vorgeschlagenen Werte ausgewählt werden soll (A oder B). | normal | Small Caps |
| A || B. | Jeder Wert kann einzeln oder in Verbindung mit anderen in beliebiger Reihenfolge verwendet werden. | breite || Anzahl |
| Gruppiert Werte. | [Ernte || Kreuz] | |
| * | Wiederholen Sie null oder mehrmals. | [,<время>]* |
| + | Ein- oder mehrmals wiederholen. | <число>+ |
| ? | Der angegebene Typ, das angegebene Wort oder die angegebene Gruppe ist optional. | einsatz? |
| (A, B) | Wiederholen Sie mindestens A, jedoch nicht mehr als B-mal. | <радиус>{1,4} |
| # | Wiederholen Sie dies ein- oder mehrmals durch Kommas getrennt. | <время># |
Die Werte
großschreibung Das erste Zeichen jedes Wortes im Satz wird großgeschrieben. Die restlichen Symbole ändern ihr Aussehen nicht. Kleinbuchstaben Alle Textzeichen werden Kleinbuchstaben (Kleinbuchstaben). Großbuchstaben Alle Textzeichen sind Großbuchstaben (Großbuchstaben). none Ändert den Fall nicht.
Sandkasten
Winnie the Pooh war einer kleinen Erfrischung immer nicht abgeneigt, besonders um elf Uhr morgens, denn zu dieser Zeit war das Frühstück längst vorbei und das Abendessen hatte nicht einmal daran gedacht, zu beginnen. Und natürlich war er schrecklich glücklich zu sehen, wie Rabbit Tassen und Teller herausnahm.
div (Texttransformation: groß schreiben;)
Beispiel
Kulturdenkmal des Mittelalters
Das Amazonas-Tiefland nimmt einen kleinen Transport von Katzen und Hunden auf, und Hayosh Bay ist berühmt für seine Rotweine.
Das Ergebnis dieses Beispiels ist in Abb. 1 dargestellt. 1.
Zahl: 1. Anwenden der Texttransformationseigenschaft
Objektmodell
Ein Objekt.style.textTransform
Spezifikation
Jede Spezifikation durchläuft mehrere Genehmigungsstufen.
- Empfehlung - Diese Spezifikation wurde vom W3C genehmigt und wird standardmäßig empfohlen.
- Kandidatenempfehlung ( Mögliche Empfehlung) - Die für den Standard verantwortliche Gruppe ist überzeugt, dass er seinen Zielen entspricht, aber die Hilfe der Entwicklergemeinschaft ist erforderlich, um den Standard zu implementieren.
- Vorgeschlagene Empfehlung ( Empfohlene Empfehlung) - Zu diesem Zeitpunkt wird das Dokument dem W3C-Beirat zur endgültigen Genehmigung vorgelegt.
- Arbeitsentwurf - Eine ausgereiftere Version des Entwurfs nach Diskussion und Überarbeitung zur Überprüfung durch die Community.
- Entwurf des Herausgebers ( Redaktioneller Entwurf) - eine Entwurfsversion des Standards nach Bearbeitung durch die Projekteditoren.
- Entwurf ( Entwurf einer Spezifikation) ist der erste Entwurf der Norm.
Oft hat der Benutzer es eilig, wenn er der Site Materialien hinzufügt oder beispielsweise ein neues Thema im Forum erstellt, einen Satz (Titel) mit einem kleinen Buchstaben (Kleinbuchstaben) zu schreiben. Dies ist bis zu einem gewissen Grad ein Fehler.
Ich zeige Ihnen verschiedene Möglichkeiten zur Lösung dieses Problems: PHP und CSS eignen sich besser für bereits veröffentlichte Materialien, wenn jQuery die Situation bereits vor der Veröffentlichung beheben kann.
Der erste Buchstabe einer Zeichenfolge wird in PHP in Großbuchstaben geschrieben
In PHP gibt es eine Funktion namens „ ucfirst", Der nur das erste Zeichen der Zeichenfolge in Großbuchstaben umwandelt, aber sein Minus ist, dass es mit Cyrillic nicht ganz richtig funktioniert.
Dazu schreiben wir unsere eigene kleine Funktion. Die Implementierung sieht folgendermaßen aus:
In dieser Version erhalten wir einen Satz, der mit einem Großbuchstaben beginnt, was wir tatsächlich brauchen.
Großbuchstabe des ersten Zeichenkettenbuchstabens in CSS
Diese Methode konvertiert visuell (dh im Quellcode der Site sehen die Angebote so aus, wie sie ist) auch das erste Zeichen in Großbuchstaben.
Die Verwendung ist wie folgt:
erster Satz
zweiter Satz
dritter Satz
vierter Satz
Verwendung des Pseudoelements " erster Brief"Und Eigenschaften" texttransformation»Wir haben das Erscheinungsbild für jeden ersten Buchstaben des Absatzes festgelegt.
JQuery Großbuchstabe erster Buchstabe der Zeichenfolge
Wie ich bereits sagte, eignet sich diese Konvertierungsmethode am besten für Materialien, die noch veröffentlicht werden müssen.
Zum Beispiel nehmen wir ein Textfeld (es dient als Feld für die Eingabe eines Titels für uns) und schreiben ein kleines Skript dafür, das bei der Eingabe eines Satzes mit einem Kleinbuchstaben groß geschrieben wird:
Das Skript funktioniert sowohl beim Schreiben als auch beim Einfügen von Text. Vergessen Sie nicht, dass die jQuery-Bibliothek verbunden sein muss, damit die Skripte auf Ihrer Site funktionieren.
Eine Drop-Cap ist der erste Buchstabe eines Absatzes, der größer als der Rest ist und so platziert wird, dass sich seine Oberseite auf der Ebene der ersten Zeile des Absatzes befindet. Im Bild sehen Sie ein Beispiel für eine im Text eingebettete Drop-Cap.
Übrigens hat WordPress ein spezielles Plugin (wordpress.org/extend/plugins/drop-caps), mit dem Sie automatisch im Text eingebettet erstellen (und nach unten versetzen) können. großbuchstaben... Wunderbar! Was ist jedoch, wenn Sie kein Plugin verwenden möchten (ich bin sicher, dass Sie dies nicht tun) und nur eine Drop-Cap für mehrere Posts und möglicherweise an einem bestimmten Ort erstellen müssen?
Die gute Nachricht: Sie müssen kein Plugin verwenden, um Großbuchstaben zu erstellen. Sie benötigen lediglich ein kleines CSS und ein Span-Tag. Öffnen Sie Ihre CSS-Datei und fügen Sie den folgenden Code hinzu:
Span.dropcaps (Schriftfamilie: Georgia, Serife; Farbe: #ccc; Schriftgröße: 46px; Float: links; Schriftgröße: 400; Zeilenhöhe: 1em; Rand-unten: -0,4em; Rand-rechts : 0.09em; Position: relativ;)
Irgendwie so. Natürlich benötigen Sie einen Stil, der zu Ihrem Design und Text passt. Beispielsweise müssen die Eigenschaftswerte Schriftgröße, Ränder und Zeilenhöhe basierend auf Ihrem Design und Text ausgewählt werden.
Span Tag
Damit der Stil auf den Großbuchstaben des Textes angewendet werden kann, müssen Sie den Großbuchstaben in das span-Tag "einschließen" und die entsprechende Klasse schreiben.
EIN
Pseudoelement: Anfangsbuchstabe
Sie können das erste Zeichen im Text auch mit dem Pseudoelement: first-letter formatieren. Es kann jedoch eine begrenzte Anzahl von Eigenschaften auf das Pseudoelement aus dem ersten Buchstaben angewendet werden: Dies sind Eigenschaften, die sich auf Schriftart, Farbe, Hintergrund, Rahmen, Ränder und Abstand beziehen. Es sollte auch beachtet werden, dass das Pseudoelement aus dem ersten Buchstaben in älteren Browsern nicht funktioniert.
P: Anfangsbuchstabe (Schriftfamilie: Georgia, Serife; Farbe: #ccc; Schriftgröße: 46px; Float: links; Schriftgröße: 400; Zeilenhöhe: 1em; Rand-unten: -0,4em; Rand -right: 0.09em; Position: relativ;)
Hier sind einige Bearbeitungsmethoden. großbuchstaben mit CSS.