HTML hævet skrift. Html er - hvordan man laver tekst med store bogstaver css

Hej. Nogle gange, når du opretter websider, skal du indstille nogle ord til store bogstaver eller superscript ved hjælp af CSS. Lad os se, hvordan det gøres.

Store og små bogstaver ved hjælp af css

Generelt kan du selv i dag omslutte den ønskede tekst i tags _{^{og få den skærm, du ønsker, men lad os også se, hvordan dette kan gøres ved hjælp af css, fordi teknikken er lidt anderledes.}}

For eksempel skal du skrive formlen H 2 O i et html-dokument. Dette gøres sådan:

Selve formlen er skrevet
De ord og tal, der skal vises i øvre eller nedre indeks, er indesluttet i et span-tag, som skal tildeles en eller anden klasse. For eksempel: tegn, der skal udskrives
I css skal du indstille dette element:
Top-indeks (
Lodret-align: super;
}

Denne egenskab er ansvarlig for den lodrette justering af tekst. Dens værdi super angiver, at teksten vil blive vist i hævet skrift. Men skriftstørrelsen forblev den samme som almindelig tekst. For at få alt til at se pænere ud, bør du også indstille skriftstørrelsen lidt mindre ved hjælp af egenskaben font-size.

Sådan fungerer ejendommen ganske enkelt. For at udskrive i subscript skal du derfor skrive sådan her:

Top-indeks (
Vertical-align: sub;
}

Forskellen fra lignende HTML-tags er, at disse regler ikke ændrer skriftstørrelsen, så hvis du skal gøre dette, bliver du nødt til at skrive en ny størrelse i typografiarket.

Det er alt, du behøver at vide om hævet og sænket skrift i css. Ejendommen giver ingen yderligere muligheder, og de er ikke nødvendige. Hvis du ønsker det, kan du designe denne tekst på en speciel måde, men det er sjældent nødvendigt.

Hvor det kan komme til nytte

Hævet og sænket tekst kan bruges, når du skriver formler, tilføjer noter og noter til artikler. For eksempel giver Wikipedia kilder og noter til hver artikel. Efterhånden som artiklen skrider frem, placeres de i form af små overskrifter. Dette irriterer ikke læserne og giver dig samtidig mulighed for at give artiklerne det ønskede udseende.

Ejendommen er fuldt ud cross-browser og understøttet i alle versioner af CSS.

I flere lektioner nu er vi blevet mere sofistikerede med at formatere tekst ved hjælp af CSS, og denne gang lærer vi, hvordan man ændrer størrelsen på tekst. I denne henseende åbner cascading style sheets meget brede muligheder for os, og for at være mere præcis kan vi:

Vis al tekst med store bogstaver;
Vælg al tekst med små bogstaver;
Sørg for, at det første bogstav i hvert ord starter med stort bogstav.

"Det er selvfølgelig alt sammen godt, men hvornår kan det være nødvendigt?" - du spørger. Lad os forestille os en situation, hvor du skal vise alle menupunkter med store bogstaver. For at gøre dette er det ikke nødvendigt at skrive dem, inklusive CapsLock-tasten, eller mens du holder Shift-knappen nede. Det vil være nok at indstille alle listeelementer til at blive vist med store bogstaver ved at oprette en tilsvarende regel i CSS-filen. Og dette er blot en af mange mulige situationer.

tekst-transform egenskab

Vi vil kontrollere tekstens store og små bogstaver ved hjælp af egenskaben text-transform. Det har 4 hovedværdier - store bogstaver (store bogstaver), små bogstaver (små bogstaver), store bogstaver (store bogstaver for hvert første bogstav i ordet, andre værdier ændres ikke), ingen (formatering anvendes ikke) . Ved første øjekast kan alt dette virke meget kompliceret for dig.

Det vigtigste er ikke at gå i panik...

Men i praksis er alt ganske enkelt, som du nu vil se. Det vigtigste er at vælge den rigtige vælger, fordi værdierne af teksttransformeringsegenskaben er nedarvet.

Brug stort

Først og fremmest foreslår jeg at sætte al tekst til store bogstaver, for hvilket vi opretter følgende CSS-regel:

Brødtekst (tekst-transform: store bogstaver;)

I princippet er der ikke noget kompliceret, vi brugte bare den store værdi. Som de siger, er alt intuitivt. Sådan ser det ud i det virkelige liv:

Alt med stort bogstav...

Små bogstaver - gælder for alle

Det næste trin er at anvende små bogstaver overalt ved at skrive følgende:

Brødtekst (tekst-transform: små bogstaver;)

Som du sikkert allerede har gættet, er de to betydninger, vi lige har mødt, til en vis grad antonymer. Og i illustrationen herunder kan du se resultatet af den nyoprettede ejendom.

Webside med små bogstaver aktiveret

Sæt det første bogstav i hvert ord med stort

For at gøre dette skal vi blot bruge den tilsvarende værdi:

Brødtekst (tekst-transformer: store bogstaver;)

Jeg ved ikke, hvor ofte du vil bruge sådan en CSS-regel, men det vil ikke skade dig at vide om en sådan mulighed, især når du løser ikke-trivielle problemer. Resultatet kan ses på billedet herunder.

Tekst efter anvendelse af stort

Lad os endelig tage et hurtigt kig på den sidste værdi – ingen. Som jeg allerede har sagt, kan den bruges til at annullere arv fra en forælder. Lad os for eksempel forestille os, at vi har alle de tidligere regler i kraft, og for afsnit, vi bør annullere dem, for dette skriver vi følgende:

P (tekst-transform: ingen;)

Jeg tør gå ud fra, at alt er klart for dig, hvis ikke, så stil dine spørgsmål i kommentarerne. Og det er alt for mig. Jeg håber, at denne CSS-tutorial var nyttig for dig. Hvis det er sandt:

Genindlæg denne artikel på sociale netværk, så flere mennesker kan drage fordel af den;
Tilmeld dig mit nyhedsbrev for ikke at gå glip af nyttige og interessante blogindlæg.

Det er her, jeg ikke siger farvel til dig. Tak for din opmærksomhed og vi ses i de næste publikationer!

HTML-tags _{Og ^{- Sænket og hævet tekst}}

Definition og brug

Tag _{definerer interlineær tekst. Sublineær tekst er halvdelen af højden og vises under basislinjen. Interlineær tekst kan bruges, når du skriver kemiske formler, såsom H 2 O.}

Tag ^{definerer hævet tekst. Hævet tekst er halvdelen af højden og vises over grundlinjen. Hævet tekst kan bruges, når du skriver fodnoter, såsom WWW.}

Browser support

Tags _{Og ^{understøttet af alle større browsere.}}

Forskelle mellem HTML og XHTML

Standard attributter

Kolonne DTD angiver i hvilken type dokument HTML 4.01/XHTML 1.0 DTD attribut er tilladt. S=Streng, T=Transitional og F=Frameset.

Tags _{Og ^{understøtter følgende standardattributter:}}

Attribut	Betyder	Beskrivelse	DTD
klasse	klasse_navn	Angiver klassenavnet for elementet	STF
dir	rtl ltr	Angiver tekstretningen for indhold i et element	STF
id	identifikator	Angiver en unik identifikator for et element	STF
lang	sprogkode	Angiver sprogkoden for elementets indhold	STF
stil	stil_definition	Angiver en indlejret stil for et element	STF
titel	tekst	Angiver yderligere oplysninger om et element	STF
xml:lang	sprogkode	Definerer sprogkoden for elementindhold i XHTML-dokumenter	STF

Mere information vedr Standardattributter.

Begivenhedsattributter

Tags _{Og ^{understøtter følgende hændelsesattributter:}}

Attribut	Betyder	Beskrivelse	DTD
onclick	manuskript	Script lanceret ved museklik	STF
ondblklik	manuskript	Dobbeltklik på script	STF
onmousedown	manuskript	Script til at køre, når der trykkes på museknappen	STF
onmousemove	manuskript	Script til at køre, når musemarkøren bevæger sig	STF
onmouseout	manuskript	Script til at køre, når musemarkøren bevæger sig uden for et element	STF
over musen	manuskript	Script køres, når musemarkøren bevæger sig hen over et element	STF
onmouseup	manuskript	Script til at køre, når museknappen slippes	STF
onkeydown	manuskript	Script køres ved tastetryk	STF
abepres	manuskript	Script køres, når der trykkes på en tast og derefter slippes	STF
onkeyup	manuskript	Script til at køre, når nøglen slippes	STF

Mere information vedr

Indekset i forhold til teksten er forskydningen af tegn i forhold til grundlinjen op eller ned. Afhængigt af den positive eller negative værdi af offset, kaldes indekset henholdsvis øvre eller nedre. De bruges aktivt i matematik, fysik, kemi og til at udpege måleenheder. HTML tilbyder to elementer til at oprette et indeks: ^{(fra engelsk superscript) - superscript og _{(fra engelsk subscript) - lavere indeks. Tekst placeret i en af disse beholdere er angivet som mindre end basisteksten og er forskudt op eller ned i forhold til den. Eksempel 1 viser, hvordan disse elementer og stilarter kan bruges sammen til at ændre udseendet af tekst.}}

Eksempel 1: Oprettelse af en hævet og et sænket skrift

Hævet og nedskrevet

Karakteristisk ligning af en overflade af anden grad

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

I eksemplet vises både sænket og hævet skrift samtidigt. For at ændre indeksskrifttypen bruges stilarter, der sætter et ensartet design (fig. 1).

Ris. 1. Visning af indekser efter anvendelse af typografier

Du kan helt stoppe med at bruge det ^{Og _{til fordel for stilarter. En analog af disse elementer er egenskaben vertikal-align, som får teksten til at blive forskudt lodret med en specificeret afstand. Specifikt i eksempel 2 er værdien 0,8em for hævet skrift og -0,5em for sænket skrift. Em er en relativ enhed svarende til størrelsen af den aktuelle skrifttype. For eksempel angiver 0,5em, at teksten skal forskydes med halvdelen af skriftstørrelsen.}}

Eksempel 2: Brug af stilarter til at administrere indekser