Kapica (kapa ugrađena u tekst) je prvo slovo pasusa, veće od ostalih i postavljeno tako da je njegov vrh u nivou prvog reda pasusa. Na slici možete vidjeti primjer kapice ugrađene u tekst.

Usput, WordPress ima poseban dodatak (wordpress.org/extend/plugins/drop-caps) koji vam omogućava da automatski kreirate tekst koji je ugrađen (i pomaknut prema dolje) velika slova. Nevjerovatno! Međutim, šta ako ne želite da koristite dodatak (siguran sam da ne želite), a samo trebate kreirati kapu na više postova, a možda i na određenoj lokaciji?

Dobra vijest je da vam nije potreban dodatak za kreiranje velikih slova, sve što vam treba je malo css-a i span tag. Otvorite svoju css datoteku i dodajte sljedeći kod:

Span.dropcaps ( font-family:Georgia, serif; boja: #ccc; veličina fonta: 46px; float: lijevo; font-weight: 400; line-height: 1em; margin-bottom: -0.4em; margin-right : 0.09em; pozicija: relativna; )

Ovako nešto. Naravno, trebat će vam stil koji odgovara vašem dizajnu i tekstu. Na primjer, vrijednosti svojstva: font-size, margine i line-height morat će se odabrati na osnovu vašeg dizajna i teksta.

Tag Span

Da bi se stil primenio na veliko slovo teksta, potrebno je da veliko slovo „umotate“ u oznaku span i navedete odgovarajuću klasu.

A

Pseudo-element: prvo slovo

Također možete stilizirati prvi znak u tekstu koristeći pseudoelement: prvo slovo . Međutim, ograničen broj svojstava se može primijeniti na:first-letter pseudoelement: to su svojstva koja se odnose na font, boju, pozadinu, ivice, margine i padding. Još jedna stvar koju treba napomenuti je da pseudo-element:first-letter neće raditi u starijim pretraživačima.

P: prvo slovo ( font-family: Georgia, serif; boja: #ccc; veličina fonta: 46px; float: lijevo; font-weight: 400; visina reda: 1em; margin-bottom: -0,4em; margina -desno: 0,09em; pozicija: relativna; )

Evo nekoliko metoda za uređivanje velikih slova pomoću CSS-a.

Često, u žurbi prilikom dodavanja materijala na stranicu ili, na primjer, kreiranja nove teme na forumu, korisnik može početi pisati rečenicu (naslov) malim (malim) slovom. Ovo je donekle greška.

Pokazaću nekoliko opcija za rešavanje ovog problema: PHP i CSS su pogodniji za već objavljene materijale, kada jQuery može da ispravi situaciju pre objavljivanja.

Prvo slovo stringa velikim slovima u PHP-u

U PHP-u postoji funkcija koja se zove “ucfirst”, koja samo konvertuje prvi znak reda u velika slova, ali njen nedostatak je što ne radi sasvim ispravno sa ćirilicom.

Da bismo to učinili, napisat ćemo vlastitu malu funkciju. Implementacija bi izgledala ovako:

U ovoj verziji dobićemo rečenicu koja počinje velikim slovom, što nam je, zapravo, i potrebno.

Prvo veliko slovo niza u CSS-u

Ovaj metod vizuelno (to jest, predlozi će se pojaviti onakvi kakvi su u izvornom kodu sajta) takođe konvertuje prvi znak u velika slova.

Upotreba je sljedeća:

prva rečenica

druga rečenica

treća rečenica

četvrta rečenica

#content p:prvo slovo (transformacija teksta: velika slova;)

Koristeći pseudoelement “first-letter” i svojstvo “text-transform”, postavljamo dizajn za svako prvo slovo pasusa.

Prvo slovo stringa velikim slovima u jQueryju

Kao što sam ranije rekao, ova metoda konverzije je najprikladnija za materijale koji tek treba da budu objavljeni.

Na primjer, uzećemo tekstualno polje (poslužiće se kao polje za unos naslova) i za njega napisati malu skriptu koja, kada unesete rečenicu sa malim slovom, čini da ona bude velika:

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

Skripta radi i pri pisanju teksta i prilikom jednostavnog umetanja. Nemojte zaboraviti da bi skripte radile na vašoj web lokaciji, morate imati omogućenu jQuery biblioteku.

CSS kapice pomažu razbiti monotoniju generičkog dizajna gdje tekst izgleda isto od početka do kraja.

Početna slova nekad i sad

Hroničari su koristili velika slova u rukopisima, od kojih neki datiraju iz 5. stoljeća. Velika slova su nastavljena da se koriste od 8. do 15. veka, kada su štamparske mašine omogućile da se štampanje dovede na industrijski nivo. Na početku teksta stavljena su i rukopisna i štampana početna slova. Često su bile ukrašene ukrasnim uzorkom koji se nalazio oko slova.

I danas se koriste podignuta i ispuštena slova. Mogu se naći u novinama, časopisima i knjigama, kao iu digitalnoj štampi. Uzdignuti tip se ponekad naziva izduženim tipom. Postavljaju se u ravni sa dnom teksta koji ih prati. Ispuštena slova se postavljaju u ravni sa vrhom teksta, ponekad u sloju iza tela tekstualnog sadržaja, ili se ostatak teksta obavija oko njih.

Uzdignuta slova je mnogo lakše definirati jer su u ravnini s ostatkom teksta i obično nije potrebno mijenjati omotač oko vanjskih margina. Izostavljena slova zahtijevaju više finog podešavanja. To će vam biti lakše razumjeti ako prvo shvatite kako se rukuje podignutim znakovima.

Korištenje klasa

Dizajneri koji već razumiju CSS znaju da moraju kreirati posebnu CSS klasu za prvo veliko slovo.

CSS kod za element pasusa i klasu koja kreira slovo bi izgledala ovako:

p (font-size:20px; font-family: Georgia, "Times New Roman", Times, serif;).myinitialcaps (font-size:48px; font-family: Didot;)

A HTML kod će izgledati ovako:

Šta nam daje:

Čini se previše lako? Zapravo ćete morati da izvršite podešavanja u zavisnosti od specifičnih podignutih slova, pošto svako veliko slovo zahteva poseban kerning. Nakon što odaberete font za podignuta slova i za osnovni tekst, trebate kreirati zasebne klase za svako podignuto slovo. U CSS klasi ispod.myinitialcapsi, margina s desne strane je postavljena na negativnu vrijednost kako bi se smanjila udaljenost između I i n.

Myinitialcapsi (veličina fonta:48px; porodica fontova: Didot; margin-desno:-1px;)

U ovom slučaju postoji dodatni razmak između "I" i "n".

Uključivanje nove klase sa negativnom marginom povlači je bliže.

Ovisno o rezoluciji ekrana u gornjem primjeru, I i n mogu izgledati kao da su zamućeni zajedno. To je zbog serifa na krajevima slova. Dakle, prije nego što se odlučite za svoje konačne CSS stilove, testirajte svoju web stranicu na različitim uređajima da vidite kako CSS zatvara tekst na njima.

Citati i drugi posebni slučajevi

Možete povećati ne samo slova na početku teksta. Možete implementirati drugu klasu da kreirate veću verziju navodnika koji će se pojaviti pored slova. U našem slučaju, ni slovna klasa veličine 48 niti tekstualna klasa od 20 piksela nije pogodna za navodnike. Umjesto toga, to će biti nešto između - 30 piksela. Pomjerit ćemo navodnike za 4 piksela dolje da ih optički poravnamo sa I:

Myinitialcapsq (font-size:30px; font-family: Didot; float:left; margin-top:4px;)

“Uključivanje” nove klase sa negativnom marginom povlači je bliže.

Morate biti vrlo pažljivi u postavljanju velikih slova u CSS-u zajedno sa navodnicima tako da se njihov kerning i poravnanje podudaraju s okolnim oznakama. Na primjer, slovo T će se morati pomaknuti ulijevo, malo iza ivice pasusa, tako da se njegova poprečna linija vizualno uklapa u izgled. Moraćete da uradite isto sa okruglim slovima, kao što su C, G, O i Q. Ovaj primjer koristi veličine fontova od 20, 30 i 48. Ali morat ćete odabrati veličine na osnovu određenih fontova koje odaberete. Kao i veličine i rezolucije ekrana na kojima će se stranica gledati.

Pseudo-elementi i pseudo-klase

Koristeći CSS pseudoelement, možete lako kreirati podignuto slovo dodavanjem ::first-slova elementu pasusa. Koristite :prvo slovo (sa jednom dvotočkom) za stare pretraživače:

p ( veličina fonta: 1.2em; porodica fontova: Georgia, "Times New Roman", Times, serif; visina reda: 2em; padding-bottom: 1.2em;) p:: prvo slovo ( veličina fonta: 3.6em; transformacija teksta: velika slova; porodica fontova: "Monotype Bernard Condensed", serif; margin-right:0.03em;).initialb (margin-right:-0.1em;).initialn (margin-right:-0.15 em;)

HTML kod koji sadrži CSS klase koje uzimaju u obzir kerning slova N i B izgledao bi ovako...

Početno slovo, s tim da je prvo veliko slovo.
Sa prijelomom reda, sljedeći red nema početno ograničenje.

primetite u HTML izvoru kako prvo slovo, a ne veliko slovo u HTML-u, dobija veličinu na početnu veličinu kapice od 3.6em. Uredno, ha?

Ali sa teškim povratkom i novim paragrafom, uvijek se stvara još jedna početna granica. Možda se pitate, kako ću to objasniti? Trebam li imati početnu kapicu na početku vrlo novog pasusa? Pa, mogao bi. Ali, da li želite da izgleda tako, i da li apsolutno mora da izgleda tako?

Prvo veliko slovo pasusa se pretvara u slovo.
Prvo slovo nakon prijeloma reda neće biti pretvoreno u veliko.

o Imajte na umu da u izvornom HTML kodu prvo slovo nije veliko, već je konvertovano u znak od 3.6em.

Međutim, čak i nakon prisilnog prijeloma reda, slovo se uvijek kreira na početku svakog novog pasusa. Možda se pitate: Kako da ovo uzmem u obzir? Trebam li dodati slova za sve ove slučajeve? Pa, možeš. Ali da li je ovo neophodno?

Čak i sa prednostima koje pružaju pseudoelementi, morali smo da dodamo mnogo koda da bismo definisali zasebne klase za rešavanje problema sa kerningom i padingom. Ali ova metoda pretvara prvo slovo svakog novog pasusa u CSS veliko slovo. Za neke, možda nije prikladan jer ne treba transformirati prvo slovo svakog pasusa.

Kombinacija pseudo-klasa i pseudo-elemenata za stvaranje pametnog rasporeda

Dodavanje :first-child pseudo-klase pomaže u rješavanju problema nepotrebne konverzije prvih slova:

p (veličina fonta: 1,2em; porodica fontova: Georgia, "Times New Roman", Times, serif; visina reda:2em; padding-bottom:0,5em;) p:prvo dijete::prvo slovo ( veličina fonta: 3.6em; transformacija teksta: velika slova; porodica fontova: "Monotype Bernard Condensed", serif; margin-desno:0.03em;)

Kombinirajući ovaj kod sa HTML-om:

Prvo slovo koje je definirano kao prvo podređeno je jedino slovo koje se ovom metodom pretvara u podignutu kapicu.

Budući da se pretvara samo slovo definirano kao prvo dijete, imajte na umu da se ovaj primjer razlikuje od prethodnog, bez prvog djeteta. Osim toga, ne pretvaramo prva slova nakon početka pasusa i nakon prisilnog prijeloma reda. Ovo izgleda elegantnije nego kako je izgledao izgled kada smo konvertovali sva prva slova pasusa.

Prednost korištenja pseudo-klasa je mogućnost rukovanja raznim posebnim slučajevima. Šta je sa nedostacima? Postoji mnogo različitih pseudo-klasa, a mogu se kombinovati na toliko načina da vam se zavrti u glavi. Na primjer, pseudo-klase :first-child i :first-of-type mogu proizvesti iste rezultate. Takođe možete primijeniti pseudo-klasu ne samo na pasus, već i na ili elemente. Na primjer, kao što je prikazano u primjeru podignutog slova ispod u fontu Didot. Obratite pažnju na to kako je atribut margina dodan desno od A. U suprotnom bi se "zalijepilo" sa slovom s na početku odjeljka:

odjeljak (veličina fonta: 1,2em; porodica fontova: Georgia, "Times New Roman", Times, serif; visina reda:3em;) odjeljak>p:prvo dijete:prvo slovo (veličina fonta: 4em; transformacija teksta: velika slova; font-family: Didot, serif; margin-right: 5px;)

I zajedno sa HTML-om:

Na početku odeljka, za prvo slovo je navedena podignuta kapica.

I novi pasus...

Ako se osjećate eksperimentalno, možete istražiti različite metode pored :first-child i :first-of-type . Na primjer, kao što je :nth-of-type ili :nth-of-child da vidite kako se ove ili druge vrste pseudo-klasa mogu koristiti za CSS tekst velikih slova. Bilo da slijedite principe navedene u ovom članku ili počnete kopati dublje, kada naučite kako raditi sa CSS pseudo-klasama first-child , :first-of-type i :first-letter, moći ćete se prijaviti ih ispravno u HTML elemente.

U html-u veličina fonta igra važnu ulogu. Omogućava vam da skrenete pažnju korisnika na važne informacije objavljene na stranici stranice. Iako nije važna samo veličina slova, već i njihova boja, debljina, pa čak i porodica.

Oznake i atributi pri radu sa html fontovima

Jezik hiperteksta ima širok spektar alata za rad sa fontovima. Uostalom, formatiranje teksta je glavni zadatak html-a.

Razlog za stvaranje HTML jezika bio je problem prikazivanja pravila oblikovanja teksta u pretraživačima.

Pogledajmo oznake koje se koriste za rad sa fontovima u HTML-u i njihove atribute. Glavna je oznaka. Koristeći vrijednosti njegovih atributa, možete postaviti nekoliko karakteristika fonta:

• boja – postavlja boju teksta;
• veličina – veličina fonta u konvencionalnim jedinicama.

Podržane su pozitivne vrijednosti atributa od 1 do 7.

• lice – koristi se za postavljanje porodice fontova teksta koji će se koristiti unutar . Podržano je nekoliko vrijednosti, odvojenih zarezima.

Formatira se samo tekst koji se nalazi između dijelova uparene oznake fonta. Ostatak teksta se prikazuje u standardnom zadanom fontu.

Također u html-u postoji veliki broj uparenih oznaka koje specificiraju samo jedno pravilo formatiranja. To uključuje:

• — postavlja podebljani font u html-u. Oznaka akcije je slična prethodnoj;
• — veličina je veća od zadane;
• — manja veličina slova;
• — kurziv tekst (kurziv). Slična oznaka ;
• — tekst sa podvlačenjem;
• - precrtano;
• — prikaz teksta samo malim slovima;
• - velikim slovima.

Običan tekst

Thumbnail

Thumbnail

Više nego inače

Manje nego inače

Kurziv

Kurziv

Sa donjom crtom

Precrtano

Mogućnosti stilskih atributa

Osim opisanih oznaka, postoji još nekoliko načina za promjenu fonta u html-u. Jedan od njih je korištenje atributa generičkog stila. Koristeći vrijednosti njegovih svojstava, možete postaviti stil prikaza fontova:

1) font-family – svojstvo postavlja porodicu fontova. Moguće je navesti više vrijednosti.
Promjena fonta u html-u na sljedeću vrijednost će se dogoditi ako prethodna porodica nije instalirana na operativnom sistemu korisnika.

Sintaksa pisanja:

font-family: font-name [, font-name[, ...]]

2) font-size – veličina je postavljena od 1 do 7. Ovo je jedan od glavnih načina na koji možete povećati font u HTML-u.
Sintaksa pisanja:

font-size: apsolutna veličina | relativna veličina | značenje | interes | nasljediti

Također možete postaviti veličinu fonta:

• U pikselima;
• U apsolutnoj vrijednosti (xx-mali, x-mali, mali, srednji, veliki);
• U procentima;
• U bodovima (pt).

Veličina fonta:7

Veličina fonta: 24px

Veličina fonta: x-large

Veličina fonta: 200%

Veličina fonta: 24pt

3) font-style – postavlja stil pisanja fonta. sintaksa:

stil fonta: normalan | kurziv | koso | nasljediti

vrijednosti:

• normalan – normalan pravopis;
• kurziv – kurziv;
• koso – font nagnut udesno;
• naslijediti – nasljeđuje pravopis nadređenog elementa.

Primjer kako promijeniti font u html-u koristeći ovo svojstvo:

font-style:inherit

font-style:italic

font-style:normal

font-style: oblique

4) font-varijanta – pretvara sva velika slova u velika slova. sintaksa:

font-varijanta: normalna | mala slova | nasljediti

Primjer kako promijeniti font u html-u sa ovim svojstvom:

font-variant:inherit

font-variant:normal

font-variant:small-caps

5) font-weight – omogućava vam da podesite debljinu teksta (zasićenost). sintaksa:

font-weight: bold|bolder|lighter|normal|100|200|300|400|500|600|700|800|900

vrijednosti:

• bold – postavlja html font na bold;
• podebljano – podebljanije u odnosu na normalno;
• lakši – manje zasićen u odnosu na normalan;
• normalan – normalan pravopis;
• 100-900 – postavlja debljinu fonta u numeričkom ekvivalentu.

font-weight:bold

font-weight:bolder

font-weight:lighter

font-weight:normal

font-weight:900

font-weight:100

Svojstvo HTML fonta i boja fonta

Font je još jedno svojstvo kontejnera. U sebi je kombinirao vrijednosti nekoliko svojstava namijenjenih za promjenu fontova. sintaksa fonta:

font: font-size font-family | nasljediti

Vrijednost se također može postaviti na fontove koje sistem koristi u oznakama na raznim kontrolama:

• natpis – za dugmad;
• ikona – za ikone;
• meni - meni;
• message-box – za dijaloške okvire;
• small-caption – za male kontrole;
• status-bar – font statusne trake.

font:icon

font:caption

font:meni

font:message-box

mali natpis

font: statusna traka

font:italic 50px bold "Times New Roman", Times, serif

Da biste postavili boju fonta u HTML-u, možete koristiti svojstvo boje. Omogućava vam da postavite boju, bilo pomoću ključne riječi ili u rgb formatu. I takođe u heksadecimalnom kodu.

Pozdrav čitateljima ovog bloga. Danas ću govoriti o tome kako možete napraviti sva velika slova koristeći CSS. Naravno, da biste to učinili, možete uključiti Caps Lock i napisati željeni tekst, ali ovo je prilično primitivna metoda. Ali što ako trebate istaknuti poseban pasus u gotovom članku?

Pravljenje velikih slova u css-u

Za ovo postoji svojstvo transformacije teksta, koje, kao što ste možda pretpostavili, transformiše tekst. Ima sljedeće vrijednosti:

• mala slova – sav tekst se prikazuje malim slovima
• velika slova – sve riječi se prikazuju velikim slovima (šta nam treba)
• veliko – prvo slovo svake riječi je veliko

To je u suštini sve što treba da znate. Ostaje samo shvatiti kako pristupiti željenom elementu. Zamislimo ovaj primjer: potrebno je da peti pasus u članku bude samo velikim slovima. I kako se to može implementirati?

Kako doći do željenog elementa?

Kao što znate, paragraf se kreira pomoću uparene html oznake, čiji cijeli sadržaj postaje pasus. Sve što ostaje je definirati novu klasu stila za to:

Sada imamo priliku da pristupimo ovom specifičnom paragrafu preko CSS jezika bez uticaja na ostalo. Možete to učiniti ovako:

Veliko slovo(
Transformacija teksta: velika slova;
}

Ova metoda je prikladna kada trebate istaknuti fragment u određenom članku. Šta ako sve stranice moraju imati određeni tekst velikim slovima. U ovom slučaju, bolje je postaviti blok u datoteku predloška kako ga ne bi pisali svaki put.

Ili možda trebate istaknuti drugi pasus u svakom članku koristeći CSS velikim slovima. Tada će vam odgovarati druga opcija. Pronađite blok u kojem se pojavljuje članak i pristupite drugom pasusu koristeći pseudoklasu nth-child. U ovom primjeru, naš blok sa člankom ima klasu članak.

Članak p:nth-child(2)(
Transformacija teksta: velika slova
}

Kao što vidite, za svaki konkretan slučaj postoji različito rješenje. Najvažnije je zapamtiti svojstvo text-transform, koje mijenja veličinu slova.

Općenito, nije preporučljivo prikazivati ​​tekst na ovaj način, jer to uvelike otežava njegovu percepciju, ali se mogu istaknuti neki posebno važni fragmenti.

Danas smo pogledali svojstvo text-transform. Pretplatite se na blog kako biste primali nove članke.