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 veliki skup 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 od strane pretraživača.
Razmotrite 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žana je pozitivna vrijednost atributa od 1 do 7.
- lice - koristi se za postavljanje porodice fontova teksta koji će se koristiti unutar oznake . Podržano je više vrijednosti, odvojenih zarezima.
Formatira se samo tekst koji se nalazi između dijelova uparene oznake fonta. Ostatak teksta se prikazuje u zadanom fontu.
Također u html-u postoji veliki broj uparenih oznaka koje definiraju samo jedno pravilo formatiranja. To uključuje:
- - postavlja podebljani font u html-u. Tag slično djelovanju prethodnom;
- - veličina je veća od zadane;
- - manja veličina slova;
- - kurziv tekst (kurziv). Slična oznaka ;
- — tekst sa podvlačenjem;
- precrtano;- — prikazivanje teksta samo malim slovima;
- - velikim slovima.
običan tekst
Thumbnail
Thumbnail
Više nego inače
Manje nego inače
Kurziv
Kurziv
Sa podvlačenjem
Precrtano
Mogućnosti atributa stila
Pored 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 fonta:
1) font-family - svojstvo postavlja porodicu fontova. Moguće je nabrojati više vrijednosti.
Promjena fonta u html-u na sljedeću vrijednost će se dogoditi ako prethodna porodica nije postavljena na korisnikovom operativnom sistemu.
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 | vrijednost | interes | nasljediti
Također možete postaviti veličinu fonta:
- U pikselima;
- U apsolutnom smislu ( 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 fonta. sintaksa:
stil fonta: normalan | kurziv | koso | nasljediti
vrijednosti:
- normalan - normalan pravopis;
- kurziv - kurziv
- kosi - font sa nagibom 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. 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 pisanja 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čkim terminima.
font-weight:bold
font-weight:bolder
font-weight:lighter
font-weight:normal
font-weight:900
font-weight:100
svojstvo fonta i boja html fonta
Font je još jedno svojstvo kontejnera. Interno je kombinirao vrijednosti nekoliko svojstava dizajniranih za promjenu fontova. Sintaksa fonta:
font: font-size font-family | nasljediti
Također, vrijednost se može postaviti na fontove koje sistem koristi u oznakama na raznim kontrolama:
- natpis - za dugmad;
- ikona - za ikone;
- meni - meni;
- box-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 podesili boju fonta u html-u, možete koristiti svojstvo boje. Omogućava vam da postavite boju, kako pomoću ključne riječi, tako i u rgb formatu. I također u obliku heksadecimalnog koda.
Kapica je prvo slovo pasusa, veće je od ostalih i postavljeno tako da je njegov vrh u nivou prvog reda pasusa. Na slici možete vidjeti primjer početnog slova ugrađenog u tekst.
Inače, WordPress ima poseban dodatak (wordpress.org/extend/plugins/drop-caps) koji vam omogućava da automatski kreirate ugrađeno u tekst (i pomaknuto prema dolje) velika slova. Nevjerovatno! Međutim, što ako ne želite koristiti dodatak (siguran sam da ne želite) i samo trebate zatvoriti nekoliko postova, a možda i određenu lokaciju?
Dobra vijest je da vam nije potreban dodatak za kreiranje velikih slova, sve što vam je potrebno je 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; 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 će se morati prilagoditi na osnovu vašeg dizajna i teksta.
span tag
Da bi se stil mogao primijeniti na veliko slovo teksta, potrebno je veliko slovo „umotati“ u oznaku span i propisati odgovarajuću klasu.
A
Pseudo element: prvo slovo
Također možete stilizirati prvi znak u tekstu koristeći :first-letter pseudoelement. Međutim, ograničen broj svojstava se može primijeniti na pseudoelement :first-letter: to su svojstva koja se odnose na font, boju, pozadinu, ivicu, marginu i padding. Još jedna stvar koju treba napomenuti je da pseudoelement :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, zapravo, nekoliko metoda uređivanja velika slova sa CSS-om.
CSS velika slova pomažu u razbijanju monotonije istog tipa dizajna, čiji tekstovi izgledaju isto od početka do kraja.
Pisma nekad i sad
Hroničari su koristili velika slova u rukopisima koji su pisani rukom, a neki od njih 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 velika slova. Često su bile ukrašene ukrasnim uzorkom koji se nalazio oko slova.
Uzdignuta i spuštena slova i danas su u upotrebi. Mogu se naći u novinama, časopisima i knjigama, kao iu digitalnoj štampi. Uzdignuta slova se ponekad nazivaju izduženim. Postavljaju se u ravni sa dnom teksta koji ih prati. Ispuštena slova se postavljaju u ravni sa vrhom teksta, ponekad u sloju iza glavnog sadržaja teksta, ili se ostatak teksta obavija oko njih.
Uzdignuta slova je mnogo lakše definisati jer se nalaze u ravni sa ostatkom teksta i obično nije potrebno menjati omotač spoljnih margina. Izostavljena slova zahtijevaju finije podešavanje. Biće vam lakše da se nosite sa ovim ako prvo shvatite kako se rukuje podignutim likovima.
Korištenje klasa
Dizajneri koji već razumiju CSS znaju da kreiraju posebnu CSS klasu za prvo veliko slovo.
CSS kod za element paragrafa 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? U stvari, moraćete 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, morate kreirati zasebne klase za svako podignuto slovo. U nastavku CSS class.myinitialcapsi margina na desnoj strani je negativna kako bi se smanjila udaljenost između I i n .
Myinitialcapsi(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 sa negativnom marginom povlači je bliže.
Ovisno o rezoluciji ekrana u gornjem primjeru, I i n mogu izgledati kao da su spojeni. To je zbog serifa na krajevima slova. Stoga, prije nego što odaberete svoje konačne CSS stilove, testirajte svoju web stranicu na različitim uređajima da vidite kako tekst u CSS-u 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 da kreirate veću verziju navodnika koji će se pojaviti pored slova. U našem slučaju, ni klasa slova veličine 48 niti klasa teksta od 20 piksela nisu pogodne za navodnike. Umjesto toga, to će biti nešto između - 30 piksela. Pomeramo navodnike za 4 piksela prema dole da bismo ih optički poravnali sa I :
Myinitialcapsq (font-size:30px; font-family: Didot; float:left; margin-top:4px;)
ncluding” novu klasu sa negativnom marginom povlači bliže.
Morate biti vrlo pažljivi kada specificirate svako veliko slovo CSS-a zajedno sa navodnicima, tako da njihov kerning i poravnanje odgovaraju okolnim oznakama. Na primjer, slovo T morat će se pomaknuti ulijevo, malo iza ruba 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 20, 30 i 48. Ali ćete morati prilagoditi veličine na osnovu specifičnih fontova koje ste odabrali. Kao i veličine i rezolucije ekrana na kojima će se stranica gledati.
Pseudoelementi i pseudoklase
Koristeći CSS pseudoelement, možete lako kreirati podignuto slovo dodavanjem ::first-slova elementu pasusa. Koristite :prvo slovo ( sa jednim debelom crevom) 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 izgledat će ovako...
Početno slovo, pri čemu je prvo veliko slovo.
Sa prijelomom reda, sljedeći red nema početno ograničenje.
n 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?
B kada se teško vraća, i počinje novi paragraf, uvijek se kreira još jedna početna granica. Možda se pitate Kako ću ovo 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 tako izgledati?
Prvo veliko slovo pasusa se pretvara u slovo.
Prvo slovo nakon prijeloma reda neće biti veliko.
o Imajte na umu da u HTML izvoru prvo slovo nije veliko, već je konvertovano u znak od 3,6 em.
O Međutim, čak i nakon prisilnog prijeloma reda, slovo se uvijek kreira na početku svakog novog pasusa. Možete se zapitati: Kako to mogu uzeti u obzir? Trebam li dodati slova za sve ove slučajeve? Pa, možeš. Ali da li je to neophodno?
Čak i sa prednostima koje pseudoelementi pružaju, morali smo da dodamo mnogo koda da bismo definisali zasebne klase za rešavanje problema kerninga i dopuna. Ali ova metoda će pretvoriti prvo slovo svakog novog pasusa u CSS velika slova. Za neke to možda neće biti prikladno, jer ne morate pretvarati prvo slovo svakog pasusa.
Kombinacija pseudo-klasa i pseudo-elemenata za stvaranje pametnog rasporeda
Dodavanje pseudo-klase :first-child 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:first-child::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 dijete je jedino slovo koje se u ovoj metodi 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 elemente 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 odjeljka, prvo slovo je postavljeno na podignuto veliko slovo. I novi pasus... Ako želite eksperimentirati, 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 određeni tipovi pseudo-klasa mogu koristiti za CSS tekst velikih slova. Bilo da slijedite principe opisane u ovom članku ili počnete kopati dublje, kada naučite kako raditi sa pseudoklasama first-child, :first-of-type i :first-letter CSS pseudoklasama, moći ćete pravilno primijeniti ih u HTML elemente. ili više o slovima i HTML CSS formatiranju Poglavlje sadrži primjere formatiranje slova iz oblasti za označavanje hiperteksta. U meniju sa leve strane naći ćete moderne i veoma detaljne HTML tutorijale. Oni će vam omogućiti da kreirate svoju web stranicu od nule dok gledam malo niže. Moglo bi biti zanimljivo. Era informacionog društva Čovječanstvo je ušlo u novi period svog razvoja, u kojem informacijske i mrežne tehnologije igraju izuzetno važnu ulogu. Živimo u eri informacionog društva koje karakteriše brz razvoj informacionih i telekomunikacionih tehnologija. Pojavom kompjutera i interneta počele su ogromne promjene. Kompjuter i internet guraju društvo da formuliše nove norme ponašanja, pravila i ideale. Internet je za novu generaciju ono što je televizija bila za prethodnu generaciju. Ali Globalna mreža je mnogo funkcionalnija od televizije, jer pruža mogućnost kupovine, prodaje, nudi komunikaciju i razne načine samoizražavanja, kao što je stvaranje lične web stranice i web stranice. Primjer oblikovanja slova: Rezultat formata: Primjer slobodnog teksta napisanog velikim slovima Primjer slobodnog teksta napisanog velikim slovima oznake - odrediti velika slova(Ove oznake nisu podržane u HTML 5). css code style="text-transform:uppercase" - definiše velika slova.
Drugim riječima, velika slova su definisana sa CSS-om atributi. Primjer oblikovanja slova: Rezultat formata: Prilagođeni HTML tekst i CSS razmak slova od 2px Opis atributa i vrijednosti: css code style="letter-spacing:2px" - definiše CSS razmak između slova.
Potražite slične primjere oblikovanja u izborniku s lijeve strane. Hvala vam na pažnji. Omogućava vam promjenu velikih i malih slova u tekstu. Zadana vrijednost je none , što nema utjecaja na tekst. Slučaj teksta ostaje isti. Vrijednosti velika i mala slova pretvaraju znakove u velika i mala slova. Ako navedete veliko slovo , tada će samo prvi znakovi svake riječi biti napisani velikim slovom. Nasljeđivanje nasljeđuje vrijednost roditelja. Ovaj paragraf ima svojstvo transformacije teksta postavljeno na mala slova, što znači da će sva slova biti mala. I ovaj posljednji paragraf ima svojstvo transformacije teksta primijenjeno sa svojstvom KAPITALIZA. Prva slova svake riječi bit će velika i samo ona.HTML slova: velika i mala slova
HTML slova i CSS razmak između njih
Primjer
h3 (transformacija teksta: velika slova; ) .mala slova (transformacija teksta: mala slova; ) .velika slova (transformacija teksta: velika slova; )
Ovo je naslov. Ima svojstvo transformacije teksta primijenjeno sa vrijednošću velikim slovima. Svi znakovi će biti velika.