Css velika slova. Stvaranje velikih slova pomoću CSS-a. HTML slova i CSS razmak između njih

CSS velika slova pomažu razbiti monotoniju istog tipa dizajna, čiji tekstovi izgledaju 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 nastavku css-class.myiniitialcapsi margina s desne strane je negativna kako bi se smanjila udaljenost između I i n.

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

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

ja uključivanje nove klase s negativnom maržom privlači je bliže.

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;)

“ja uključujući” novu klasu s negativnom marginom povlači bliže.

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 :prvo-slovo ( s jednom dvotočkom) za stare 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.

n 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?

B ali s tvrdim povratkom i početkom novog odlomka, uvijek se stvara još jedno početno veliko slovo. 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 3.6em znak.

OKO Međutim, čak i nakon prisilnog prijeloma retka, te na početku svakog novog odlomka, uvijek se stvara slovo. Možete se zapitati: Kako to trebam 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 elemente

ili

. 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.

Dobar dan, štreberima za izradu web stranica. Današnja publikacija govorit će o temi dizajniranja tekstualnog sadržaja. Zato ćete naučiti kako postaviti velika slova pomoću CSS alata, upoznati se s nekoliko opcija za izradu kape i, naravno, sve ćete moći isprobati u praksi. Pa, sad prijeđimo na zabavni dio!

Preobrazimo tekst

Zahvaljujući kaskadnim listovima stilova, možete promijeniti i prvi znak bloka i cijeli tekst. Reći ću vam kako možete učiniti oboje. Štoviše, svi alati spomenuti u ovom članku podržani su na tri jezične razine: css1, css2, css2.1 i css3.

Počet ću sa zanimljivim svojstvom koje mijenja sav tekstualni sadržaj u odabranom . Ovaj tekstualna transformacija.

Imenovani element može pretvarati znakove u velika i mala slova te također postaviti svaki prvi znak riječi u veliko slovo. Napisao sam više o vrijednostima u tablici.

Sada, kako bismo ojačali teoretski materijal, pogledajte primjer.

Transformirajte tekst

Pažnja!

!Sutra je popust na sve kozmetičke proizvode!

Akcija vrijedi u svim poslovnicama koje se nalaze u vašem gradu.

Stvaranje kapice

Ako ne znate što pojam "drop cap" znači, sada je vrijeme da saznate, jer je to izravno povezano s trenutnom temom.

Veliko slovo (ili ponekad kažu i inicijali) je prvo slovo poglavlja, koje se od ostalih razlikuje po velikoj veličini, boji i, u nekim slučajevima, čak i dizajnu fonta. U stvarnom životu, primjer takvog pisma može se naći u starim rukopisima i knjigama.

Postoji nekoliko načina za stvaranje inicijala. Često je simbol istaknut oznakom označnog jezika a zatim se propisuju određena svojstva u stilovima koji ga modificiraju. Ovo je dobar način, ali ova publikacija govori o CSS mehanizmima (koji su, po mom mišljenju, mnogo logičniji i praktičniji za korištenje u ovom slučaju).

Da biste riješili ovaj problem, možete koristiti alat kao što je.

Dakle, u ovom slučaju koristimo: prvo slovo. Kao i svi pseudoelementi, dodjeljuje se selektoru pomoću dvotočke. Nakon svih pravila listova stilova, naznačena su svojstva. Međutim, možete primijeniti samo svojstva koja se odnose na uređivanje fontova, ispuna, boje, pozadine, margina i obruba.

Predlažem da razmotrimo konkretan primjer. Prilikom implementacije predstavljenog malog programa, odlučio sam napraviti ne samo početno slovo u boji, već ga ispuniti cvijećem. Da biste to učinili, morate upotrijebiti nekoliko lukavih trikova postavljanjem boje fonta na prozirnu i ispunjavanjem slova odabranom slikom.

Povišeni inicijal

Ovaj odlomak sadrži rečenicu vrlo zanimljivog sadržaja.

Nastavimo zanimljivu priču u sljedećem odlomku.

Dobiveni rezultat izgleda vrlo atraktivno i neobično, što je idealno rješenje za.

Kao što vidite, ova je tema vrlo jednostavna. Možete jednostavno koristiti programski kod koji sam dao za vaše web resurse, mijenjajući ga i prilagođavajući tako da odgovara vašem stilu.

Ako vam je predstavljeni materijal bio koristan, pretplatite se na ažuriranja mog bloga i ne zaboravite podijeliti znanje koje ste stekli (i naravno vezu na moj blog) sa svojim prijateljima. Sretno!

Doviđenja!

Srdačan pozdrav, Roman Chueshov

Omogućuje promjenu veličine slova u tekstu.

Zadana vrijednost postavljena je na ništa, što nema utjecaja na tekst. Slučaj teksta ostaje isti. Vrijednosti velikih i malih slova pretvaraju znakove u velika odnosno mala slova. Ako navedete veliko slovo, samo će prvi znakovi svake riječi biti pisani velikim slovima. Inherit nasljeđuje vrijednost svog roditelja.

Primjer

h3 (transformacija teksta: velika slova;) .mala slova (transformacija teksta: mala slova;) .velika slova (transformacija teksta: velika slova;) tekstualna transformacija

Ovo je naslov. Ima svojstvo tekstualne transformacije primijenjeno na njega s vrijednošću velikim slovima. Svi znakovi bit će velika slova.

Svojstvo Text-transform Property with the Value Lowercase primjenjuje se na ovaj odlomak, što znači da će sva slova biti mala slova.

I na ovaj zadnji odlomak primjenjuje se svojstvo tekstualne transformacije sa svojstvom CAPITALIZE. Prva slova svake riječi bit će velika i samo ona.

Proizlaziti

Međutim, nije sve tako jednostavno. Postoje neke nijanse. Ako pogledate drugi odlomak gornjeg primjera, primijetit ćete da je riječ kapitalizirati, unatoč tome što je na odlomak postavljeno svojstvo transformacije teksta postavljeno na veliko slovo, prikazana u potpunosti velikim slovima, što odgovara izvornom tekstu. To se objašnjava činjenicom da se s navedenom vrijednošću velikih slova provjeravaju samo prva slova riječi, a ostatak ostaje nepromijenjen, bez obzira na početno stanje.
Unatoč prividnoj jednostavnosti, svojstvo text-transform može biti vrlo korisno. Na primjer, kako bi tekst svih H1 naslova vaše web stranice bio napisan velikim slovima, samo trebate dodati jedno svojstvo u list stilova

H1 (transformacija teksta: velika slova;)

i problem će biti riješen. I nećete morati ručno mijenjati sva zaglavlja, kojih može biti jako, jako puno.

Upravlja hoće li se tekst elementa pretvoriti u velika ili velika slova. Ako je vrijednost drugačija od none, velika i mala slova izvornog teksta bit će promijenjena.

kratka informacija

Oznake

	Opis	Primjer
<тип>	Označava vrstu vrijednosti.	<размер>
A & & B	Vrijednosti se moraju ispisati navedenim redoslijedom.	<размер> && <цвет>
A \| B	Označava da trebate odabrati samo jednu vrijednost od predloženih (A ili B).	normalno \| malim slovima
A \|\| B	Svaka se vrijednost može koristiti samostalno ili zajedno s drugima bilo kojim redoslijedom.	širina \|\| računati
	Vrijednosti grupa.	[ obrezivanje \|\| križ ]
*	Ponovite nula ili više puta.	[,<время>]*
+	Ponovite jednom ili više puta.	<число>+
?	Navedena vrsta, riječ ili grupa nisu obavezni.	umetak?
(A, B)	Ponovite najmanje A, ali ne više od B puta.	<радиус>{1,4}
#	Ponovite jednom ili više puta odvojene zarezima.	<время>#

Vrijednosti

veliko slovo Prvi znak svake riječi u rečenici bit će pisan velikim slovom. Preostali simboli ne mijenjaju svoj izgled. mala slova Svi tekstualni znakovi postaju mala slova (mala slova). velika slova Svi tekstualni znakovi postaju velika slova (velika slova). none Ne mijenja velika i mala slova znakova.

Pješčanik

Winnie the Pooh uvijek nije bio nesklon malom osvježenju, posebno u jedanaest ujutro, jer je u to vrijeme doručak već odavno završio, a ručak još nije počeo. I, naravno, silno se obradovao kad je vidio da Zec vadi šalice i tanjure.

div (transformacija teksta: veliko slovo; )

Primjer

tekstualna transformacija

Spomenik kulture srednjeg vijeka

Amazonska nizina je neumjerena u malom prijevozu mačaka i pasa, a Hajos Bahia poznata je po svojim crvenim vinima.

Rezultat ovog primjera prikazan je na sl. 1.

Riža. 1. Primjena svojstva text-transform

Objektni model

Objekt.style.textTransform

Specifikacija

Svaka specifikacija prolazi kroz nekoliko faza odobravanja.

Preporuka - Specifikaciju je odobrio W3C i preporučuje se kao standard.
Preporuka kandidata ( Moguća preporuka) - grupa odgovorna za standard je zadovoljna da on ispunjava svoje ciljeve, ali joj je potrebna pomoć razvojne zajednice za implementaciju standarda.
Predložena preporuka Predložena preporuka) - u ovoj fazi dokument se podnosi Savjetodavnom vijeću W3C na konačno odobrenje.
Radni nacrt - zrelija verzija nacrta o kojoj se raspravljalo i dopunjena radi pregleda zajednice.
Urednikov nacrt ( Urednički nacrt) - nacrt verzije standarda nakon izmjena koje su izvršili urednici projekta.
Nacrt ( Nacrt specifikacije) - prva verzija nacrta standarda.

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.