Stvaranje velikih slova pomoću CSS-a. Izrada CSS stilova velikih slova pomoću pseudoelemenata Oznaka velikih slova
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 više 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;)
U ovom slučaju postoji dodatni razmak između "I" i "n."
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. Stoga, prije odabira konačnih CSS stilova, testirajte web mjesto razne uređaje da vidite kako tekst u CSS 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č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 izvorni kod HTML prvo slovo nije veliko, ali 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 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. Drop cap (kapalica ugrađena u tekst) je prvo slovo odlomka koje ima veće veličine od ostalih, i postavljen 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. Kako bi se stil primijenio na veliko slovo teksta potrebno je veliko slovo “zamotati” u span tag i odrediti odgovarajuću klasu.
A 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-line: 1em; margin-bottom: -0.4em; margina -desno: 0,09em; položaj: relativno; ) Evo, zapravo, nekoliko metoda uređivanja velika slova S koristeći CSS. 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. 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. 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; )
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 Objekt.style.textTransform Svaka specifikacija prolazi kroz nekoliko faza odobravanja. Dobar dan, štreberima za izradu web stranica. Današnja publikacija govorit će o temi dizajniranja tekstualnog sadržaja. Zbog toga ćete naučiti kako postaviti velika slova slova css- znači, upoznajte se s nekoliko opcija za stvaranje kapice i, naravno, sve možete isprobati u praksi. Pa, sad prijeđimo na zabavni dio! 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.
Akcija vrijedi u svim poslovnicama koje se nalaze u vašem gradu. 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 ona svojstva koja se odnose na uređivanje fontova, uvlaka, boja, pozadina, polja i granice. Predlažem da razmislite 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.
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 vidiš ova tema jako jednostavno. 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 Pozdrav čitateljima ovog bloga. Danas ću govoriti o tome kako možete napraviti sva velika slova koristeći CSS. Naravno, to možete omogućiti Caps Lock i napišite traženi tekst, ali ovo je prilično primitivna metoda. Ali što ako trebate istaknuti zaseban odlomak u gotovom članku? Za ovo postoji svojstvo pretvaranja teksta, koje, kao što ste možda pogodili, transformira tekst. Ima sljedeće vrijednosti: 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? 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( 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 u ovom primjeru Naš blok članaka ima klasu članaka. Članak p:nth-child(2)( 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.Raspon oznaka
Pseudo-element: prvo slovo
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
Pješčanik
Primjer
Spomenik kulture srednjeg vijeka
Objektni model
Specifikacija
×
Preobrazimo tekst
Pažnja!
!Sutra je popust na sve kozmetičke proizvode!
Stvaranje kapice
Izrada svih slova velikim u css
Kako doći do željenog elementa?
Transformacija teksta: velika slova;
}
Transformacija teksta: velika slova
}