Pozdrav, dragi čitatelji bloga. U današnjem ćemo članku govoriti o svojstvima kaskadnih listova stilova, koji su odgovorni za parametre fonta elemenata web stranice. Pogledajmo načine kako ih koristiti i vidjeti kako djeluju. Ako prvi put čujete za koncept stiliziranja stranica i ne znate ništa o CSS-u, savjetujem vam da počnete s člankom "".

Font-family - postavite naziv fonta u CSS-u

Počnimo s atributom stila obitelji fontova s ​​kojim možete postaviti tip slova i vrstu fonta, koji će prikazati tekst html elementa (primjerice tekst naslova ili paragrafa p). Sintaksa za korištenje atributa je:

obitelj-fontova:<список имен шрифтов разделенных запятыми>

Popis naziva fontova dan je u obliku njihovih naziva (na primjer, Arial, Verdana ili Times New Roman). Ako naziv fonta sadrži razmake, mora biti u navodnicima. Možete navesti više naziva fontova, odvojenih zarezima. U ovom slučaju, preglednik će prvo tražiti prvi od navedenih fontova, ako je pretraga neuspješna - drugi, treći i tako dalje:

p (familija fontova: Arial, Verdana, "Times New Roman", san-serif; )

U ovom primjeru preglednik će prvo potražiti font Arial na računalu korisnika i ako ga pronađe, prikazat će sve p elemente u istom fontu. Ako Arial nije pronađen na korisnikovom računalu, tada će preglednik tražiti Verdanu, zatim, ako ne uspije, Times New Roman, i tako dalje. Posljednji na popisu naziva fontova u ovom primjeru nije naziv određenog fonta, već naziv cijelog obitelji fontova, koji predstavljaju cijele skupove sličnih fontova.

Na taj način možete definirati cijele obitelji fontova. Postoji samo pet takvih obitelji:

• serif - serifni fontovi;
• sans-serif - sans-serif fontovi;
• kurziv - fontovi koji oponašaju rukom pisani tekst;
• fantazija - ukrasni fontovi;
• monospace - monospace fontovi.

Osim naziva fontova, svojstvo font-family može se postaviti na posebnu vrijednost naslijediti, koji govori pregledniku da prikaže tekst ovog elementa u istom fontu kao i tekst njegovog roditeljskog elementa.

Veličina fonta - postavite veličinu fonta pomoću CSS-a

Svojstvo stila veličine fonta određuje veličinu fonta za bilo koji element u html kodu. Sintaksa aplikacije:

veličina fonta:<размер>|xx-mali|x-mali|mali|srednji|veliki|x-veliki|xx-veliki|veći|manji|naslijediti

Pogledajmo sada pobliže kako koristiti ovo svojstvo.

Veličina fonta može se odrediti u apsolutnim i relativnim vrijednostima. U tu svrhu koriste se jedinice, podržan od strane CSS-a. Za kruto postavljanje veličine fonta koriste se sljedeće mjerne jedinice:

• px - pikseli;
• pt - bodovi;
• u inčima;
• cm - centimetri;
• mm - milimetri;
• pc - vrhovi.

Oznaka mjerne jedinice navedena je iza same vrijednosti. Na primjer:

p (veličina fonta: 10px; )
jak (veličina fonta: 12pt; )

Kada koristite ove stilove, tekst u svim p elementima na stranici bit će 10 piksela, a jaki elementi će biti 12 piksela.

Za postavljanje relativnih veličina fonta koriste se sljedeće oznake:

• em je veličina slova "m" u trenutnom fontu;
• ex je veličina slova “x” trenutnog fonta;
• % - postotak veličine fonta nadređenog elementa.

Na primjer:

h1 (veličina fonta: 3em; )
em (veličina fonta: 150%; )

U ovom primjeru, naslov h1 bit će nacrtan fontom tri puta većim od zadane veličine fonta. A svi elementi su jedan i pol puta veći.

Osim numeričkih vrijednosti, svojstvo veličine fonta može se postaviti na jednu od sedam vrijednosti znakova: xx-mali, x-mali, mali, srednji, veliki, x-veliki ili xx-veliki, koje određuju određene veličine fonta iz od najmanjeg do najvećeg:

Pa, posljednji način je korištenje "većih" i "manjih" vrijednosti, koje vam omogućuju povećanje i smanjenje veličine fonta u odnosu na naslijeđeni. Na primjer, ako je nadređeni element postavljen na malu veličinu fonta, veći će postaviti trenutni element na srednju veličinu fonta.

Svojstvo boje - postavite boju teksta

Atribut stila boje određuje boju teksta. Sintaksa:

Boja se može odrediti pomoću RGB koda koji je napisan u formatu:

#<доля красного цвета><доля зеленого цвета><доля синего цвета>

Svi otkucaji zapisani su heksadecimalnim brojevima od 00 do FF. Na primjer, da bi svi h2 naslovi na stranici bili crveni, trebate napisati sljedeći CSS kod:

h2 (boja: #ff0000;)

Također je moguće odrediti boje pomoću imena. Crvena boja će biti crvena, crna boja će biti crna, bijela boja će biti bijela. Na primjer:

h2 (boja: crvena;)

Svojstva font-weight, font-style, text-decoration i druga

Koristeći svojstvo stila težine fonta, postavljate "podebljanost" fonta. Sintaksa:

težina fonta: normalno|podebljano|podebljano|svjetlije|100|200|300|400|500|600|700|800|900

Vrijednost svojstva može biti jedna od sedam numeričkih vrijednosti od 100 do 900 ili jedna od imenovanih normalno, podebljano, podebljano, svjetlije. Normalna vrijednost je 400, a podebljano je 7000. Ali u praksi većina preglednika ne podržava u potpunosti atribut težine fonta. Dakle, sve vrijednosti koje su manje od 400 će odgovarati normalnim, a sve koje su veće od podebljano. Štoviše, podebljane i svjetlije vrijednosti ne funkcioniraju.

Primjer upotrebe:

em (težina fonta: podebljano; )

Svojstvo CSS font-style određuje stil fonta. Za njega su dostupne tri vrijednosti: normalno, kurziv i koso. Ali u praksi se koriste samo prva dva, gdje "normalno" postavlja uobičajeni stil fonta, a vrijednost "italic" prisiljava preglednik prikazati tekst u kurzivu.

Koristeći svojstvo text-decoration, možete postaviti različite dekoracije za tekst, kao što je podcrtavanje ili precrtavanje teksta:

text-decoration: ništa|podcrtano|preko crte|crta kroz|treperenje

Postoji pet dostupnih vrijednosti za ovaj atribut:

• nijedan - poništava sve efekte, uključujući uklanja podcrtavanje s poveznica, koji je postavljen prema zadanim postavkama;
• podcrtano — postavlja podcrtani tekst;
• overline - "precrtava" tekst, odnosno povlači crtu iznad teksta;
• line-through - precrtava tekst;
• blink - postavlja treptajući tekst. Takav tekst povremeno nestaje, otprilike jednom u sekundi, a zatim se ponovno pojavljuje na izvornom mjestu. Ovu vrijednost trenutno ne podržavaju preglednici i ona je zastarjela u CSS3.

Prema zadanim postavkama, tekst za većinu elemenata prikazuje se bez efekata. Ali neki html elementi prikazuju tekst s podcrtavanjem, posebice .

Stoga, osim poveznica, bolje je ništa na web stranici ne isticati podcrtavanjem. Budući da će korisnici podsvjesno odlučiti da, budući da je podcrtano, to znači da mogu kliknuti na njega da odu. A podcrtavanjem običnog teksta dovodite korisnika u zabludu.

Nijansa svojstva ukrasa teksta je u tome što za njega možete odrediti nekoliko vrijednosti odjednom:

text-decoration:podcrtano nadcrtano kroz liniju;

Rezultat će biti ovakav:

prekrižen podcrtani i precrtani tekst!

Svojstvo stila tekstualne transformacije omogućuje vam postavljanje velika i mala slova teksta:

tekst-transformacija: veliko|veliko|malo|ništa

Svojstvo može imati jednu od četiri vrijednosti:

• veliko slovo - pretvara prvo slovo svake riječi u veliko;
• uppercase — tekst velikim slovima;
• mala slova — tekst malim slovima;
• ništa - ne mijenja velika i mala slova.

Za povećanje i smanjenje udaljenosti između redaka teksta koristi se atribut linija-visina. Kao vrijednost možete postaviti i apsolutne i relativne vrijednosti udaljenosti navođenjem odgovarajuće mjerne jedinice (px, pt, em, itd.). Ako nema mjerne jedinice, navedenu vrijednost preglednik percipira kao množitelj. Na primjer, vrijednost 1,5 postavlja jedan i pol prored:

p (visina retka: 1,5)

Za vožnju razmak između znakova svojstvo teksta postoji razmak između slova. Omogućuje vam postavljanje dodatne udaljenosti između slova koja će se dodati izvornom. Sve jedinice duljine prihvaćene u CSS-u prihvaćaju se kao vrijednosti - pikseli (px), točke (pt), itd. Prihvatljivo je koristiti negativne vrijednosti. U ovom slučaju, udaljenost između znakova će se smanjiti:

em (razmak između slova: 5px;)

Sličan atribut razmak između riječi navodi dodatne udaljenost između riječi tekst:

h1 (razmak između riječi: 5px)

I na kraju, morate uzeti u obzir svojstvo stila font, omogućujući vam postavljanje nekoliko parametara za font odjednom. Sintaksa:

font: veličina fonta obitelj-fontova

Jedini potrebni parametri su veličina fonta i njegov naziv; drugi parametri mogu nedostajati.

Na primjer, da postavite tekst odlomka na 10 točaka Times New Roman, samo napišite sljedeće CSS pravilo:

p (font: 10pt "Times New Roman")

A ako želimo prikazati tekst naslova prve razine u fontu veličine 15 piksela i u kurzivu, tada će biti sljedeće pravilo:

p (font: kurziv 12px sans-serif)

Ovdje govorimo o CSS svojstvima odgovornim za prikaz teksta Završit ću na html stranicama. Da biste saznali više o kaskadnim listovima stilova, ne zaboravite se pretplatiti na ažuriranja bloga i čitati članke iz odjeljka "". Vidimo se opet!

Boja fonta na stranici može se postaviti pomoću HTML koda. Za ovo postoji oznaka font. Po definiciji, oznaka font služi kao neka vrsta "omotača" ili "spremnika" za tekst, kontroliranjem svojstava kojeg možete promijeniti dizajn teksta.

Označiti font primjenjuje se kako slijedi:

Graditelj web stranica "Nubex"

Najlakši način za promjenu boje fonta u HTML-u je korištenje atributa boja označiti font:

Graditelj web stranica "Nubex"

Ovo postavlja plavu boju za riječ okruženu oznakom font.

Ali osim parametra boje, oznaka ima i druge atribute.

Atributi oznake FONT

Označiti font ima samo tri atributa:

• boja- postavlja boju teksta;
• veličina- postavlja veličinu teksta;
• lice- određuje obitelj fonta.

Parametar boja može se odrediti nazivom boje (npr. "crveno", "plavo", "zeleno") ili heksadecimalnim kodom (npr. #fa8e47).

Atribut veličina može uzeti vrijednosti od 1 do 7 (zadano je 3, što odgovara 13,5 točaka za font Times New Roman). Druga opcija za određivanje atributa je “+1” ili “-1”. To znači da će se veličina promijeniti u odnosu na bazu za 1 više ili manje.

Pogledajmo upotrebu ovih atributa u našem primjeru:

Graditelj web stranica "Nubex"

Stavili smo oznaku font jednom riječju, postavili smo ga na veličinu 6, narančastu boju i obitelj fonta "Serif".

Postavljanje boje teksta pomoću CSS-a

Ako trebate primijeniti određeno oblikovanje (na primjer, promijeniti boju teksta) na nekoliko područja teksta, tada će biti prikladnije koristiti CSS kod. Za to postoji atribut boje. Pogledajmo kako ga koristiti u našem primjeru:

Konstruktor stranice "Nubex"

Ovdje postavljamo plavu boju za riječ "Dizajner" (veličina je prema zadanim postavkama 100% baze), zelenu boju i veličinu od 125% za riječ "sites", narančastu boju i veličinu 150% za riječ “Nubex”.

Osim korištenja standardnih veličina i stilova fonta (fontova), možete definirati fontove za svaki fragment teksta pomoću posebnih oznaka. Najlakši način je korištenje tzv fizički stilovi:

Za svaku fizičku oznaku stila postoji odgovarajuća završna oznaka koja onemogućuje daljnju primjenu stila. Na primjer, za oznaku završna oznaka je.
Ispod je primjer programa i izgled različitih fizičkih stilova:

<НЕАD><ТIТLЕ>Fizički stilovi

<В>Podebljano
Kurziv
Pod stresom
Prekrižen
<ТТ>pisaći stroj
<ВХ1>Podebljani kurziv
<ВХ1><и>Podebljani kurziv podvučen

Riža. 649. Fizički stilovi

Možete umetnuti oznaku fizičkog stila unutar oznake naslova kako biste izmijenili cijeli naslov ili samo njegov dio. Na primjer, za kurziv dio teksta koji je definiran kao naslov, možete koristiti sljedeću konstrukciju:

<НЕАD><ТIТLЕ>Fizički i logički stilovi

<Н2>ovo - modificiran Zaglavlje 2. razine

Riža. 650. Promjena stila fonta dijela naslova

Korištenje posebne oznake Možete prilagoditi font za tekstualne slike: postaviti font, veličinu i boju. Prije svega, možete postaviti veličinu glavnog fonta koji se koristi u dokumentu prema zadanim postavkama. glavna oznaka fonta ima format . Veličina glavnog fonta može se postaviti od 1 do 7. Ako ne koristite ovu oznaku, zadana veličina glavnog fonta postavljena je na 3.
označiti postavlja trenutnu veličinu fonta za pojedinačne fragmente teksta. Ova oznaka ne utječe na stilove. Raspon mogućih vrijednosti je od 1 do 7. Ova oznaka također vam omogućuje da kontrolirate veličinu trenutnog fonta u odnosu na glavni. Da biste to učinili, upotrijebite simbol + (za povećanje) i simbol - (za smanjenje) veličine fonta za određeni iznos. Na primjer, ako je veličina fonta tijela postavljena na 3, tada oznaka postavlja trenutnu veličinu fonta na 5.
Za postavljanje fonta koristite oznaku . Na primjer:

Ako se ova oznaka ne koristi u vašem dokumentu, preglednik će koristiti font postavljen u svojim preferencijama. Stoga tekst na ekranu korisnika može izgledati potpuno drugačije od onoga kako ste ga zamislili. Također biste trebali imati na umu da ako font koji odredite nije instaliran na računalu korisnika, preglednik će prikazati tekst u zadanom fontu.
Možete u oznaci označavaju popis fontova odvojenih zarezima. U tom će slučaju preglednik koristiti prvi pronađeni font. Na primjer, možete napisati oznaku:

FACE="Arial, Sans Serif, Courier">

Obično su slični fontovi navedeni na popisu. Preporuča se dodijeliti najpopularnije fontove. Prilikom postavljanja tekstualnih informacija na stranicu, bolje je uopće ne dodijeliti naziv fonta, oslanjajući se na standardne postavke preglednika. Ali onda, kada dizajnirate stranicu, također biste trebali koristiti standardne postavke preglednika kako biste sinkronizirali svoju percepciju teksta s mogućom percepcijom korisnika. Uostalom, ne stvarate stranicu za sebe, već za svoje čitatelje.
Korištenje atributa COLOR na oznaci možete postaviti boju fonta:

Argument atributa COLOR je heksadecimalni prikaz koda boje (crvene, zelene i plave komponente, tzv. RGB komponente). Sljedeći program demonstrira upravljanje fontovima:

<НЕАD><ТIТLЕ>Instaliranje fontova

<Р>Aria font ABVGDEZZHIK
<Р>Kurirski font ABVGDEZZHIK
<Р>Font SIMBOL ABVGDEZZHIK

Riža. 651. Korištenje različitih fontova

Imajte na umu da u oznaci možete koristiti neke ili sve njegove moguće atribute. Na primjer:

U matematičkim formulama, kao i za fusnote, često se koriste indeksi koji se od glavnog teksta razlikuju po položaju (malo više ili niže) i veličini. Oznake služe ovoj svrsi I odnosno za gornji i donji indeks.

<НЕАD><Т1ТLЕ>Indeksi/NEAD>

<НЗ>Primjer korištenja indeksa
<Р>(5+x ²)^x+3

a ₁+ a ₂+ a ₃
<Р>Bilješke ²

Riža. 832. Korištenje indeksa i indeksa

Uz gore spomenute, postoje dodatne oznake za oblikovanje teksta:

• - izbor e-mail adresa, poštanskih adresa i
  telefonski brojevi;
• <СIТЕ> - isticanje citata;
• , - snimanje programskih tekstova, simboličkih konstanti;
• - unos teksta s tipkovnice.

Posljednja tri stila koriste monospaced font (obično Courier). Na primjer, slova I i Ž u monospace fontu zauzimaju isti prostor. Korištenje monospace fontova je zbog lakoće s kojom se tekst može poravnati pomoću razmaka.
Napomenimo još jednu točku. Oznake kontrole fonta, poput oznaka logičkog stila, mogu uključivati ​​atribut TITLE= "string", koji vam omogućuje da priložite opis alata tekstu unutar ove oznake. Argument atributa TITULA je niz savjeta. Kada prijeđete mišem iznad označene riječi ili izraza, pokraj pokazivača pojavit će se opis alata. Pomoću ove tehnike možete dešifrirati kratice i dati dodatna objašnjenja i preporuke korisniku.