Kapica (v besedilo vdelana kapica) je prva črka odstavka, večja od ostalih in postavljena tako, da je njen vrh v višini prve vrstice odstavka. Na sliki lahko vidite primer kapice, vdelane v besedilo.

Mimogrede, WordPress ima poseben vtičnik (wordpress.org/extend/plugins/drop-caps), ki vam omogoča samodejno ustvarjanje vdelanega (in pomaknjenega navzdol) besedila. Velike črke. Neverjetno! Kaj pa, če ne želite uporabljati vtičnika (prepričan sem, da ga ne) in morate samo ustvariti kapo za več objav in morda na določeni lokaciji?

Dobra novica je, da za ustvarjanje velikih črk ne potrebujete vtičnika, potrebujete le malo css in oznako span. Odprite datoteko css in dodajte naslednjo kodo:

Span.dropcaps (družina pisav:Georgia, serif; barva: #ccc; velikost pisave: 46px; lebdeč: levo; teža pisave: 400; višina vrstice: 1em; rob-spodnji: -0,4em; rob-desno : 0,09 em; položaj: relativno; )

Nekaj ​​podobnega. Seveda boste potrebovali slog, ki se ujema z vašim dizajnom in besedilom. Na primer, vrednosti lastnosti: velikost pisave, robovi in ​​višina vrstice bodo morale biti izbrane glede na vaš dizajn in besedilo.

Tag Span

Če želite, da se slog uporabi za veliko začetnico besedila, morate veliko začetnico »zaviti« v oznako span in določiti ustrezen razred.

A

Psevdoelement: prva črka

Prvi znak v besedilu lahko oblikujete tudi s psevdoelementom: first-letter. Vendar pa je za psevdoelement:first-letter mogoče uporabiti omejeno število lastnosti: to so lastnosti, povezane s pisavo, barvo, ozadjem, obrobami, robovi in ​​oblazinjenjem. Upoštevati je treba še to, da psevdoelement:prva črka ne bo deloval v starejših brskalnikih.

P:prva črka (družina pisave:Georgia, serif; barva: #ccc; velikost pisave: 46px; lebdeč: levo; teža pisave: 400; višina vrstice: 1em; rob-dno: -0,4em; rob -desno: 0,09 em; položaj: relativno; )

Tukaj je pravzaprav nekaj metod za urejanje velikih črk s pomočjo CSS.

Pogosto lahko uporabnik v naglici, ko dodaja gradivo na spletno mesto ali na primer ustvarja novo temo na forumu, začne pisati stavek (naslov) z malo (malo) črko. To je do neke mere napaka.

Pokazal bom več možnosti za rešitev te težave: PHP in CSS sta bolj primerna za že objavljene materiale, ko lahko jQuery popravi situacijo pred objavo.

Prva črka niza z velikimi črkami v PHP

V PHP obstaja funkcija, imenovana “ucfirst”, ki samo pretvori prvi znak vrstice v velike črke, vendar je njena slabost ta, da ne deluje povsem pravilno s cirilico.

Da bi to naredili, bomo napisali svojo majhno funkcijo. Izvedba bi izgledala takole:

V tej različici bomo prejeli stavek, ki se začne z veliko začetnico, kar pravzaprav potrebujemo.

Velika prva črka niza v CSS

Ta metoda vizualno (to pomeni, da bodo predlogi prikazani, kot so v izvorni kodi spletnega mesta) prav tako pretvori prvi znak v veliko črko.

Uporaba je naslednja:

prvi stavek

drugi stavek

tretji stavek

četrti stavek

#vsebina p:prva-črka (transformacija besedila: velika črka;)

Z uporabo psevdoelementa "prva črka" in lastnosti "transformacija besedila" nastavimo zasnovo za vsako prvo črko odstavka.

Prva črka niza z velikimi črkami v jQuery

Kot sem že rekel, je ta metoda pretvorbe najprimernejša za materiale, ki bodo še objavljeni.

Na primer, vzeli bomo besedilno polje (delovalo bo kot polje za vnos naslova) in zanj napisali majhno skripto, ki pri vnosu stavka z malo začetnico naredi veliko:

$(document).ready(function() ( $(".content").on("keyup", function() ( var text = $(this).val(); var new_text = text.charAt(0) .toUpperCase() + text.substr(1); $(to).val(novo_besedilo); )); ));

Skript deluje tako pri pisanju besedila kot pri njegovem preprostem vstavljanju. Ne pozabite, da morate imeti omogočeno knjižnico jQuery, da skripti delujejo na vašem spletnem mestu.

Kape CSS pomagajo razbiti monotonost splošnega dizajna, kjer je besedilo videti enako od začetka do konca.

Začetnice nekoč in danes

Kronisti so uporabljali velike tiskane črke v rokopisih, nekateri od njih segajo v 5. stoletje. Velike tiskane črke so se še naprej uporabljale od 8. do 15. stoletja, ko so tiskarski stroji omogočili dvig tiskanja na industrijsko raven. Na začetku besedila so bile postavljene tako rokopisne kot tiskane začetnice. Pogosto so bili okrašeni z okrasnim vzorcem, ki se je nahajal okoli črke.

Dvignjene in spuščene črke se uporabljajo še danes. Najdemo jih v časopisih, revijah in knjigah ter v digitalnem tisku. Dvignjeni tip se včasih imenuje tudi podolgovat tip. Postavljeni so poravnano z dnom besedila, ki jim sledi. Izpuščene črke so postavljene poravnano z vrhom besedila, včasih v sloju za osrednjim delom besedilne vsebine, ali pa se preostalo besedilo ovije okoli njih.

Izbočene črke je veliko lažje definirati, ker so poravnane s preostalim besedilom in običajno ni treba spreminjati ovijanja okoli zunanjih robov. Izpuščene črke zahtevajo več finih nastavitev. To boste lažje razumeli, če boste najprej razumeli, kako se ravna z dvignjenimi znaki.

Uporaba razredov

Oblikovalci, ki že razumejo CSS, vedo, da morajo ustvariti ločen razred CSS za prvo veliko začetnico.

Koda CSS za element odstavka in razred, ki ustvari črko, bi izgledala takole:

p (velikost-pisave:20px; družina pisav: Georgia, "Times New Roman", Times, serif;).myiniitialcaps (velikost-pisave:48px; družina pisav: Didot;)

In koda HTML bo videti takole:

Kaj nam daje:

Zdi se prelahko? Pravzaprav boste morali narediti prilagoditve glede na določene dvignjene črke, saj vsaka velika črka zahteva posebno jedro. Ko izberete pisavo za dvignjene črke in za telo besedila, morate ustvariti ločene razrede za vsako dvignjeno črko. V razredu CSS spodaj.myinitialcapsi je rob na desni nastavljen na negativno vrednost, da se zmanjša razdalja med I in n.

Myiniitialcapsi (velikost-pisave:48px; družina-pisav: Didot; margin-right:-1px;)

V tem primeru je nekaj dodatnega prostora med "I" in "n."

Vključitev novega razreda z negativno maržo ga potegne bližje.

Odvisno od ločljivosti zaslona v zgornjem primeru sta I in n morda videti, kot da sta skupaj zamegljena. To je posledica serifov na koncih črk. Preden se torej odločite za končne sloge CSS, preizkusite svoje spletno mesto na različnih napravah, da vidite, kako na njih izgleda besedilo z velikimi črkami CSS.

Citati in drugi posebni primeri

Povečate lahko ne le črke na začetku besedila. Lahko implementirate drug razred, da ustvarite večjo različico narekovajev, ki bodo prikazani poleg črke. V našem primeru za narekovaje nista primerna niti črkovni razred velikosti 48 niti besedilni razred 20 slikovnih pik. Namesto tega bo nekaj vmes - 30 slikovnih pik. Narekovaje bomo premaknili navzdol za 4 slikovne pike, da jih optično poravnamo z I:

Myinitialcapsq (velikost-pisave:30px; družina pisav: Didot; float:left; margin-top:4px;)

»Vključitev« novega razreda z negativno maržo ga potegne bližje.

Pri nastavitvi velikih začetnic CSS skupaj z narekovaji morate biti zelo previdni, tako da se njihovo zarezovanje in poravnava ujemata z okoliškimi oznakami. Na primer, črko T bo treba premakniti v levo, nekoliko čez rob odstavka, tako da se njena prečna črta vizualno prilega postavitvi. Enako boste morali storiti z okroglimi črkami, kot so C, G, O in Q. V tem primeru so uporabljene velikosti pisav 20, 30 in 48. Vendar boste morali izbrati velikosti glede na določene pisave, ki jih izberete. Kot tudi velikosti in ločljivosti zaslonov, na katerih se bo stran ogledovala.

Psevdoelementi in psevdorazredi

Z uporabo psevdoelementa CSS lahko enostavno ustvarite dvignjeno črko tako, da elementu odstavka dodate ::first-letter. Uporabite :first-letter (z enim dvopičjem) za starejše brskalnike:

p (velikost pisave: 1,2 em; družina pisav: Georgia, "Times New Roman", Times, serif; višina vrstice: 2 em; oblazinjenje dna: 1,2 em;) p:: prva črka ( velikost pisave: 3,6em; pretvorba besedila: velike črke; družina pisav: "Monotype Bernard Condensed", serif; rob-desno:0,03em;).initialb (rob-desno:-0,1em;).initialn (rob-desno:-0,15 em;)

Koda HTML, ki vsebuje razrede CSS, ki upoštevajo kerning črk N in B, bi izgledala takole...

Začetnica, pri čemer je prva črka velika.
Pri prelomu vrstice naslednja vrstica nima začetne kapice.

opazite v viru HTML, kako se prva črka, ne velika črka v HTML, spremeni v velikost začetne velike črke 3,6 em. Lepo, kaj?

Toda s trdim vračanjem in začetkom novega odstavka se vedno ustvari še ena začetna zgornja meja. Morda se sprašujete, kako bom to pojasnil? Ali naj imam začetnico na začetku zelo novega odstavka? No, lahko bi. Ampak, ali želite, da je videti tako, in ali nujno mora tako izgledati?

Prva velika začetnica odstavka se pretvori v črko.
Prva črka po prelomu vrstice ne bo pretvorjena v veliko.

oUpoštevajte, da v izvorni kodi HTML prva črka ni velika, ampak je pretvorjena v znak 3.6em.

Toda tudi po prisilnem prelomu vrstice se na začetku vsakega novega odstavka vedno ustvari črka. Morda se sprašujete: Kako naj to upoštevam? Ali moram dodati črke za vse te primere? No, lahko. Toda ali je to potrebno?

Kljub prednostim, ki jih ponujajo psevdoelementi, smo morali dodati veliko kode za definiranje ločenih razredov za obravnavo težav z zarezovanjem in oblazinjenjem. Toda ta metoda pretvori prvo črko vsakega novega odstavka v veliko začetnico CSS. Za nekatere morda ni primeren, ker ni treba preoblikovati prve črke vsakega odstavka.

Združevanje psevdorazredov in psevdoelementov za ustvarjanje pametne postavitve

Dodajanje psevdorazreda :first-child pomaga rešiti problem nepotrebne pretvorbe prvih črk:

p (velikost pisave: 1,2 em; družina pisav: Georgia, "Times New Roman", Times, serif; višina vrstice: 2 em; oblazinjenje dna: 0,5 em;) p: prvi otrok:: prva črka ( velikost pisave: 3,6 em; pretvorba besedila: velike črke; družina pisav: "Monotype Bernard Condensed", serif; desni rob: 0,03 em;)

Kombinacija te kode s HTML:

Prva črka, ki je definirana kot prva podrejena, je edina črka, ki se s to metodo pretvori v dvignjeno kapico.

Ker je pretvorjena samo črka, definirana kot prvi podrejeni, upoštevajte, da se ta primer razlikuje od prejšnjega, brez prvega podrejenega. Poleg tega ne pretvarjamo prvih črk po začetku odstavka in po prisilnem prelomu vrstice. To je videti bolj elegantno kot postavitev, ko smo pretvorili vse prve črke odstavkov.

Prednost uporabe psevdorazredov je zmožnost obravnavanja različnih posebnih primerov. Kaj pa slabosti? Obstaja veliko različnih psevdorazredov in jih je mogoče kombinirati na toliko načinov, da se vam kar zvrti v glavi. Na primer, psevdorazreda :first-child in :first-of-type lahko ustvarita enake rezultate. Psevdorazred lahko uporabite tudi ne samo za odstavek, ampak tudi za ali elemente. Na primer, kot je prikazano v spodnjem primeru dvignjenih črk v pisavi Didot. Opazite, kako je bil atribut roba dodan desno od A. V nasprotnem primeru bi se "zlepil" s črko s na začetku razdelka:

razdelek (velikost pisave: 1,2em; družina pisav: Georgia, "Times New Roman", Times, serif; višina vrstice:3em;) razdelek>p:prvi-podrejeni:prva-črka (velikost pisave: 4em; pretvorba besedila: velike črke; družina pisav: Didot, serif; margin-right: 5px;)

In skupaj s HTML:

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.

V html-u igra velikost pisave pomembno vlogo. Omogoča vam, da pritegnete pozornost uporabnika na pomembne informacije, objavljene na strani spletnega mesta. Čeprav ni pomembna samo velikost črk, ampak tudi njihova barva, debelina in celo družina.

Oznake in atributi pri delu s pisavami html

Jezik hiperteksta ima širok nabor orodij za delo s pisavami. Navsezadnje je oblikovanje besedila glavna naloga html-ja.

Razlog za nastanek jezika HTML je bil problem prikaza pravil oblikovanja besedila v brskalnikih.

Oglejmo si oznake, ki se uporabljajo za delo s pisavami v HTML, in njihove atribute. Glavna je oznaka. Z vrednostmi njegovih atributov lahko nastavite več značilnosti pisave:

• barva – nastavi barvo besedila;
• velikost – velikost pisave v običajnih enotah.

Podprte so pozitivne vrednosti atributov od 1 do 7.

• obraz – uporablja se za nastavitev družine pisav besedila, ki bo uporabljena v . Podprtih je več vrednosti, ločenih z vejicami.

Oblikovano je samo besedilo, ki se nahaja med deli seznanjene oznake pisave. Preostalo besedilo je prikazano v standardni privzeti pisavi.

Tudi v html obstaja več seznanjenih oznak, ki določajo samo eno pravilo oblikovanja. Tej vključujejo:

• — nastavi krepko pisavo v html. Oznaka dejanja je podobna prejšnji;
• — velikost je večja od privzete;
• — manjša velikost pisave;
• — poševno besedilo (kurziv). Podobna oznaka ;
• — besedilo s podčrtajem;
• - prečrtano;
• — prikaz besedila samo z malimi črkami;
• - z velikimi črkami.

Golo besedilo

Sličica

Sličica

Več kot običajno

Manj kot običajno

Poševno

Poševno

S podčrtajem

Prečrtano

Zmogljivosti atributov sloga

Poleg opisanih oznak obstaja še več načinov za spreminjanje pisave v html. Eden od njih je uporaba generičnega atributa sloga. Z vrednostmi njegovih lastnosti lahko nastavite slog prikaza pisav:

1) družina pisav – lastnost nastavi družino pisav. Možno je navesti več vrednosti.
Spreminjanje pisave v html na naslednjo vrednost se bo zgodilo, če prejšnja družina ni nameščena v uporabnikovem operacijskem sistemu.

Sintaksa pisanja:

družina-pisav: ime-pisave [, ime-pisave[, ...]]

2) velikost pisave – velikost je nastavljena od 1 do 7. To je eden od glavnih načinov, kako lahko povečate pisavo v HTML.
Sintaksa pisanja:

velikost-pisave: absolutna velikost | relativna velikost | pomen | obresti | dedovati

Nastavite lahko tudi velikost pisave:

• V slikovnih pikah;
• V absolutni vrednosti (xx-majhen, x-majhen, majhen, srednji, velik);
• V odstotkih;
• V točkah (pt).

Velikost pisave: 7

Velikost pisave: 24px

Velikost pisave: x-velika

Velikost pisave: 200 %

Velikost pisave: 24pt

3) font-style – nastavi slog pisave pisave. Sintaksa:

slog pisave: normalno | poševno | poševno | dedovati

Vrednote:

• normalno – normalno črkovanje;
• poševno – poševno;
• poševno – pisava nagnjena v desno;
• podeduje – podeduje črkovanje nadrejenega elementa.

Primer, kako spremeniti pisavo v html s to lastnostjo:

font-style:podeduj

slog pisave: poševno

slog pisave: normalen

slog pisave: poševno

4) font-variant – pretvori vse velike črke v velike črke. Sintaksa:

različica pisave: normalno | majhne velike črke | dedovati

Primer, kako spremeniti pisavo v html s to lastnostjo:

font-variant:inherit

font-variant:normal

font-variant:majhne velike črke

5) teža pisave – omogoča nastavitev debeline besedila (nasičenosti). Sintaksa:

teža-pisave: krepko|krepkejše|svetlejše|normalno|100|200|300|400|500|600|700|800|900

Vrednote:

• krepko – nastavi pisavo html na krepko;
• drznejši – drznejši glede na normalno;
• svetlejši – manj nasičen glede na normalno;
• normalno – normalno črkovanje;
• 100-900 – nastavi debelino pisave v numeričnem ekvivalentu.

teža pisave: krepko

teža pisave: krepko

teža pisave: svetlejša

teža-pisave:normalna

teža pisave: 900

teža pisave: 100

Lastnost pisave HTML in barva pisave

Pisava je še ena lastnost vsebnika. V sebi je združil vrednosti več lastnosti, namenjenih spreminjanju pisav. sintaksa pisave:

pisava: velikost pisave družina pisav | dedovati

Vrednost lahko nastavite tudi na pisave, ki jih sistem uporablja v oznakah na različnih kontrolnikih:

• napis – za gumbe;
• ikona – za ikone;
• menu - meni;
• message-box – za pogovorna okna;
• majhen napis – za majhne kontrole;
• statusna vrstica – pisava statusne vrstice.

pisava: ikona

pisava: napis

pisava: meni

pisava:message-box

majhen napis

pisava: vrstica stanja

pisava:ležeče 50px krepko "Times New Roman", Times, serif

Če želite nastaviti barvo pisave v HTML, lahko uporabite lastnost barve. Omogoča vam nastavitev barve bodisi z uporabo ključne besede bodisi v formatu rgb. In tudi v šestnajstiški kodi.

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.