Kako napraviti prekrasan font u html-u: veličine, boje, oznake html fonta. Stvaranje velikih slova pomoću CSS Css Sva velika slova
Često u žurbi prilikom dodavanja materijala na web mjesto ili, na primjer, stvaranja nova tema 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-uU 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, mi ćemo napisati svoje mala funkcija. Implementacija bi izgledala ovako:
U ovoj izvedbi dobit ćemo rečenicu koja počinje s velika slova, što nam zapravo i treba.
Veliko prvo slovo niza u CSS-uOva metoda je vizualna (to jest, u izvorni kod prijedlozi mjesta će se pojaviti kakvi jesu) 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 jQueryjuKao š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.
ili detaljno o slovima i HTML CSS oblikovanju
Poglavlje sadrži primjere oblikovanja slova iz područja Hypertext Markup.
U izborniku s lijeve strane naći ćete moderne i vrlo detaljne HTML upute.
Oni će vam omogućiti da kreirate svoju web stranicu od nule, ali za sada pogledajte malo niže.
Ovo bi moglo biti zanimljivo.
Čovječanstvo je ušlo u novo razdoblje svog razvoja, u kojem informacije i mrežne tehnologije igraju izuzetno važnu ulogu. Živimo u eri informacijskog društva koje karakterizira ubrzani razvoj informacijskih i telekomunikacijskih tehnologija. Pojavom računala i interneta počele su ogromne promjene. Računalo i Internet potiču društvo na razvoj novih normi ponašanja, pravila i ideala. Internet je za novu generaciju ono što je televizija bila za prethodnu. Ali Globalna mreža puno funkcionalniji od televizije, jer pruža mogućnost kupnje, prodaje, nudi komunikaciju i razne načine samoizražavanje, kao što je stvaranje osobnih internetskih stranica i web stranica.
HTML slova: velika slovaPrimjer oblikovanja slova:
Rezultat oblikovanja:
Primjer slobodnog teksta napisanog velikim slovima
Primjer slobodnog teksta napisanog velikim slovima
Oznake - definirati velika slova(ove oznake nisu podržane u HTML 5).
CSS kod style="text-transform:uppercase" - definira velika slova.
Drugim riječima, velika slova su definirana sa koristeći CSS atributi.
HTML slova i CSS udaljenost između njihPrimjer oblikovanja slova:
Rezultat oblikovanja:
Prilagođeni HTML tekst i CSS razmak između slova 2 piksela
Opis atributa i vrijednosti:
CSS kod style="letter-spacing:2px" - definira CSS razmak između slova.
Slični primjeri potražite formatiranje u izborniku s lijeve strane. Hvala vam na pažnji.
U html-u veličina fonta igra važnu ulogu. Omogućuje vam da privučete pozornost korisnika važna informacija, objavljeno na stranici stranice. Iako nije važna samo veličina slova, već i njihova boja, debljina, pa čak i obitelj.
Oznake i atributi pri radu s html fontovimaJezik hiperteksta ima širok raspon alata za rad s fontovima. Uostalom, oblikovanje teksta je glavni zadatak html-a.
Razlog stvaranja HTML jezik Došlo je do problema s preglednicima koji prikazuju pravila oblikovanja teksta.
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 stilaOsim 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 postavljena na operacijski sustav korisnik .
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 fontaFont 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 postavljanje boje pomoću ključna riječ, i to u rgb formatu. I također u heksadecimalnom kodu.
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 nadređenu vrijednost.
Primjer h3 ( text-transform: uppercase; ) .lowercase ( text-transform: smallcase; ) .capitalize ( text-transform: veliko slovo; ) text-transform 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.
ProizlazitiMeđ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.
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.
Raspon oznakaKako 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 slovoTakođ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 koristeći CSS.