Kapica (kapnica ugrađena u tekst) je prvo slovo odlomka, veće od ostalih, a postavljeno tako da mu je vrh u razini prvog retka odlomka. Na slici možete vidjeti primjer kape umetnute u tekst.

Usput, WordPress ima poseban dodatak (wordpress.org/extend/plugins/drop-caps) koji vam omogućuje da automatski stvorite tekst ugrađen (i pomaknut prema dolje) velika slova. nevjerojatno! Međutim, što ako ne želite koristiti dodatak (siguran sam da ne želite), a trebate samo stvoriti drop cap na više postova, a možda i na određenom mjestu?

Dobra vijest je da vam ne treba dodatak za stvaranje velikih slova, sve što trebate je mali css 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; težina fonta: 400; visina retka: 1em; margin-bottom: -0.4em; margin-desno : 0,09 em; položaj: relativan; )

Nešto kao ovo. Naravno, trebat će vam stil koji odgovara vašem dizajnu i tekstu. Na primjer, vrijednosti svojstava: veličina fonta, margine i visina linije morat će se odabrati na temelju vašeg dizajna i teksta.

Raspon oznaka

Kako bi se stil primijenio na veliko slovo teksta potrebno je veliko slovo “zamotati” u span tag i odrediti odgovarajuću klasu.

A

Pseudo-element: prvo slovo

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

P:prvo-slovo (familija-fontova:Georgia, serif; boja: #ccc; veličina-font-a: 46px; float: lijevo; težina-font-a: 400; visina retka: 1em; margin-bottom: -0.4em; margina -desno: 0,09em; položaj: relativno; )

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

Često, u žurbi prilikom dodavanja materijala na web mjesto ili, na primjer, kreiranja nove teme na forumu, korisnik može početi pisati rečenicu (naslov) malim (malim) slovom. To je u određenoj mjeri pogreška.

Pokazat ću nekoliko opcija za rješavanje ovog problema: PHP i CSS su prikladniji za već objavljene materijale, kada jQuery može ispraviti situaciju prije objave.

Prvo slovo niza velikim slovima u PHP-u

U PHP-u postoji funkcija koja se zove “ucfirst”, koja samo pretvara prvi znak retka u veliko slovo, 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 dobit ćemo rečenicu koja počinje velikim slovom, što nam zapravo i treba.

Veliko prvo slovo niza u CSS-u

Ova metoda vizualno (to jest, prijedlozi će se pojaviti onakvi kakvi jesu u izvornom kodu stranice) također pretvara prvi znak u veliko slovo.

Upotreba je sljedeća:

prva rečenica

druga rečenica

treća rečenica

četvrta rečenica

#sadržaj p:prvo-slovo (transformacija teksta: velika slova;)

Koristeći pseudoelement "prvo slovo" i svojstvo "transformacija teksta", postavili smo dizajn za svako prvo slovo odlomka.

Prvo slovo niza velikim slovima u jQueryju

Kao što sam ranije rekao, ova metoda pretvorbe je najprikladnija za materijale koji tek trebaju biti objavljeni.

Na primjer, uzet ćemo tekstualno polje (ono će služiti kao polje za unos naslova) i napisati malu skriptu za njega, koja, kada upisuje rečenicu s malim slovom, čini da je piše velikim:

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

Skripta radi i kada pišete tekst i kada ga jednostavno ubacujete. Ne zaboravite da za rad skripti na vašoj stranici morate imati omogućenu jQuery biblioteku.

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

Početna slova nekad i sad

Kroničari su koristili velika slova u rukom pisanim rukopisima, od kojih neki datiraju iz 5. stoljeća. Velika slova nastavila su se koristiti od 8. do 15. stoljeća, kada su tiskarski strojevi omogućili da se tiskanje dovede na industrijsku razinu. Na početku teksta stavljena su i rukopisna i tiskana početna slova. Često su bile ukrašene ukrasnim uzorkom koji se nalazio oko slova.

Uzdignuta i spuštena slova koriste se i danas. Mogu se naći u novinama, časopisima i knjigama, kao iu digitalnom tisku. Uzdignuti tip se ponekad naziva i izduženi tip. Postavljeni su u ravnini s dnom teksta koji ih slijedi. Ispuštena slova postavljaju se u ravnini s vrhom teksta, ponekad u sloju iza tijela sadržaja teksta ili se ostatak teksta obavija oko njih.

Izdignuta slova puno je lakše definirati jer su u ravnini s ostatkom teksta i obično ne moraju mijenjati omotač oko vanjskih margina. Izostavljena slova zahtijevaju dodatno fino podešavanje. Bit će vam lakše razumjeti ovo ako prvo shvatite kako se rukuje podignutim likovima.

Korištenje klasa

Dizajneri koji već razumiju CSS znaju da moraju stvoriti zasebnu CSS klasu za prvo veliko slovo.

CSS kod za element paragrafa i klasu koja stvara slovo bi izgledao ovako:

p (veličina-fonta:20px; obitelj-fonta: Georgia, "Times New Roman", Times, serif;).myiniitialcaps (veličina-fonta:48px; obitelj-fonta: Didot;)

A HTML kod će izgledati ovako:

Što nam daje:

Čini se previše lako? Zapravo ćete morati izvršiti prilagodbe ovisno o određenim podignutim slovima, budući da svako veliko slovo zahtijeva poseban kerning. Nakon što ste odabrali font za ispupčena slova i za tijelo teksta, morate stvoriti zasebne klase za svako izbočeno slovo. U CSS klasi ispod.myinitialcapsi, margina s desne strane postavljena je na negativnu vrijednost kako bi se smanjila udaljenost između I i n.

Myiniitialcapsi (veličina-font-size:48px; font-family: Didot; margin-right:-1px;)

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

Uključivanje nove klase s negativnom marginom približava je.

Ovisno o razlučivosti zaslona u gornjem primjeru, I i n mogu izgledati kao da su zajedno zamućeni. To je zbog serifa na krajevima slova. Dakle, prije nego što se odlučite za svoje konačne CSS stilove, testirajte svoje web mjesto na različitim uređajima da biste vidjeli kako CSS tekst s velikim slovima izgleda na njima.

Citati i drugi posebni slučajevi

Možete povećati ne samo slova na početku teksta. Možete implementirati drugu klasu za stvaranje veće verzije navodnika koji će se pojaviti pored slova. U našem slučaju, ni klasa slova veličine 48 ni klasa teksta veličine 20 piksela nisu prikladne za navodnike. Prije će biti nešto između - 30 piksela. Pomaknut ćemo navodnike 4 piksela prema dolje kako bismo ih optički poravnali s I:

Myinitialcapsq (veličina-fonta:30px; obitelj-fontova: Didot; float:lijevo; margin-top:4px;)

"Uključivanje" nove klase s negativnom marginom približava je.

Morate biti vrlo pažljivi pri postavljanju velikih slova u CSS-u zajedno s navodnicima tako da njihov kerning i poravnanje odgovaraju okolnom označavanju. Na primjer, slovo T morat će se pomaknuti ulijevo, malo iza ruba odlomka, tako da se njegova poprečna linija vizualno uklapa u izgled. Morat ćete učiniti isto s okruglim slovima, kao što su C, G, O i Q. Ovaj primjer koristi veličine fonta 20, 30 i 48. No morat ćete odabrati veličine na temelju određenih fontova koje odaberete. Kao i veličine i razlučivosti ekrana na kojima će se stranica pregledavati.

Pseudoelementi i pseudoklase

Koristeći CSS pseudoelement, možete jednostavno stvoriti izdignuto slovo dodavanjem ::first-letter elementu odlomka. Koristite :first-letter (s jednom dvotočkom) za naslijeđene preglednike:

p (veličina-fonta: 1.2em; porodica-fontova: Georgia, "Times New Roman", Times, serif; line-height:2em;padding-bottom:1.2em;) p::prvo-slovo (veličina-fonta: 3,6em; pretvorba teksta: velika slova; obitelj-fontova: "Monotype Bernard Condensed", serif; margin-desno:0,03em;).initialb (margin-desno:-0,1em;).initialn (margin-desno:-0,15 em;)

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

Početno slovo, pri čemu je prvo slovo veliko slovo.
Uz prijelom retka, sljedeći redak nema početnu kapu.

primijetite u HTML izvoru kako se prvo slovo, a ne veliko slovo u HTML-u, povećava na početnu veličinu od 3,6 em. Fino, ha?

Ali s teškim povratkom i započetim novim odlomkom, uvijek se stvori još jedno početno ograničenje. Možda se pitate: Kako ću to objasniti? Trebam li imati početnu kapu na početku vrlo novog odlomka? Pa, mogli biste. No, želite li da tako izgleda i mora li to tako izgledati?

Prvo veliko slovo odlomka pretvara se u slovo.
Prvo slovo nakon prijeloma retka neće se pretvoriti u veliko.

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

Međutim, čak i nakon prisilnog prijeloma retka, slovo se uvijek stvara na početku svakog novog odlomka. Možda se pitate: Kako to uzeti u obzir? Trebam li dodati slova za sve ove slučajeve? Pa, možete. Ali je li ovo potrebno?

Čak i uz prednosti koje pružaju pseudoelementi, morali smo dodati mnogo koda za definiranje zasebnih klasa za rješavanje problema kerninga i ispune. Ali ova metoda pretvara prvo slovo svakog novog odlomka u CSS veliko slovo. Nekima možda neće odgovarati jer ne treba transformirati prvo slovo svakog odlomka.

Kombiniranje pseudo-klasa i pseudo-elemenata za stvaranje pametnog izgleda

Dodavanje pseudoklase :first-child pomaže riješiti problem nepotrebne konverzije prvih slova:

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

Kombiniranje ovog koda s HTML-om:

Prvo slovo koje je definirano kao prvo dijete jedino je slovo koje se ovom metodom pretvara u podignutu kapu.

Budući da se konvertira 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 odlomka i nakon prisilnog prekida retka. Ovo izgleda elegantnije nego kako je izgled izgledao kada smo pretvorili sva prva slova odlomaka.

Prednost korištenja pseudo-klasa je mogućnost obrade raznih posebnih slučajeva. Što je s nedostacima? Postoji mnogo različitih pseudo-klasa, a mogu se kombinirati na toliko načina da vam se može zavrtjeti u glavi. Na primjer, pseudo-klase :first-child i :first-of-type mogu dati iste rezultate. Također možete primijeniti pseudo-klasu ne samo na odlomak, već i na ili elemente. Na primjer, kao što je prikazano u primjeru uzdignutih slova ispod u fontu Didot. Primijetite kako je atribut margine dodan desno od A. Inače bi se "slijepilo" sa slovom s na početku odjeljka:

odjeljak (veličina-fonta: 1.2em; obitelj-fonta: Georgia, "Times New Roman", Times, serif; line-height:3em;) odjeljak>p:prvo-dijete:prvo-slovo (veličina-fonta: 4em; text-transform: velika slova; obitelj-fontova: Didot, serif; margin-desno: 5px;)

I zajedno s HTML-om:

Na početku odjeljka za prvo slovo navedena je uzdignuta kapa.

I novi pasus...

Ako se osjećate eksperimentalno, možete istražiti različite metode uz :first-child i :first-of-type. Na primjer, kao što je :nth-of-type ili :nth-of-child da biste vidjeli kako se ove ili druge vrste pseudoklasa mogu koristiti za CSS tekst velikih slova. Bilo da slijedite načela navedena u ovom članku ili počnete kopati dublje, nakon što naučite kako raditi s CSS pseudo-klasama first-child, :first-of-type i :first-letter, moći ćete se prijaviti ispravno u HTML elemente.

U html-u veličina fonta igra važnu ulogu. Omogućuje vam da privučete pozornost korisnika na važne informacije objavljene na stranici web mjesta. Iako nije važna samo veličina slova, već i njihova boja, debljina, pa čak i obitelj.

Oznake i atributi pri radu s html fontovima

Jezik hiperteksta ima širok raspon alata za rad s fontovima. Uostalom, oblikovanje teksta je glavni zadatak html-a.

Razlog za stvaranje HTML jezika bio je problem prikazivanja pravila oblikovanja teksta u preglednicima.

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

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

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

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

Formira se samo tekst koji se nalazi između dijelova uparene oznake fonta. Ostatak teksta prikazuje se standardnim zadanim fontom.

Također u html-u postoji niz uparenih oznaka koje određuju samo jedno pravilo oblikovanja. To uključuje:

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

Običan tekst

Sličica

Sličica

Više nego inače

Manje nego inače

Kurziv

Kurziv

S podvlakom

Prekrižen

Mogućnosti atributa stila

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

1) font-family – svojstvo postavlja obitelj fontova. Moguće je ispisati više vrijednosti.
Promjena fonta u html-u na sljedeću vrijednost dogodit će se ako prethodna obitelj nije instalirana na korisničkom operativnom sustavu.

Sintaksa pisanja:

obitelj-fontova: naziv-fonta [, naziv-fonta[, ...]]

2) veličina fonta – 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:

veličina-fonta: apsolutna veličina | relativna veličina | značenje | kamata | naslijediti

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

• U pikselima;
• U apsolutnoj vrijednosti (xx-malo, x-malo, malo, srednje, veliko);
• U postocima;
• U bodovima (pt).

Veličina slova: 7

Veličina fonta: 24 px

Veličina fonta: x-veliko

Veličina fonta: 200%

Veličina fonta: 24 pt

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

stil fonta: normalan | kurziv | koso | naslijediti

Vrijednosti:

• normalno – normalan pravopis;
• kurziv – kurziv;
• oblique – font nakošen udesno;
• naslijediti – nasljeđuje pravopis nadređenog elementa.

Primjer kako promijeniti font u html-u pomoću ovog svojstva:

font-style:nasljedi

font-style:kurziv

font-style:normal

font-style: oblique

4) varijanta fonta – pretvara sva velika slova u velika slova. Sintaksa:

varijanta fonta: normalno | mala slova | naslijediti

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

font-varijanta: naslijediti

font-varijanta:normalno

font-varijanta: mala velika slova

5) font-weight – omogućuje vam postavljanje debljine teksta (zasićenost). Sintaksa:

težina-fonta: podebljano|podebljano|svjetlije|normalno|100|200|300|400|500|600|700|800|900

Vrijednosti:

• podebljano – postavlja html font podebljano;
• hrabriji – hrabriji u odnosu na normalno;
• svjetlije - manje zasićeno u odnosu na normalno;
• normalno – normalan pravopis;
• 100-900 – postavlja debljinu fonta u numeričkom ekvivalentu.

težina fonta: podebljano

font-weight:bolder

font-weight:lighter

težina-fonta: normalna

težina slova: 900

težina slova:100

Svojstvo HTML fonta i boja fonta

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

font: veličina-font-familija | naslijediti

Vrijednost se također može postaviti na fontove koje koristi sustav u oznakama na različitim kontrolama:

• natpis - za gumbe;
• ikona – za ikone;
• jelovnik - jelovnik;
• okvir za poruke – za dijaloške okvire;
• mali natpis – za male kontrole;
• status-bar – font statusne trake.

font: ikona

font:naslov

font:izbornik

font:box-poruka

mali natpis

font: statusna traka

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

Za postavljanje boje fonta u HTML-u, možete koristiti svojstvo boje. Omogućuje vam da postavite boju, bilo pomoću ključne riječi ili u rgb formatu. I također 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 zaseban odlomak u gotovom članku?

Izrada svih slova velikim u css

Za ovo postoji svojstvo pretvaranja teksta, koje, kao što ste možda pogodili, transformira tekst. Ima sljedeće vrijednosti:

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

To je u biti sve što trebate znati. Ostaje samo smisliti kako pristupiti željenom elementu. Zamislimo ovaj primjer: peti odlomak u članku morate napisati velikim slovima. I kako se to može provesti?

Kako doći do željenog elementa?

Kao što znate, odlomak se stvara pomoću uparene html oznake, čiji cijeli sadržaj postaje odlomak. Sve što preostaje je definirati novu klasu stila za njega:

Sada imamo priliku pristupiti ovom specifičnom paragrafu putem CSS jezika bez utjecaja na ostatak. Možete to učiniti ovako:

Veliko slovo(
Transformacija teksta: velika slova;
}

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

Ili možda trebate istaknuti drugi odlomak 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 paragrafu koristeći pseudo-klasu nth-child. U ovom primjeru, naš blok s člankom ima klasu article.

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

Kao što vidite, za svaki pojedini slučaj postoji drugačije rješenje. Najvažnije je zapamtiti svojstvo text-transform, koje mijenja velika i velika slova.

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

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