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-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, 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-u

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

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.

doba informacijsko društvo

Č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 slova

Primjer 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 njih

Primjer 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 fontovima

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

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.

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 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-line: 1em; margin-bottom: -0.4em; margina -desno: 0,09em; položaj: relativno; )

Evo, zapravo, nekoliko metoda uređivanja velika slova koristeći CSS.