In de laatste videoles hebben we geleerd hoe we nieuwe informatie kunnen verwijderen en toevoegen aan een nieuwe versie van een HTML-document, terwijl we dit aan zoekmachines rapporteren en visueel markeren, zodat bezoekers de wijzigingen ook kunnen zien. Hiervoor hebben we del- en ins-tags gebruikt.

In deze video-tutorial gaan we verder met het onderwerp van het opmaken van tekst in een HTML-document. We zullen twee HTML-tags bekijken die het superscript en subscript van tekst aangeven.

De sup HTML-tag is het superscript van tekst in HTML.

HTML-tag ^{is bedoeld om het superscript van tekst in HTML aan te geven. In sommige website-onderwerpen zal deze tag eenvoudigweg onvervangbaar zijn. Als u bijvoorbeeld een website heeft of van plan bent, gerelateerd aan formules, wiskundig of chemisch. Of, als er een bouwgerelateerde site is, dan de tag zal zeer nuttig zijn en zal helpen bij het voorbereiden van artikelen, bij het schrijven van formules of hoeveelheden, bijvoorbeeld vierkante meters in bouwonderwerpen.}

Maar als uw site geen betrekking heeft op de genoemde onderwerpen, betekent dit niet dat de tag ^{zal niet nuttig zijn. Het is voldoende om verbeeldingskracht en vindingrijkheid te tonen en een toepassing voor dit element te vinden.}

HTML-subtag is een subscript van tekst in HTML.

Wat betreft de HTML-tag _{, dan is het het tegenovergestelde van de tag ^{, en is verantwoordelijk voor het aangeven van het subscript van de tekst. Subscripttekst kan worden gebruikt bij het schrijven van formules of wiskundige vergelijkingen. Maar daarnaast kunt u misschien nog andere toepassingen voor de tag vinden .}}

De volgende videoles is gewijd aan nog twee tags, die in sommige situaties eenvoudigweg onvervangbaar kunnen zijn. Bovendien zijn ze niet alleen in staat om tekst op te maken, bijvoorbeeld in een artikel, maar ook om verschillende informatie op de site aan te geven tijdens de pagina-indeling. Eén van de tags voert de vertaling naar HTML uit en de tweede tekent een horizontale lijn.

CSS maakt flexibele aanpassing van tekst mogelijk, die wordt gepresenteerd met behulp van de HMTL-taal. Vandaag zullen we kijken naar het effect van de eigenschap “text-transform”, die het mogelijk maakt om de hoofdlettergrootte te wijzigen. Deze optie wordt door alle moderne browsers ondersteund en is opgenomen in de specificatie van alle versies van CSS.

Doel

De eigenschap “text-transform” kan drie hoofdwaarden en twee extra waarden aannemen. U kunt bijvoorbeeld aan alle geselecteerde tekst hoofdletters toewijzen. Of u kunt het commando het tegenovergestelde geven van de vorige eigenschap, waarbij alle tekens kleine letters worden. U kunt een afspraak maken op elke voor u geschikte manier. Gebruik bijvoorbeeld inlinestijlen. Of je kunt creëren

Een apart bestand met een beschrijving van alle eigendommen. Welke toewijzingsmethode u wilt gebruiken, is aan u. "Teksttransformatie" kan de volgende waarden aannemen:

• Hoofdletters. Zorgt ervoor dat alle geselecteerde tekens in hoofdletters worden weergegeven. Hoofdletters zijn een veel voorkomende waarde in CSS omdat deze veel complexe tekstgerelateerde problemen helpen oplossen.
• Kleine letters. Deze eigenschap is volledig tegengesteld aan het commando in hoofdletters.
• Kapitaliseren. Verandert het hoofdlettergebruik van de eerste letter in een hoofdletter. De overige karakters zullen niet veranderen.
• Geen. Hiermee kunt u alle toegewezen waarden (die nodig zijn om een ​​eigenschap vooraf te definiëren) ongedaan maken. Normaal gesproken wordt deze waarde standaard ingesteld.
• Erven. Erft alle eigenschappen van het bovenliggende element. Opgemerkt moet worden dat IE deze eigenschap niet ondersteunt.

Sollicitatie

Met behulp van CSS worden hoofdletters (of soortgelijke effecten) ingesteld met één eenvoudige opdracht. Daarom is het niet nodig om de hele tekst te wijzigen of te herschrijven. Als we het hebben over een site van één pagina, is deze eigenschap mogelijk niet nuttig. Maar als je een enorm portaal beheert waar je de hoofdletters van letters in bepaalde fragmenten moet corrigeren, dan wordt ‘teksttransformatie’ het enige effectieve hulpmiddel. U moet bijvoorbeeld het lettertype in de koptags 'h2' corrigeren. Om dit te doen, moet u het item toevoegen: “h2 (text-transform: hoofdletters; )”, en dan zijn alle koppen op het tweede niveau in hoofdletters.

Eigenaardigheden

Sommigen denken misschien dat het handmatig verwerken van tekst en het wijzigen van het lettertype met behulp van de eigenschap "text-transform" geen verschil maakt. Maar dat is niet waar. Als u handmatig overschakelt naar hoofdletters (hoofdletters), blijven de tekens ongewijzigd wanneer deze informatie van uw site wordt gekopieerd. Als je CSS-taal gebruikt, gebeurt alles anders. De eigenschap “text-transform” verandert het lettertype alleen visueel voor gebruikers. Maar in werkelijkheid blijven de symbolen onveranderd. Dit gebeurt met alle waarden van deze woning. De gekopieerde informatie (tekst) heeft de originele naamval die in de broncode van de pagina wordt gebruikt. Dit is het enige verschil tussen handmatige verwerking en het gebruik van CSS-opdrachten.

Het maakt niet uit welke u wilt gebruiken: kleine letters of hoofdletters, het belangrijkste is dat u het doel niet vergeet. Als u bijvoorbeeld alleen wijzigingen voor decoratieve doeleinden nodig heeft, kunt u veilig de eigenschap 'text-transform' gebruiken. Als u weet dat uw gebruikers waarschijnlijk de informatie die u plaatst, zullen kopiëren, kunt u het beste handmatig de hoofdletters en kleine letters van alle tekst wijzigen. Soms merken lezers een dergelijke lettertypevervanging immers niet op. Dit is vooral van cruciaal belang als het gaat om belangrijke documenten en soortgelijke informatie.

Hallo. Soms moet u bij het maken van webpagina's sommige woorden in hoofdletters of superscript instellen met behulp van CSS. Laten we kijken hoe het gedaan is.

Hoofdletters en kleine letters met css

Over het algemeen kunt u zelfs vandaag de dag de gewenste tekst in tags omsluiten _{^{en krijg de gewenste weergave, maar laten we ook kijken hoe dit kan worden gedaan met behulp van CSS, omdat de techniek een beetje anders is.}}

U moet bijvoorbeeld de formule H 2 O in een HTML-document schrijven. Dit wordt als volgt gedaan:

• De formule zelf is geschreven
• De woorden en cijfers die in de bovenste of onderste index moeten worden weergegeven, zijn ingesloten in een span-tag, waaraan een bepaalde klasse moet worden toegewezen. Bijvoorbeeld: tekens die moeten worden uitgevoerd
• In css moet je dit element instellen:

  Top-index(
  Verticaal uitlijnen: super;
  }

Deze eigenschap is verantwoordelijk voor de verticale uitlijning van tekst. De waarde super geeft aan dat de tekst in superscript wordt weergegeven. Maar de lettergrootte bleef hetzelfde als bij gewone tekst. Om alles er mooier uit te laten zien, moet je de lettergrootte ook iets kleiner instellen met behulp van de eigenschap font-size.

Dit is hoe het pand eenvoudig werkt. Om in subscript uit te voeren, moet u dus als volgt schrijven:

Top-index(
Verticaal uitlijnen: sub;
}

Het verschil met vergelijkbare HTML-tags is dat deze regels de lettergrootte niet wijzigen. Als u dit dus moet doen, moet u een nieuwe grootte in het stijlblad schrijven.

Dat is alles wat u moet weten over superscript en subscript in CSS. De accommodatie biedt geen extra mogelijkheden en deze zijn ook niet nodig. Als u wilt, kunt u deze tekst op een speciale manier vormgeven, maar dit is zelden nodig.

Waar het van pas kan komen

Superscript- en subscripttekst kunnen worden gebruikt bij het schrijven van formules, het toevoegen van notities en opmerkingen aan artikelen. Wikipedia biedt bijvoorbeeld bronnen en notities voor elk artikel. Naarmate het artikel vordert, worden ze in de vorm van kleine superscripts geplaatst. Dit irriteert de lezers niet en geeft je tegelijkertijd de mogelijkheid om de artikelen de gewenste uitstraling te geven.

De eigenschap is volledig cross-browser en wordt ondersteund in alle CSS-versies.

De index ten opzichte van de tekst is de verplaatsing van tekens ten opzichte van de basislijn naar boven of beneden. Afhankelijk van de positieve of negatieve waarde van de offset wordt de index respectievelijk hoger of lager genoemd. Ze worden actief gebruikt in de wiskunde, natuurkunde, scheikunde en om meeteenheden aan te duiden. HTML biedt twee elementen om een ​​index te maken: ^{(uit het Engelse superscript) - superscript en _{(uit Engels subscript) - lagere index. Tekst die in een van deze containers wordt geplaatst, wordt kleiner aangegeven dan de basistekst en wordt ten opzichte daarvan naar boven of beneden verschoven. Voorbeeld 1 laat zien hoe deze elementen en stijlen samen kunnen worden gebruikt om het uiterlijk van tekst te veranderen.}}

Voorbeeld 1: Een superscript en een subscript maken

Karakteristieke vergelijking van een oppervlak van de tweede graad

λ ³-I ₁λ ²+Ik ₂λ - Ik ₃ = 0

In het voorbeeld verschijnen zowel subscript als superscript tegelijkertijd. Om de stijl van het indexlettertype te wijzigen, worden stijlen gebruikt die een uniform ontwerp vormen (Fig. 1).

Rijst. 1. Weergave van indexen na het toepassen van stijlen

U kunt het gebruik ervan helemaal stopzetten ^{En _{ten gunste van stijlen. Een analoog van deze elementen is de eigenschap Vertical-align, die ervoor zorgt dat de tekst over een bepaalde afstand verticaal wordt verschoven. In voorbeeld 2 is de waarde specifiek 0,8em voor het superscript en -0,5em voor het subscript. Em is een relatieve eenheid die gelijk is aan de grootte van het huidige lettertype. 0,5em geeft bijvoorbeeld aan dat de tekst met de helft van de lettergrootte moet worden verschoven.}}

Voorbeeld 2: Stijlen gebruiken om indexen te beheren

Polynoom van graad N

f(x) = een 0+een 1 x + ... + een n-1 X n-1+een N X N

In het voorbeeld wordt de formule zelf vergroot weergegeven, de superscript-symbolen zijn rood en de onderste blauw (Fig. 2).