Sličica

Sličica

Više nego inače

Manje nego obično

Kurziv

Kurziv

Podcrtano

Prekrižen

Sposobnosti atributa stila

Pored opisanih oznaka, postoji još nekoliko načina za promjenu fonta u html-u. Jedna od njih je upotreba atributa generičkog stila. Koristeći vrijednosti njegovih svojstava, možete postaviti stil prikaza fonta:

1) font-family - svojstvo postavlja obitelj fontova. Moguće je nabrojati nekoliko vrijednosti.
Promjena fonta u html-u na sljedeću vrijednost dogodit će se ako prethodna obitelj nije postavljena na operacijski sustav korisnik.

Sintaksa pisanja:

porodica fontova: naziv fonta [, naziv fonta [, ...]]

2) veličina fonta - veličina je postavljena od 1 do 7. Ovo je jedan od glavnih načina kako možete povećati font u html-u.
Sintaksa pisanja:

font-size: apsolutna veličina | relativna veličina | vrijednost | kamata | naslijediti

Veličina fonta također se može postaviti:

• U pikselima;
• U apsolutnoj vrijednosti ( xx-mali, x-mali, mali, srednji, veliki);
• U postocima;
• U bodovima (pt).

Veličina fonta: 7

Veličina fonta: 24 piksela

Veličina fonta: x-veliko

Veličina fonta: 200%

Veličina fonta: 24pt

3) font-style - postavlja stil pisanja fonta. Sintaksa:

stil fonta: normalno | kurziv | kosi | naslijediti

Vrijednosti:

• normalno - normalan pravopis;
• kurziv - kurziv
• kosi - font s desnim nagibom;
• naslediti - nasljeđuje pravopis nadređenog elementa.

Primjer kako promijeniti font u html-u pomoću ovog svojstva:

stil fonta: naslijedi

stil fonta: kurziv

stil fonta: normalan

stil fonta: kosi

4) font-variant - pretvara sva velika slova u velika. Sintaksa:

varijanta fonta: normalno | male kape | naslijediti

Primjer kako promijeniti font u html s ovim svojstvom:

varijanta fonta: naslijedi

varijanta fonta: normalno

varijanta fonta: mala slova

5) font-weight - omogućuje vam podešavanje debljine pisanja teksta (zasićenja). Sintaksa:

font-weight: bold | bold | upaljač | normalno | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900

Vrijednosti:

• podebljano - postavlja html podebljani font;
• hrabrije - deblje u odnosu na normalno;
• upaljač - manje zasićen u odnosu na normalu;
• normalno - normalan pravopis;
• 100-900 - postavlja debljinu slova u numerički ekvivalent.

font-weight: podebljano

font-weight: bold

font-weight: lakši

težina fonta: normalno

težina fonta: 900

težina fonta: 100

Svojstvo fonta i boja HTML fonta

Font je još jedno svojstvo spremnika. Interno je kombinirao vrijednosti nekoliko svojstava namijenjenih promjeni fontova. Sintaksa fonta je:

font: veličina slova font-family | naslijediti

Također, vrijednost se može postaviti na fontove koje sustav koristi u natpisima na raznim kontrolama:

• naslov - za gumbe;
• ikona - za ikone;
• meni - meni;
• okvir za poruke - za dijaloške okvire;
• mali naslov - za male kontrole
• statusna traka - font trake statusa.

font: ikona

font: naslov

font: izbornik

font: okvir za poruke

mali naslov

font: statusna traka

font: kurziv 50px podebljano "Times New Roman", Times, serif

Da biste postavili boju fonta u html-u, možete koristiti svojstvo color. Omogućuje vam postavljanje boje kao sa ključna riječ i u rgb formatu. I također u obliku heksadecimalnog koda.

Često u žurbi kada dodajete materijale na web mjesto ili, na primjer, stvarate nova tema na forumu korisnik može početi pisati rečenicu (naslov) malim (malim) slovom. To je donekle pogreška.

Pokazat ću vam nekoliko mogućnosti za rješavanje ovog problema: PHP i CSS prikladniji su za već objavljene materijale, kada jQuery može popraviti situaciju čak i prije objave.

Prvo slovo niza u PHP-u je veliko

U PHP-u postoji funkcija koja se naziva „ ucfirst", Koji samo pretvara prvi znak niza u velika slova, ali njegov minus je što ne radi sasvim ispravno s ćirilicom.

Da bismo to učinili, napisat ćemo svoj mala funkcija... Implementacija će izgledati ovako:

U tom ćemo slučaju dobiti ponudu koja započinje s veliko slovo, što je zapravo ono što nam treba.

Veliko početno slovo niza u CSS-u

Ova metoda je vizualna (tj. U izvorni kod Ponude web mjesta izgledat će takve kakve jesu) također pretvara prvi znak u velika slova.

Upotreba je sljedeća:

Korištenje pseudo-elementa " prvo slovo"I svojstva" preobrazba teksta»Postavili smo izgled za svako prvo slovo odlomka.

Prvo slovo niza je veliko u jQueryju

Kao što sam ranije rekao, ova metoda pretvorbe najprikladnija je za materijale koji tek trebaju biti objavljeni.

Na primjer, uzet ćemo tekstualno polje (ono će nam služiti kao polje za unos naslova) i za njega napisati malu skriptu koja će ga, kada unesete rečenicu malim slovom, napisati velikim slovom:

Skripta se pokreće i prilikom pisanja teksta i jednostavnog lijepljenja. Ne zaboravite da skripte rade na vašoj web lokaciji, morate imati povezanu knjižnicu jQuery.

Kapica (ugrađena u tekst) prvo je slovo odlomka veće veličine od ostatka i postavljen tako da mu je vrh na razini prvog retka odlomka. Na slici možete vidjeti primjer kapice ugrađene u tekst.

Inače, WordPress ima poseban dodatak (wordpress.org/extend/plugins/drop-caps) koji vam omogućuje automatsko stvaranje ugrađenih u tekst (i odstupanje) velika slova... Predivno! Međutim, što ako ne želite koristiti dodatak (siguran sam da to ne želite) i samo trebate stvoriti kapicu za nekoliko postova, možda na određenom mjestu?

Dobra vijest: za izradu velikih slova ne trebate koristiti dodatak, trebate samo css i oznaku raspona. Otvorite css datoteku i dodajte sljedeći kod:

Span.dropcaps (obitelj fontova: Georgia, serif; boja: #ccc; veličina slova: 46px; float: lijevo; težina fonta: 400; visina linije: 1em; margin-bottom: -0.4em; margin-right : 0,09em; pozicija: relativna;)

Nešto kao ovo. Naravno, trebat će vam stil koji odgovara vašem dizajnu i tekstu. Na primjer, vrijednosti svojstva: veličina fonta, margine i visina retka morat će se odabrati na temelju vašeg dizajna i teksta.

Oznaka raspona

Da bi se stil primijenio na veliko slovo teksta, potrebno je "omotati" veliko slovo u oznaku raspona i napisati odgovarajuću klasu.

A

Pseudo-element: prvo slovo

Prvi znak u tekstu također možete stilizirati pomoću pseudo-elementa: first-letter. Međutim, ograničeni broj svojstava može se primijeniti na: pseudo-element prvog slova: to su svojstva koja se odnose na font, boju, pozadinu, obrube, margine i podloge. Također treba napomenuti da pseudo-element: prvo slovo neće raditi u starijim preglednicima.

P: prvo slovo (obitelj fontova: Georgia, serif; boja: #ccc; veličina fonta: 46px; float: lijevo; težina fonta: 400; visina linije: 1em; margina-dno: -0,4em; margina -desno: 0,09em; pozicija: relativna;)

Evo nekoliko metoda uređivanja. velika slova iz pomoću CSS-a.

Kontrolira pretvorbu teksta elementa u velika ili mala slova. Kad se vrijednost razlikuje od none, promijenit će se velika i mala slova izvornog teksta.

kratke informacije

Oznake

Vrijednosti

velika slova Prvi znak svake riječi u rečenici bit će velikim. Ostatak simbola ne mijenja izgled. mala slova Svi tekstualni znakovi postaju malim (malim slovima). veliko slovo Svi su znakovi teksta velika (velika slova). none Ne mijenja velika i mala slova.

Pješčanik

Winnie the Pooh uvijek nije bio spreman za malo osvježenja, pogotovo u jedanaest sati ujutro, jer je u ovo doba doručak već odavno završio, a večera nije ni pomislila da započne. I, naravno, bio je užasno sretan kad je vidio Zeca kako vadi šalice i tanjuriće.

div (preobrazba teksta: velika slova;)

Primjer

Spomenik kulture srednjeg vijeka

Amazonska nizija prihvata malu količinu mačaka i pasa, a Hayosh Bayah poznat je po crvenim vinima.

Proizlaziti ovaj primjer prikazan na si. jedan.

Sl. 1. Primjena svojstva text-transform

Objektni model

Objekt.style.textTransform

Specifikacija

Svaka specifikacija prolazi kroz nekoliko faza odobrenja.

• Preporuka - Ovu je specifikaciju odobrio W3C i preporučuje se kao standard.
• Preporuka kandidata ( Moguća preporuka) - grupa odgovorna za standard uvjerena je da ispunjava svoje ciljeve, ali za provedbu standarda potrebna je pomoć zajednice programera.
• Predložena preporuka ( Predložena preporuka) - U ovom se trenutku dokument podnosi Savjetodavnom vijeću W3C na konačno odobrenje.
• Radni nacrt - zrelija verzija nacrta nakon rasprave i revizije za pregled u zajednici.
• Nacrt urednika ( Nacrt uredništva) - skica verzije standarda nakon uređivanja od strane urednika projekta.
• Nacrt ( Nacrt specifikacije) prvi je nacrt standarda.

Dobar dan, geekovi izrade web mjesta. U današnjoj publikaciji razmotrit ćemo temu povezanu s dizajnom tekstualnog sadržaja. Zbog toga ćete naučiti kako postaviti velika slova u css - na način ćete se upoznati s nekoliko opcija za stvaranje kapice i, naravno, sve možete isprobati u praksi. A sad prijeđimo na zabavni dio!

Preoblikujmo tekst

Pomoću kaskadnih listova stilova možete promijeniti i prvi znak bloka i sav tekst. Pokazat ću vam kako možete oba. Štoviše, svi alati navedeni u ovom članku podržani su na tri razine jezika: css1, css2, css2.1 i css3.

Započet ću sa zanimljivim svojstvom koje modificira sav tekstualni sadržaj u odabiru. to preobrazba teksta.

Imenovani element može pretvoriti znakove u velika, mala i velika slova, a također i velikim početnim slovom svaki prvi znak riječi. O vrijednostima sam napisao više u tablici.

Sada, da konsolidiramo teorijski materijal, uzmimo primjer.

Pažnja!

! Sutra je popust na sve kozmetičke proizvode!

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

Stvorite kapicu

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

Kapica (ili čak ponekad početno slovo) prvo je slovo poglavlja koje se od ostalih razlikuje velikom veličinom, bojom, a u nekim slučajevima čak i dizajnom fonta. U stvarnom životu primjer takvog pisma nalazimo u starim rukopisima i knjigama.

Postoji nekoliko načina za stvaranje inicijala. Često se znak označava oznakom jezika za označavanje a nakon toga su određena svojstva propisana u stilovima koji ga modificiraju. Ovo je dobar način, ali ova publikacija govori o css mehanizmima (koji su, po mom mišljenju, u ovom slučaju puno logičniji i prikladniji za upotrebu).

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

Dakle, u ovom slučaju: koristi se prvo slovo. Kao i svi pseudo-elementi, dodijeljen je selektoru, odvojen dvotočkom. Tada se, prema svim pravilima stilskih listova, navode svojstva. Međutim, možete primijeniti samo ona svojstva koja se odnose na uređivanje fontova, podloga, boja, pozadine, margina i obruba.

Predlažem da razmotrimo konkretan primjer. Tijekom provedbe predstavljenog malog programa, odlučio sam napraviti ne samo kapicu u boji, već je napuniti cvijećem. Da biste to učinili, morate upotrijebiti nekoliko lukavih trikova s ​​postavljanjem prozirne boje fonta i ispunjavanjem slova odabranom slikom.

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

Nastavimo zanimljivu priču u sljedećem odlomku.

Rezultat izgleda vrlo atraktivno i neobično, što je savršeno rješenje za.

Kao što vidiš ova tema jako jednostavno. Programski kod koji ste mi dali možete lako koristiti za svoje web resurse, mijenjajući i prilagođavajući svom stilu.

Ako vam je gornji materijal bio koristan, pretplatite se na ažuriranja na mom blogu i ne zaboravite podijeliti stečeno znanje (i naravno vezu do mog bloga) sa svojim prijateljima. Sretno!

Doviđenja!

Srdačan pozdrav, Roman Chueshov