Cum se schimbă fontul în codul html. Cum să faci un font frumos în html: dimensiuni, culori, etichete de font html

Vă permite să evidențiați textul cu caractere cursive, cursive sau invers pentru a crea textul vedere standard. Această proprietate are doar trei semnificații:

  • normal - text standard cu un stil normal, adică nu italic sau italic
  • italic - stil italic
  • oblic - stil oblic
Titlul documentului

Paragraf cu valoarea normală.

Paragraf cu valoare cursiv.

Paragraf cu sensul oblic.

Încercați »

Fonturile italice au fost în mod tradițional versiuni stilizate ale unui font bazat pe caligrafie, în timp ce italicele au fost create prin simpla adaugare ușoară înclinare a simbolurilor. Majoritatea fonturilor nu conțin un set de caractere italice, astfel încât browserul utilizează adesea un algoritm de înclinare pentru caracterele text. Aceasta înseamnă că, în multe cazuri, nu veți vedea o diferență între valorile italice și cele oblice.

Dimensiunea fontului

Modificarea dimensiunii fontului într-un element - cale bună evidențiați-o vizual și acordați-i semnificație, sau invers, arătați asta aceste informații nu ar trebui să atragă o atenție sporită.

Pentru a modifica dimensiunea fontului, utilizați proprietatea font-size. Există mai multe moduri de a specifica dimensiunea fontului, să ne uităm la cele mai comune:

Pixeli

Valorile pixelilor sunt adesea folosite deoarece această abordare oferă un control foarte fin asupra dimensiunii. Valoarea numerică se termină cu caracterele alfabetice px, care trebuie să urmeze imediat numărului (nu trebuie să existe spațiu între număr și px).

Corp (dimensiunea fontului: 14px; )

Interes

Dimensiunea implicită a fontului în browsere este de 16 px. Deci, o valoare de 100% este 16px și 200% este 32px. Dacă definiți o regulă care spune tot textul din interiorul unui element valoarea 75% din dimensiunea implicită (aceasta se va potrivi cu 12px) și apoi definiți o altă regulă care setează valoarea la 75% pentru aceasta element copil, atunci dimensiunea fontului din acest element va fi 9px (adică 75% din 12px).

Corp (dimensiunea fontului: 100%; )

E.M.

Unitatea de măsură em vă permite să modificați dimensiunea fontului în raport cu dimensiunea fontului în element părinte. Deoarece dimensiunea implicită a fontului în browsere este de 16 px, puteți utiliza reguli similare cu cele utilizate pentru valorile procentuale.

Corp (dimensiunea fontului: 14px; ) h2 (dimensiunea fontului: 1.2em; )

În exemplu, setăm elementul dimensiunea fontului este de 14 px și pentru toate elementele

- 1,2 em. Aceasta înseamnă că dimensiunea fontului titlurilor de al doilea nivel va fi scalată cu un factor de 1,2. În cazul nostru, dimensiunea tuturor antetelor

va avea dimensiunea fontului de 1,2 elemente , ceea ce înseamnă de 1,2 ori mai mare decât 14 px și este aproximativ egal cu 17 px. (Dimensiunea reală va fi 16,8, dar majoritatea browserelor o vor rotunji la 17.)

Notă: procentele și ems sunt în esență două moduri diferite de a atinge același obiectiv. Ambele oferă posibilitatea de a seta dimensiunea în raport cu dimensiunea fontului elementului părinte.

Cuvinte cheie

CSS oferă șapte cuvinte cheie care vă permit să atribuiți o dimensiune a fontului în raport cu dimensiunea implicită (16 px): xx-small, x-small, mic, mediu, mare, x-marie și xx-mari.

P (dimensiunea fontului: mic; )

Medium este dimensiunea implicită a fontului în browsere. Valorile rămase reduc sau măresc dimensiunea fontului prin diferiți factori. Cea mai mică dimensiune a fontului, xx-small, este de aproximativ 9 pixeli, fiecare dimensiune ulterioară fiind cu aproximativ 20% mai mare decât cea anterioară:

Titlul documentului

Redimensionați folosind procente.

Redimensionați folosind pixeli.

Redimensionare folosind cuvântul cheie x-small.

Pentru a schimba fontul utilizați o etichetă cu atributul FACE. Puteți specifica fontul după nume (Arial, Tahoma, Verdana) sau tip (de exemplu, monospace). Este recomandabil să enumerați mai multe nume de fonturi pentru a evita situația în care se dovedește că utilizatorul nu are instalat fontul necesar. Recomand să folosiți cel puțin unul dintre fonturile general acceptate (de exemplu Arial). Nu recomand să folosiți mai mult de 2-3 fonturi diferite pe o pagină, altfel pagina va arăta neîndemânatică și neprofesională.

Exemplu:

Modificarea dimensiunii fontului unei pagini html

Pentru a modifica dimensiunea fontului, utilizați atributul SIZE. Cu cât fontul este mai mare, cu atât textul devine mai ușor de citit. Cu toate acestea, fontul mic vă permite să încadrați mai multe informații în ecran. Folosind acest atribut cu o etichetă , puteți modifica dimensiunea textului întregii pagini web. Folosind atributul SIZE împreună cu o etichetă , puteți influența aspectul unei singure bucăți de text. 7 dimensiuni de font disponibile. Cel mai mic este desemnat cu numărul 1, iar cel mai mare cu 7.

Puteți schimba fontul folosind etichete Şi . mărește fontul fragmentului specificat în raport cu textul anterior și , în consecință, reduce.

Schimbând dimensiunea literelor individuale, puteți obține efecte interesante. De exemplu, în acest fel puteți obține un drop cap - o literă mare mare la începutul unui paragraf.

Exemplu:

Selectarea culorii fontului unei pagini html

Afișarea unor porțiuni din textul unei pagini Web în fonturi colorate diferite o face mai atractivă.

Utilizarea atributului TEXT în contextul unei etichete , puteți schimba întreaga culoare a textului unei pagini web. Aplicarea atributului COLOR cu o etichetă (are o prioritate mai mare) vă permite să interacționați cu aspectul unei singure bucăți de text.

Pentru a schimba culoarea textului, trebuie să cunoașteți numele culorii sau codul hexazecimal al acesteia. Codul este format din simbolul lire sterline # și un număr care reprezintă intensitatea componentelor roșii, verzi și albastre ale culorii. Numai 16 culori standard pot fi menționate prin nume.

Denumirea culorilor Cod aqua ##00FFFF negru ##000000 albastru ##0000FF fuchsia ##FF00FF gri ##808080 verde ##008000 lime ##00FF00 maroon ##800000 bleumarin ##000080 olive ##80808008 ##808008008 #FF0000 argintiu ##C0C0C0 teal ##008080 alb ##FFFFFF galben ##FFFF00

Aspectul site-ului de înaltă calitate are scopul principal de a face informațiile de pe pagină cât mai lizibile și mai convenabile pentru utilizator. Și lucrul cu text folosind html este abilitate principală și de bază pe care trebuie să o ai atunci când lucrezi cu site-uri web. Acest articol detaliază cum să schimbați dimensiunea textului utilizând limbajul de marcare web.

Formatați textul folosind HTML - este foarte ușor

Oricine a întâmpinat măcar o dată nevoia de a crea sau edita site-uri web, primul lucru pe care l-a întrebat a fost cum să formateze textul astfel încât să îndeplinească cerințele dorite. Există multe modalități de a realiza această sarcină, iar cea mai simplă modalitate este de a o face direct în cadrul site-ului însuși, folosind limbajul de marcare. Odată ce vă dați seama cum să schimbați dimensiunea fontului în HTML, nu va prezenta dificultăți în viitor.

În acest material vom vorbi în detaliu despre modul în care fonturile sunt formatate în documentele HTML.

Principii generale pentru editarea textului pe paginile web

În primul rând, trebuie să înțelegem ce posibilități ne oferă html pentru formatarea textului. Există trei caracteristici principale ale unui font - acesta este caracterul (caracteristica care determină aspect litere și semne), culoare și dimensiune. Lizibilitatea oricărui document depinde de cât de bine sunt combinate aceste caracteristici.

Caracteristicile textului din marcajul HTML sunt modificate folosind etichete și atribute. O etichetă este componenta principală a limbajului, unitatea sa logică principală, iar atributul este utilizat pentru a seta o valoare specifică pentru fiecare element de pagină marcat cu eticheta.

De asemenea, rețineți că afișarea textului poate varia atunci când este utilizat. browsere diferite, prin urmare, înainte de a finaliza munca pe site, trebuie să vă asigurați că informațiile sunt afișate corect în toate browserele majore utilizate. De exemplu, dimensiunea fontului în html atunci când utilizați versiuni mai vechi Internet Explorer poate diferi în comparație cu versiunile mai noi.

Etichetă

Principalele etichete care sunt folosite la formatarea textului pe o pagină web sunt Şi .

Etichetă asociată este responsabil pentru toate caracteristicile textului formatat, care sunt specificate folosind atributele corespunzătoare. Această etichetă este cea mai ușor de înțeles și mai convenabil de utilizat atunci când așezați pagini.

Deoarece ne interesează în primul rând cum să schimbăm dimensiunea fontului în html, va trebui să folosim atributul size.

Arata cam asa:

Textul merge aici

Valoarea mărimii fontului html este specificată în unități numerice de la 1 (cel mai mic) la 7 (cel mai mare). Valoarea medie este considerată în mod tradițional 3 (corespunzând mărimii 13,5 în tipul de caractere Times New Roman).

În consecință, dacă adăugați următorul cod în corpul documentului, atunci când deschideți pagina în browser, veți vedea cum se modifică dimensiunea textului în funcție de valoarea setată.

Dimensiunea fontului 1

Dimensiunea fontului 2

Dimensiunea fontului 3

Dimensiunea fontului 4

Dimensiunea fontului 5

Dimensiunea fontului 6

Dimensiunea fontului 7

Pe lângă valorile numerice absolute, pot fi folosite și cele relative. Această etichetă este folosită și pentru aceasta. Dimensiunea fontului html, așa cum s-a menționat mai sus, este setată implicit la 3, prin urmare, pe baza acestui lucru, puteți adăuga sau scădea numere întregi valori numerice pentru a obține rezultatul dorit. Cam asa arata:

Textul merge aici

Cu valoarea specificată, dimensiunea fontului va corespunde valorii 6. Puteți verifica în browser cum funcționează acest lucru și puteți experimenta diverse combinatii valori numerice.

Folosind o etichetă Puteți modifica dimensiunea și culoarea fontului în html. Pentru a schimba culoarea, utilizați atribut de culoareŞi cod hexazecimal culorile.

A depune modificările necesare atributele se succed în ordine în corpul unei etichete , nu este nevoie să le separați cu semne de punctuație.

Etichetă

Această etichetă are o gamă mai largă de capabilități și caracteristici decât . De obicei, este folosit împreună cu CSS pentru a edita și a stila anumite părți ale unui document.

Pentru această etichetă, valorile sunt setate folosind atributul stil. Iată cum arată în cod:

Textul merge aici

După cum puteți vedea, aici este folosit codul CSS (dimensiunea fontului), iar dimensiunea este setată folosind puncte (pt, point). Valoarea standard este 12pt, care poate fi modificată prin creșterea sau descreșterea cu un număr întreg.

Modificarea dimensiunii fontului la formatarea titlurilor

Adesea trebuie să reduceți sau să măriți dimensiunea fontului în html atunci când editați titlurile. ÎN în acest caz, Sarcina nu este doar de a schimba dimensiunea, ci și de a selecta în mod logic o anumită parte a textului și de a o atribui ca titlu pentru blocul de text.

În acest caz, este recomandabil să folosiți etichete

. Etichetă

- Acesta este primul nivel. Acesta va fi afișat cel mai mare în browser și va fi etichetat de la

la

folosit pentru a evidenția subtitluri.

Antet de primul nivel

Parametrii specifici pentru această etichetă sunt setați folosind CSS - în acest fel puteți seta o anumită dimensiune a textului, culoare și font.

Deci, ne-am uitat la principalele modalități de a schimba dimensiunea fontului în html. Aceste informații sunt suficiente pentru a crea o pagină web cu aspect curat, ușor de citit.

Pentru comoditate, luați notă de următoarele recomandări:

  • Când proiectați, nu ar trebui să vă limitați la HTML. Odată ce ați stăpânit elementele de bază ale construirii unui site web, puteți începe să învățați CSS. Acest lucru va deschide noi orizonturi în crearea de pagini web.
  • Testarea site-ului web finalizat în diferite browsere și pe diferite platforme nu trebuie neglijată. După cum s-a menționat mai sus, parametrii textului pot diferi semnificativ, mai ales când se utilizează versiuni învechite ale browserelor.
  • Ar trebui să folosiți întotdeauna spații și file atunci când scrieți cod. Acest lucru face mai ușor de citit și de înțeles.
  • Comentariile la cod nu sunt doar un instrument de înțelegere ușoară, ci și un semn al bunelor maniere în rândul dezvoltatorilor.

Cum se schimbă dimensiunea fontului în HTML pe un site web.

Viața noastră constă în lucruri mici de zi cu zi care ne afectează într-un fel sau altul bunăstarea, starea de spirit și productivitatea. Nu am dormit suficient - mă doare capul; Am băut cafea pentru a îmbunătăți situația și a mă înveseli – dar am devenit iritabil. Chiar vreau să prevăd totul, dar pur și simplu nu pot. În plus, toată lumea din jur, ca de obicei, oferă sfaturi: gluten în pâine - nu vă apropiați de el, vă va ucide; Un baton de ciocolată în buzunar este o cale directă către pierderea dinților. Colectăm cele mai populare întrebări despre sănătate, nutriție, boli și oferim răspunsuri la ele care vă vor permite să înțelegeți mai bine ce este bun pentru sănătatea dumneavoastră.

Cum se schimbă fontul?

Atunci când creați un site web, este întotdeauna necesar să schimbați fontul textului pentru o varietate de părți și elemente ale paginilor HTML, deoarece acest lucru nu numai că adaugă unicitate și stil site-ului, ci și îmbunătățește calitatea percepției informațiilor. În HTML există etichete speciale pentru asta, despre ele vom vorbi în această lecție, care va fi una dintre cele mai mari din acest tutorial. Dar, așa cum v-am spus mai devreme, nu încercați să memorați totul pe de rost, nu, principalul lucru este să vă dați seama și să înțelegeți ce se discută în fiecare etapă a lecției.

Schimbarea stilurilor de font

Există mai multe modalități de a schimba stilurile de scriere a fonturilor în HTML și veți vedea în curând acest lucru. Acum să ne uităm la câteva etichete noi:

...Şi ...- evidențiați textul îndrăzneţ font.

...Şi ...- evidențiați textul cursive.

...- afișează textul în superscript, de exemplu E = mc 2 .

...- afișează text în indice, de exemplu H2SO4.

Toate aceste etichete sunt încorporat (inline, la nivel de linie), adică nu creează întreruperi de linie înainte și după sine, ci sunt situate pe o singură linie. De asemenea, pot conține doar elemente încorporate, astfel încât acestea pot fi imbricate liber unul în celălalt. Cel mai important lucru este să nu uiți de cuibărirea corectă: o etichetă care este deschisă mai devreme trebuie închisă mai târziu.

Cred că ați observat că există două etichete fiecare pentru bold și italic. Cert este că browserele obișnuite afișează conținutul acestor etichete în același mod, dar browserele non-vizuale (voce) pot accentua în special textul din interior. Şi . Prin urmare, dacă doriți să evidențiați câteva cuvinte sau expresii pentru a atrage cititorul, atunci este mai bine să utilizați aceste etichete, deși, conform în general, nu există nicio diferență.

Puteți întreba: „Dar etichetele de mai sus sunt într-adevăr tot ceea ce poate fi folosit pentru a evidenția textul în HTML?” Bineînțeles că nu! Există și etichete Şi , subliniind textul, precum și eticheta , afișând textul barat. Dar, vedeți, aceste etichete sunt învechite în HTML și, ca și atributul align, este posibil ca browserele să nu le mai înțeleagă în curând. Prin urmare, vă voi arăta o altă metodă pe care o puteți folosi fără teamă. Și constă în folosirea atributului de stil, și este permis să îl specificați în interiorul oricăror etichete. Sintaxa generală este următoarea:

<тег stil= "decor text:subliniat" >... - subliniază textul.

<тег stil= "decorație text:overline" >... - subliniază textul.

<тег stil= „text-decoration:line-through”>... - taie textul.

Exemplu de schimbare a stilurilor de font

Schimbarea stilurilor de font

Tipare aldine. Cursive.

cursiv aldine.

H 2 AŞA 4- formula acidului sulfuric scrisă cu caractere cursive.

Paragraf subliniat din text.

Text simplu, tăiat îndrăzneț.

Rezultat în browser

Acum aș dori să fac o clarificare despre atributul stilului. Style este un atribut de etichetă complet obișnuit, dar se referă la Cascading Style Sheets (CSS). În trecutul îndepărtat, toate funcțiile de structurare a paginii HTML în ansamblu și de prezentare externă a fiecărui element separat (culoare, formă, poziție pe pagină etc.) au fost preluate de către limbaj HTML. Dar apoi dezvoltatorii de limbaj au decis să separe aceste funcții și au creat CSS. În consecință, multe etichete sau atribute de etichetă au devenit învechite. Prin urmare, pentru a nu te deranja informatii inutile, V acest manual Le-am înlocuit și cu stiluri, adică atributul stil. Sintaxa sa generală este următoarea:

<тег stil= „Proprietate CSS: valoare”>...

Folosind stilul nu vei pierde absolut nimic, dar vei invata sa scrii HTML competent, iar ca bonus, vei stapani si putin CSS.

Etichetă sau ce să faci când nu există etichete necesare

Ei bine, totul este clar până acum? Bine, atunci o întrebare. Ce veți face dacă, de exemplu, trebuie să tăiați nu întregul paragraf, ci doar jumătate din text și să nu îl puneți îngroșat sau italic? Ei bine, nu vă faceți griji, o etichetă foarte convenabilă și necesară vă va ajuta aici.

Deci, faceți cunoștință cu -... . Această etichetă este, de asemenea încorporat (inline, la nivel de linie)și poate conține orice etichete încorporate, dar acesta nu este principalul lucru. Pe cont propriu , fără atribute, nu adaugă nicio modificare nici textului, nici etichetelor din interiorul acestuia. Și a fost creat special pentru stiluri, adică, în esență, pentru atributul stil. Este datorită acestui atribut, sau mai bine zis sensuri diferite, y apar anumite proprietăți. Gata, acum să studiem un exemplu.

Exemplu de utilizare a etichetei SPAN

Folosind eticheta SPAN

Text simplu, fără modificări.

Text mai obișnuit. Stresat. Barat.

Rezultat în browser

Text simplu, fără modificări.

Text mai obișnuit. Stresat.

Barat.

Schimbarea numelui (tipului) fontului Nu știi ce este numele unui font? Cu siguranță mulți dintre voi au introdus cel puțin o dată text Microsoft Word sau OpenOffice Writer

și am văzut acest meniu:

Acestea sunt numele fonturilor care sunt disponibile pe computer și sunt folosite nu numai de Word sau Writer, ci și de multe alte aplicații, inclusiv browsere. Numele (fontul) unui font determină designul acestuia în sine, care distinge un font de altul.

Nu recomand cu tărie să utilizați fonturi exotice, deoarece este posibil să nu fie pe computerul persoanei care vă vizitează site-ul, iar apoi, în loc de litere, va vedea diferite simboluri sau pătrate de neînțeles. Iată o listă cu cele mai comune fonturi pe care aproape fiecare utilizator le are pe computer: În mod implicit, aproape toate browserele folosesc fontul „Times New Roman”, iar pentru a-l schimba se folosește același atribut de stil , care poate fi aplicatîn interiorul oricărei etichete

<тег stil= . Sintaxa generală pentru specificare este:>...

„font-family:nume font, familie” Dacă numele fontului constă din mai multe cuvinte, atunci trebuie să fie închis ghilimele simple

. Este permis să specificați nu unul, ci mai multe nume de fonturi separate prin virgule, iar apoi, dacă primul font nu este pe computer, va fi folosit al doilea, al treilea etc. Dar la final, asigurați-vă că puneți numele întregii familii de fonturi, în acest caz, dacă browserul nu detectează un singur font, va folosi fontul care este cel mai potrivit pentru această familie. Pentru a schimba fontul pe întreaga pagină, trebuie doar să specificați atributul de stil în etichetă . Și dacă trebuie să schimbați fontul pentru o parte separată a textului, atunci includeți-l într-o etichetă

și aplicați-i atributul.

Exemplu de schimbare a numelor fonturilor

Schimbarea numelor fonturilor

Acesta este un font Arial, dacă nu este acolo, atunci Verdana, iar dacă nu este acolo, atunci orice alt sans-serif.

Acesta este Comic Sans MS sau orice cursive. Acesta este din nou Arial, Verdana sau orice sans-serif.

Rezultat în browser

Și acesta este Courier sau orice monospace. Ei bine, ți-ai dat seama de exemplu? Voi face o clarificare, a cărei înțelegere îți va face viața mult mai ușoară în viitor, deși cred că mulți au ghicit deja. Deci, dacă etichetele sunt imbricate unele în altele și mai multe dintre ele efectuați modificări de același tip (de exemplu, schimbă numele fontului), apoi etichetele descendente înlocuiesc proprietățile etichetelor strămoși. Dacă se implementează etichetele imbricate diverse modificări

, apoi se completează reciproc, atât.

Limbajul HTML este limitat la doar șapte dimensiuni de font, ceea ce, vedeți, este foarte mic pentru un site web bun. De aceea, toată lumea folosește CSS pentru redimensionare de mult timp, iar acum îl vei învăța și tu.

Există aproximativ zece unități de măsură în CSS, dar ne vom uita doar la cele trei cele mai populare - puncte (pt), pixeli (px) și procente (%). Aşa:

  • pct- Puncte. Un punct este egal cu 1/72 de inch, iar un inch este de 2,54 cm. Prin urmare, 1pt = 0,03527778cm. Acest valoare absolută, deoarece dimensiunea specificată în puncte nu depinde de nimic.
  • px- Pixeli. Măsurat în pixeli monitorului computerului. Un pixel este cel mai mic punct de pe monitor și este o valoare relativă, deoarece dimensiunea lui depinde de rezoluția curentă ecran și dimensiunea monitorului în sine.
  • % - Interes. Se calculează ca procent, unde 100% este luat ca valoare a etichetei părinte, iar dacă nu este specificată, atunci valoarea implicită în browser. Și asta valoare relativă, deoarece dimensiunea fontului părinte poate fi complet diferită, iar utilizatorii pot schimba liber dimensiunea fontului în browser.

Pentru a specifica dimensiunea fontului, se folosește și poate fi specificat atributul de stil , care poate fi aplicat. Sintaxa generală este:

<тег style="font-size:size">...

Ca și în cazul numelor fonturilor, pentru a modifica dimensiunea fontului pe întreaga pagină, trebuie doar să specificați atributul de stil în etichetă . Și dacă trebuie să schimbați fontul pentru o bucată de text, atunci includeți-l într-o etichetă . Și dacă trebuie să schimbați fontul pentru o parte separată a textului, atunci includeți-l într-o etichetă

Exemplu de modificare a dimensiunilor fontului

Modificarea dimensiunii fontului

Această dimensiune a fontului este de 90% din dimensiunea implicită a browserului.

Această dimensiune este de 90% din dimensiunea etichetei BODY.

Dimensiunea fontului titlului este de 120% din dimensiunea BODY.

Aceasta este din nou 90% din dimensiunea implicită din browser. Această dimensiune a fontului este de 15 puncte.

Rezultat în browser

Această dimensiune a fontului este de 90% din dimensiunea implicită a browserului.

Această dimensiune este de 90% din mărimea CORPULUI.

Dimensiunea fontului titlului este de 120% din dimensiunea BODY.

Aceasta este din nou 90% din dimensiunea implicită din browser. Această dimensiune a fontului este de 15 puncte.

Mărimea unui font depinde nu numai de indicația sa explicită, ci și de numele acestuia (tip de caractere) - diferite fonturi pot avea înălțimi și lățimi complet diferite ale literelor, precum și spațierea dintre litere.

Mai multe despre atributul stilului

Este timpul să vă spun un alt secret al acestui atribut minunat, dar din nou vă voi pune mai întâi o întrebare. Ce ați face dacă ar trebui să setați un paragraf întreg la un nume de font Arial cu o dimensiune de 80%? Și îți spun, ai scrie așa ceva:

Textul paragrafului.

Textul paragrafului.

Sau chiar așa.

Textul paragrafului.

am dreptate? Ei bine, dacă primele două opțiuni sunt corecte în principiu, atunci ultima este în general o eroare, deoarece, dacă vă amintiți, o etichetă nu poate avea două atribute identice. Acum este timpul să ne amintim că stilul nu este doar un atribut, ci un atribut CSS. Uită-te la asta:

Textul paragrafului.

Mult mai ușor, nu? Cel mai important lucru este să nu uitați să puneți punct și virgulă (;) între stilurile adiacente și să luați toată această „economie” în ghilimele duble(" "), altfel va fi aplicat doar primul stil, iar browserul va ignora restul. Ei bine, punem întotdeauna ghilimele duble, nu?

Așadar, această lecție s-a dovedit a fi foarte intensă, așa că fă-o teme pentru acasăși odihnește-te puțin.

Teme pentru acasă.

  1. Creați un titlu pentru articol și cele două secțiuni ale acestuia, dar subliniați și titlurile secțiunilor.
  2. Asigurați-vă că, atunci când treceți mouse-ul peste titlul unui articol, apare o legendă corespunzătoare.
  3. Scrieți un paragraf la începutul articolului și două în fiecare secțiune.
  4. Setați întreaga pagină la fontul Arial la 90% din dimensiunea implicită a browserului.
  5. Setați toate titlurile la fontul Times și setați titlul articolului la 150% dimensiunea fontului și subtitlurile la 120%.
  6. Evidențiați două cuvinte în primul paragraf cu aldine iar unul cu caractere cursive. În al doilea - o frază de mai multe cuvinte cursiv aldine. În al treilea, subliniați fraza cu caractere cursive. În a patra, tăiați jumătate din frază cu caractere aldine.
  7. Scrieți formula alcoolului în ultimul paragraf: C 2 H 5 OH.

Cu toții am folosit renumitul editor Text cuvânt. Și știm că este foarte ușor să schimbi fontul, dimensiunea și culoarea textului. Deci, în html puteți seta și acești parametri fără prea multe dificultăți. Există o etichetă pentru asta . Este împerecheat și, prin urmare, are o etichetă de închidere, deoarece browserul trebuie să înțeleagă unde se află începutul și sfârșitul textului pentru care modificăm parametrii. Etichetă are trei atribute: față, dimensiune și culoare, care specifică fontul, dimensiunea și respectiv culoarea textului. În acest tutorial vom arunca o privire mai atentă asupra fonturilor.

La schimba fontul textului în html– fișier, trebuie să includem textul în etichete Şiși asigurați-vă că aplicați atributul feței. Arata cam asa:

textul nostru



Numele fonturilor pot fi găsite în Editor de cuvinte. Există o listă destul de lungă. Să luăm un exemplu despre cum să schimbați fontul textului în html și să scriem următorul cod:

Lecția 4. Fonturi în html

Acest text va fi scris cu fontul implicit

Acest text va fi scris cu fontul Batang

Acest text va fi scris cu font Comics Sans MS

Să salvăm fișierul sub orice nume și să vedem ce se întâmplă:

După cum vedem, totul a funcționat: primul paragraf are fontul implicit, în al doilea paragraf setăm fontul Batang, iar în al treilea textul este afișat în fontul Comic Sans MS. În principiu, totul este ușor și de înțeles, dar există o singură remarcă. Deoarece fontul specificat nu este salvat în fișierul HTML, nu există nicio garanție că va fi afișat așa cum era de așteptat în browser. Nu putem fi 100% siguri că computerul vizitatorului are fontul pe care l-am specificat, mai ales dacă acest font nu este standard. Prin urmare, în atribut fata este mai buna indicați aproximativ trei nume de fonturi, care sunt enumerate separate prin virgule, astfel încât cel puțin unul dintre ele să fie afișat cu siguranță. Să ne uităm la un exemplu:

Lecția 4. Fonturi în html

Acest text ar trebui să apară în Batang sau Comic Sans MS, sau cu siguranță în Arial.

Să ne uităm la rezultat:


Textul a fost afișat în fontul Batang, pe care l-am specificat mai întâi în atributul face. Dacă acest font nu funcționează în browserul vizitatorului, atunci al doilea font va funcționa - Comic Sans MS, iar dacă acest font nu funcționează, atunci textul va fi afișat cu siguranță în font Arial.

Alte opțiuni de font

Și pentru început, să ne uităm la alte opțiuni de font. În prima lecție, ne-am uitat deja la etichetele care stabilesc caractere aldine și cursive, acestea sunt etichete Şi respectiv. Să ne uităm la câteva etichete care stabilesc stilul fontului:

Lecția 4. Alte opțiuni de font

Să subliniem textul
Să tăiem această parte
și setați indicele pentru cuvânt top

Sa vedem rezultatul:


Am setat întregul text la fontul Comic Sans MS, prima linie a fost subliniată folosind eticheta , amintiți-vă de la prima lecție că eticheta
transferuri către linie nouă, a doua linie este tăiată datorită etichetei si in ultima linie Am stabilit cuvântul „top” în superscript. Nimic complicat! Puteți experimenta singur cu restul etichetelor. Dacă totul este clar pentru tine, poți trece la următoarea lecție, în care ne vom uita la modul de setare a dimensiunii textului, dar dacă mai ai întrebări, aruncă o privire video detaliat această lecție.