Na začetku odseka je za prvo črko določena dvignjena kapica.

In nov odstavek...

Če se počutite eksperimentalno, lahko raziščete različne metode poleg :first-child in :first-of-type. Na primer, kot je :nth-of-type ali :nth-of-child, da vidite, kako je mogoče te ali druge vrste psevdorazredov uporabiti za besedilo CSS z velikimi črkami. Ne glede na to, ali sledite načelom, opisanim v tem članku, ali začnete kopati globlje, ko se boste naučili delati s psevdorazredi CSS first-child, :first-of-type in :first-letter, se boste lahko prijavili jih pravilno spremenite v elemente HTML.

Dober dan, geeki za gradnjo spletnih mest. Današnja publikacija bo obravnavala temo oblikovanja besedilnih vsebin. Zato se boste naučili nastavljati velike tiskane črke z orodji CSS, se seznanili z več možnostmi izdelave kapice in seveda vse skupaj tudi preizkusili v praksi. No, zdaj pa preidimo na zabavni del!

Preoblikujemo besedilo

Zahvaljujoč kaskadnim slogovnim listom lahko spremenite tako prvi znak bloka kot celotno besedilo. Povedal vam bom, kako lahko naredite oboje. Poleg tega so vsa orodja, omenjena v tem članku, podprta v treh jezikovnih ravneh: css1, css2, css2.1 in css3.

Začel bom z zanimivo lastnostjo, ki spremeni vso besedilno vsebino v izbranem . to preoblikovanje besedila.

Imenovani element lahko pretvarja znake v velike in male črke ter vsak prvi znak besede nastavi na veliko začetnico. Več o vrednostih sem napisal v tabeli.

Zdaj pa si za okrepitev teoretičnega gradiva oglejte primer.

Pozor!

!Jutri popust na vse kozmetične izdelke!

Akcija velja v vseh poslovalnicah v vašem mestu.

Ustvarjanje kapice

Če ne veste, kaj pomeni izraz "drop cap", je zdaj pravi čas, da izveste, saj je neposredno povezan s trenutno temo.

Velika začetnica (ali včasih rečejo tudi začetnica) je prva črka poglavja, ki se od ostalih razlikuje po veliki velikosti, barvi in ​​v nekaterih primerih celo po oblikovanju pisave. V resničnem življenju lahko primer takšnega pisma najdemo v starih rokopisih in knjigah.

Začetnico lahko ustvarite na več načinov. Pogosto je simbol označen z oznako označevalnega jezika nato pa so določene lastnosti predpisane v slogih, ki ga spreminjajo. To je dober način, vendar ta publikacija govori o mehanizmih CSS (ki so po mojem mnenju v tem primeru veliko bolj logični in priročni za uporabo).

Za rešitev te težave lahko uporabite orodje, kot je npr.

Torej, v tem primeru uporabljamo: prva črka. Kot vsi psevdoelementi je izbirniku dodeljen z dvopičjem. Po vseh pravilih slogovnih listov so navedene lastnosti. Vendar pa lahko uporabite samo lastnosti, ki se nanašajo na urejanje pisav, oblazinjenja, barve, ozadja, robov in obrob.

Predlagam, da razmislimo o konkretnem primeru. Pri izvajanju predstavljenega majhnega programa sem se odločil, da ne naredim le barvne začetnice, ampak jo napolnim s cvetjem. Če želite to narediti, morate uporabiti nekaj zapletenih trikov, tako da barvo pisave nastavite na prozorno in črko napolnite z izbrano sliko.

Ta odstavek vsebuje stavek z zelo zanimivo vsebino.

Nadaljujmo zanimivo zgodbo v naslednjem odstavku.

Nastali rezultat je videti zelo privlačen in nenavaden, kar je idealna rešitev za.

Kot lahko vidite, je ta tema zelo preprosta. Programsko kodo, ki sem jo zagotovil za vaše spletne vire, lahko preprosto uporabite in jo spremenite in prilagodite svojemu slogu.

Če vam je bilo predstavljeno gradivo koristno, se naročite na posodobitve mojega bloga in ne pozabite deliti pridobljenega znanja (in seveda povezave do mojega bloga) s prijatelji. Vso srečo!

Adijo!

Lep pozdrav, Roman Chueshov

Omogoča spreminjanje velikih in malih črk besedila.

Privzeta vrednost je nastavljena na nič, kar nima vpliva na besedilo. Primer besedila ostaja enak. Vrednosti velikih in malih črk pretvorijo znake v velike oziroma male črke. Če podate veliko začetnico, bodo velike črke samo prvi znaki vsake besede. Inherit podeduje vrednost svojega nadrejenega.

Primer

To je naslov. Zanj je uporabljena lastnost pretvorbe besedila z vrednostjo z velikimi črkami. Vsi znaki bodo velike črke.

Lastnost pretvorbe besedila z malimi črkami vrednosti je uporabljena za ta odstavek, kar pomeni, da bodo vse črke napisane z malimi črkami.

In za ta zadnji odstavek je uporabljena lastnost preoblikovanja besedila z lastnostjo CAPITALIZE. Začetne črke vsake besede bodo velike in samo te.

Rezultat

Vendar pa ni vse tako preprosto. Obstaja nekaj odtenkov. Če pogledate drugi odstavek zgornjega primera, boste opazili, da je beseda kapitalizirati kljub temu, da ima za odstavek nastavljeno lastnost pretvorbe besedila, da uporablja veliko začetnico, v celoti prikazana z velikimi črkami, kar se ujema z izvirnim besedilom. To je razloženo z dejstvom, da se pri določeni vrednosti velikih črk preverijo samo prve črke besed, ostale pa ostanejo nespremenjene, ne glede na njihovo začetno stanje.
Kljub navidezni preprostosti je lahko lastnost pretvorbe besedila zelo uporabna. Če želite na primer besedilo vseh naslovov H1 vašega spletnega mesta napisati z velikimi črkami, morate slogovnemu listu dodati samo eno lastnost

H1 (pretvorba besedila: velike črke;)

in problem bo rešen. In ne bo vam treba ročno spreminjati vseh glav, ki jih je lahko zelo, zelo veliko.

Nadzira, ali se besedilo elementa pretvori v velike ali velike črke. Če je vrednost drugačna od none , bodo velike in male črke izvornega besedila spremenjene.

kratke informacije

Poimenovanja

Vrednote

velika začetnica Prvi znak vsake besede v stavku bo napisan z veliko začetnico. Preostali simboli ne spremenijo svojega videza. male črke Vsi besedilni znaki postanejo male črke (male črke). velike črke Vsi besedilni znaki postanejo velike črke (velike črke). none Ne spremeni velikih in malih črk znakov.

Peskovnik

Winnie Pooh vedno ni bil nenaklonjen malo osvežitve, še posebej ob enajstih zjutraj, saj se je takrat zajtrk že zdavnaj končal, kosilo pa se še ni začelo. In seveda je bil strašno vesel, ko je videl, da Zajec jemlje skodelice in krožnike.

div (transformacija besedila: kapitalizacija; )

Primer

Srednjeveški kulturni spomenik

Amazonsko nižavje je nezmerno v majhnem prevozu mačk in psov, Hajos Bahia pa slovi po rdečih vinih.

Rezultat tega primera je prikazan na sl. 1.

riž. 1. Uporaba lastnosti pretvorbe besedila

Objektni model

Predmet.style.textTransform

Specifikacija

Vsaka specifikacija gre skozi več stopenj odobritve.

• Priporočilo – specifikacijo je odobril W3C in je priporočena kot standard.
• Priporočilo kandidata ( Možno priporočilo) - skupina, odgovorna za standard, je zadovoljna, da izpolnjuje svoje cilje, vendar potrebuje pomoč razvojne skupnosti za implementacijo standarda.
• Predlagano priporočilo Predlagano priporočilo) - na tej stopnji je dokument predložen svetovalnemu svetu W3C v končno odobritev.
• Delovni osnutek – bolj zrela različica osnutka, o katerem so razpravljali in ga spremenili za pregled skupnosti.
• Uredniški osnutek ( Uredniški osnutek) - osnutek različice standarda po spremembah s strani urednikov projekta.
• Osnutek ( Osnutek specifikacije) - prvi osnutek standarda.

Pozdravljeni bralci tega bloga. Danes bom govoril o tem, kako lahko naredite vse velike črke s pomočjo CSS. Seveda lahko za to vklopite Caps Lock in napišete želeno besedilo, vendar je to precej primitivna metoda. Kaj pa, če morate v končanem članku poudariti ločen odstavek?

Naredi vse velike črke v css

Za to obstaja lastnost preoblikovanja besedila, ki, kot ste morda uganili, preoblikuje besedilo. Ima naslednje vrednosti:

• male črke – celotno besedilo je prikazano z malimi črkami
• velike črke – vse besede so prikazane z velikimi črkami (kar potrebujemo)
• veliko – prva črka vsake besede je velika

To je v bistvu vse, kar morate vedeti. Ostaja le ugotoviti, kako dostopati do želenega elementa. Predstavljajmo si ta primer: peti odstavek v članku morate napisati z velikimi črkami. In kako se to lahko izvaja?

Kako do želenega elementa?

Kot veste, se odstavek ustvari s pomočjo seznanjene oznake html, katere celotna vsebina postane odstavek. Vse, kar ostane, je, da zanj definiramo nov slogovni razred:

Zdaj imamo možnost dostopa do tega posebnega odstavka prek jezika CSS, ne da bi to vplivalo na ostale. To lahko storite takole:

Velika tiskana črka(
Pretvorba besedila: velike črke;
}

Ta metoda je primerna, ko morate poudariti fragment v določenem članku. Kaj pa, če bi morale vse strani imeti določeno besedilo z velikimi črkami. V tem primeru je bolje, da blok postavite v datoteko predloge, da ga ne boste vsakič zapisali.

Morda pa morate poudariti drugi odstavek v vsakem članku z uporabo CSS z velikimi črkami. Potem vam bo ustrezala druga možnost. Poiščite blok, kjer se pojavi članek, in dostopajte do drugega odstavka z uporabo psevdorazreda nth-child. V tem primeru ima naš blok s člankom razred article.

Člen p:nth-child(2)(
Preoblikovanje besedila: velike črke
}

Kot lahko vidite, je za vsak konkreten primer drugačna rešitev. Najpomembnejša stvar je, da si zapomnite lastnost text-transform, ki spreminja velike in male črke.

Na splošno ni priporočljivo prikazati besedila na ta način, ker močno poslabša njegovo zaznavanje, vendar je mogoče poudariti nekatere posebej pomembne fragmente.

Danes smo si ogledali lastnost text-transform. Naročite se na blog, če želite prejemati nove članke.