Cum să faci un font frumos în html: dimensiuni, culori, etichete de font html. Evidențierea HTML: evidențiați textul cu aldine, cursive și culoare

Există trei moduri de a evidenția textul cu caractere aldine pe o pagină HTML, dar nu vă grăbiți să utilizați imediat pe oricare vă place, deoarece o astfel de evidențiere poate avea semnificații diferite și poate afecta optimizarea site-ului pentru motorul de căutare.

Font aldine cu etichetă puternică

Această metodă este potrivită dacă doriți să evidențiați o parte importantă a textului cu caractere aldine. Eticheta HTML este o etichetă de formatare logică și esența sa este de a „sublinia” importanța fragmentului selectat.

Există și alte etichete de formatare logică în HTML. De exemplu, o etichetă face textul italic și indică accentul pe fraza evidențiată.

Alte tipuri de selecție de text sunt descrise în articol:.

Text simplu a evidențiat o parte importantă de text. Text simplu.

Text îngroșat folosind eticheta b

Text simplu text cu caractere aldine. Text simplu.

Stiluri CSS aldine

Textul aldine poate fi creat nu numai folosind etichete HTML speciale. Puteți obține rezultate îngroșate pe orice etichetă setând proprietatea font-weight: bold; (nu funcționează pentru toate fonturile).

O astfel de evidențiere va fi de natură stilistică, fără a adăuga greutate logică textului selectat.

În plus, puteți selecta fie o etichetă specifică, fie un grup de elemente simultan, setând stiluri printr-o clasă CSS.

Proprietatea CSS din atributul style:

Text cu caractere aldine.

Text cu caractere aldine.

Text în font normal.

Text cu caractere aldine.

Ce să faci dacă nu poți face textul aldine?

Dacă nu puteți face textul aldine, este posibil ca stilurile CSS ale elementelor să fie înlocuite pe site-ul dvs. În acest caz, va trebui să ajustați aceste stiluri. În cele mai multe cazuri, acest lucru se va face prin fișierul principal al foii de stil CSS. Dacă nu înțelegeți acest lucru, contactați webmasterul. Cu un grad ridicat de probabilitate, rezolvarea acestei probleme va necesita nu mai mult de 5 minute de lucru (deși, desigur, pot exista și excepții).

Sublinierea textului cu multe informații este o idee bună. La urma urmei, este posibil ca cititorul să nu observe informațiile necesare, importante sau alte informații pe care doriți să le transmiteți. De exemplu, subliniez și textul: evidențiez etichetele, stilurile, atributele, cuvintele cheie, linkurile etc. cu culoarea mea, dar fac asta folosind stiluri. HTML oferă elemente de evidențiere a textului standard: aldine, oblice, subliniate, barate, mai mari, mai mici. Să trecem peste toate elementele de accent.

Miniatură

Fontul aldin bine-cunoscut care poate fi văzut peste tot. În acest scop, au fost dezvoltate două etichete Și . Etichetă , mai frecvente. Aceste etichete nu sunt aceleași, deși rezultatul este similar. Diferența este că eticheta determină îndrăzneala fizică a textului și eticheta determină importanța acestui text și îl evidențiază cu caractere aldine. Dar, un mare „dar”, în browserele moderne drepturile lor au fost „egalizate”, au devenit egale (echivalente). Aceeași situație se aplică etichetelor. Și . Prin urmare, este mai benefic să folosiți o etichetă mai scurtă. Mai jos este un exemplu:

Miniatură

Text italic

Etichetele sunt responsabile pentru accentuarea în cursive Și . După cum sa menționat mai sus, acestea sunt diferite în ceea ce privește concentrarea, dar sunt echivalente în browserele moderne. Mai jos este un exemplu:

Text subliniat

Puteți sublinia textul cu un font subliniat folosind o etichetă . Această etichetă este condamnată de specificația HTML și recomandată utilizarea stilurilor, cu care sunt de acord. Voi fi sigur că scriu echivalentele CSS ale etichetelor de accent. Mai jos este un exemplu:

Text subliniat

Text barat

Pentru a elimina textul, utilizați două etichete echivalente: Și . Aceste două etichete sunt descurajate și se recomandă utilizarea stilurilor. O etichetă este strict interzisă în HTML5. Mai jos este un exemplu:

Text barat

Mai mare și mai mic decât textul obișnuit

Puteți sublinia textul mărind dimensiunea textului. Există o etichetă pentru asta . Pentru a face textul mai mic decât de obicei, utilizați eticheta . Dar este totuși benefic să folosiți întotdeauna stiluri CSS. Mai jos este un exemplu:

Text mai mare

Înlocuirea textului aldine cu stiluri CSS

Există o astfel de proprietate în CSS - grosimea fontului. El capătă multe semnificații: grosimea fontului:bold|bolder|lighter|normal|100|200|300|400|500|600|700|800|900 . Pentru a face textul cel mai aldine, trebuie să utilizați valoarea grosimea fontului: 900. Vom vorbi mai mult despre asta în lecțiile următoare.

Înlocuirea textului italic cu stiluri CSS

Există un analog cu eticheta în CSS (Text italic). Aceasta este proprietatea stilului fontului. Mai jos este un exemplu:

eu (
font-style: italic;
}

Înlocuirea textului subliniat cu stiluri CSS

Etichetă este depreciat de specificația HTML și sunt recomandate stilurile. Un analog poate fi proprietatea text-decor. O folosesc de obicei pentru a elimina sublinierea din link-uri (valoare nicio valoare), dar în acest caz trebuie să adăugăm o subliniere (subliniere valoare). Mai jos este un exemplu:

Text subliniat

U (
text-decor: subliniere;

27.11.14 88.7K

În html, dimensiunea fontului joacă un rol important. Vă permite să atrageți atenția utilizatorului asupra informațiilor importante postate pe pagina site-ului. Deși nu numai dimensiunea literelor este importantă, ci și culoarea, grosimea și chiar familia lor.

Etichete și atribute atunci când lucrați cu fonturi html

Limbajul hipertext are o gamă largă de instrumente pentru lucrul cu fonturile. La urma urmei, formatarea textului este sarcina principală a html.

Motivul creării limbajului HTML a fost problema afișării regulilor de formatare a textului în browsere.


Să ne uităm la etichetele care sunt folosite pentru a lucra cu fonturile în HTML și la atributele acestora. Principala este eticheta . Folosind valorile atributelor sale, puteți seta mai multe caracteristici ale fontului:
  • culoare – setează culoarea textului;
  • dimensiune – dimensiunea fontului în unități convenționale.

Sunt acceptate valorile atributelor pozitive de la 1 la 7.

  • față – folosit pentru a seta familia de fonturi de text care va fi folosită în interiorul etichetei . Sunt acceptate mai multe valori, separate prin virgule.

Doar textul care se află între părțile etichetei de font asociate este formatat. Restul textului este afișat în fontul standard standard.


De asemenea, în html există o serie de etichete împerecheate care specifică o singură regulă de formatare. Acestea includ:
  • — setează fontul aldine în html. Etichetă similar în acțiune cu cel precedent;
  • — dimensiunea este mai mare decât cea implicită;
  • — dimensiune mai mică a fontului;
  • — text italic (italic). Etichetă similară ;
  • — text cu subliniere;
  • - tăiat;
  • — afișarea textului numai cu litere mici;
  • - cu litere mari.

Text simplu

Miniatură

Miniatură

Mai mult decât de obicei

Mai puțin decât de obicei

Cursive

Cursive

Cu subliniere

Barat

Capacitățile atributelor de stil

Pe lângă etichetele descrise, există mai multe modalități de a schimba fontul în html. Una dintre ele este utilizarea atributului stil generic. Folosind valorile proprietăților sale, puteți seta stilul de afișare a fontului:

1) font-family – proprietatea setează familia de fonturi. Este posibil să enumerați mai multe valori.
Schimbarea fontului în html la următoarea valoare va avea loc dacă familia anterioară nu este instalată pe sistemul de operare al utilizatorului.

Sintaxa de scriere:

familia-font: font-name [, font-name[, ...]]

2) dimensiunea fontului – dimensiunea este setată de la 1 la 7. Acesta este unul dintre modalitățile principale prin care puteți crește fontul în HTML.
Sintaxa de scriere:

font-size: dimensiune absolută | dimensiune relativă | sens | interes | moşteni

De asemenea, puteți seta dimensiunea fontului:

  • În pixeli;
  • În termeni absoluti ( xx-mic, x-mic, mic, mediu, mare);
  • În procente;
  • În puncte (pt).

Dimensiunea fontului: 7

Dimensiunea fontului: 24px

Dimensiunea fontului: x-mari

Dimensiunea fontului: 200%

Dimensiunea fontului: 24 pt


3) font-style – setează stilul de scriere a fontului. Sintaxă:

stil font: normal | cursiv | oblic | moşteni

Valori:

  • normal – ortografie normală;
  • italic – italic;
  • oblic – font înclinat spre dreapta;
  • moștenește – moștenește ortografia elementului părinte.

Un exemplu despre cum să schimbați fontul în html folosind această proprietate:

font-style:moștenire

stil font: cursiv

stil font: normal

stil font: oblic


4) font-variant – convertește toate majusculele în majuscule. Sintaxă:

font-variant: normal | cu majuscule mici | moşteni

Un exemplu despre cum să schimbați fontul în html cu această proprietate:

font-variant:moștenire

font-variant:normal

font-variant:small-caps


5) font-weight – vă permite să setați grosimea textului (saturație). Sintaxă:

greutate font: bold|bolder|lighter|normal|100|200|300|400|500|600|700|800|900

Valori:

  • bold – setează fontul html la bold;
  • bolder – mai îndrăzneț față de normal;
  • mai ușoară – mai puțin saturată față de normal;
  • normal – ortografie normală;
  • 100-900 – setează grosimea fontului în echivalent numeric.

greutate font: bold

greutatea fontului: mai îndrăzneață

greutate font: mai ușor

greutate font: normal

greutate font: 900

greutate font: 100

proprietatea fontului html și culoarea fontului

Fontul este o altă proprietate a containerului. În interiorul său, a combinat valorile mai multor proprietăți destinate schimbării fonturilor. sintaxa fontului:

font: font-size font-family | moşteni

Valoarea poate fi setată și la fonturile utilizate de sistem în etichetele de pe diferite controale:

  • legenda – pentru butoane;
  • pictogramă – pentru icoane;
  • meniu - meniu;
  • mesaj-box – pentru casete de dialog;
  • small-caption – pentru controale mici;
  • status-bar – font bara de stare.

font:pictogramă

font:legendă

font:meniu

font: caseta de mesaje

subtitrări mici

font:bara de stare

font: italic 50px bold „Times New Roman”, Times, serif

Salutări vouă, celor cărora le place să demonteze ceva nou și să-și completeze cufărul de cunoștințe cu informații noi! După ce ai citit articolul, vei învăța cum să faci text aldine în html, ce alte tipuri de stiluri există și ce elemente sunt responsabile pentru acest lucru. Drept urmare, site-ul dvs. se va putea lăuda cu text care poate fi citit cu puncte cheie evidențiate corect.

În articolele anterioare, am vorbit mult despre atributele și etichetele limbajelor web, despre metodele de proiectare a aspectului și , dar nu am atins niciodată un anumit obiect fără de care nici un site nu poate trăi. Acesta este text.

Și nu doar un set continuu de litere, ci inteligent împărțit în paragrafe, evidențiind cuvinte cheie, citate, link-uri etc. În acest scop, limbajele CSS oferă instrumente speciale de stil. Să începem!

Opțiuni de stil în html

Fontul conținutului textului poate fi întotdeauna modificat. De exemplu, îl puteți seta pe aldine sau cursive și îl puteți decora. Pentru aceasta, există etichete simple care sunt foarte ușor de reținut și apoi aplicate. Mai jos este un tabel cu elemente care explică scopul lor.

Mai întâi, să ne uităm la elementele de text aldine.

Pentru a crește grosimea literelor, există etichete asociate, cum ar fi Și . Utilizarea acestor instrumente apare la fel, deoarece formatează textul cu caractere aldine. Cu toate acestea, scopul lor este diferit. Prin urmare, ele nu pot fi numite echivalente și doar una dintre ele nu poate fi utilizată.

Da, etichetă a fost creat cu condiția de a schimba fontul standard într-unul bogat și îngroșat. Se referă la aspectul fizic al conturului și nu poartă nicio încărcătură semantică. Deci, să presupunem că acesta este doar un tip de afișaj de testare.

A conceput pentru a concentra atenția asupra unui punct cheie. Acesta este un element logic care ar ieși în evidență prin intonație în timpul unei conversații.

Acum să ne uităm la etichete precum Și .

Ele formatează fontul standard în cursiv. Cred că veți pune o întrebare logică: „Și aceste elemente diferă și unele de altele pe baza principiului etichetelor Și ?. Întrebarea este corectă. Și ai dreptate!

Într-adevăr, unitatea limbajului de marcare este conceput pentru a pune accent pe puncte și detalii importante, în timp ce doar o variație a aspectului conținutului.

Instrumente pentru modificarea fonturilor în css

CSS nu este departe și oferă dezvoltatorilor instrumente similare pentru editarea textului. Acestea sunt proprietăți precum decorarea textului și fontul.

– acesta este un parametru universal care completează fontul cu anumite detalii. Astfel, textul poate fi „forțat” să clipească (clipi), să sublinieze (subliniat) sau să trimită (line-through), să tragă o linie peste cuvinte (supraliniere), să moștenească caracteristicile obiectului părinte (moștenire) sau să șterge formatul fontului tuturor adăugărilor (nici unul).

Al doilea mecanism folosit în mod obișnuit pentru editarea conținutului textului este proprietatea fontului. Cu ajutorul acestuia, puteți schimba stilul fontului (font-style), dimensiunea acestuia (font-size), setați majuscule, de ex. indicați tipul de litere mici (varianta fontului), precum și „jucați” cu stilul (greutatea fontului).

Și iată un exemplu

Ținând cont de toate informațiile pe care le-am împărtășit mai sus, vom încerca să creăm un exemplu de cod în care să profităm la maximum de cunoștințele dobândite (vă reamintesc că codul poate fi tastat în ).

Modificarea textului

Creează un titlu pentru nou paragraf!

Scriem conținutul text al paragrafului în sine, care clipind .

Rulați exemplul în browser și acordați atenție stilului. Astfel, titlul este evidențiat într-un stil ușor, înclinat, cu o subliniere deasupra propoziției. Paragraful este afișat cu majuscule mici. În același timp, există alocații logice și fizice de cuvinte în text.

Acum puteți edita conținutul textului conform tuturor regulilor. Abonează-te la actualizările blogului meu și invită prieteni. Pa! Pa!

Cu stima, Roman Chueshov

Pentru ca pagina noastră WEB să pară mai prezentabilă, vom împărți textul în paragrafe și vom evidenția titlul. HTML are 6 niveluri de titluri de secțiune a documentului, numerotate de la 1 la 6. Titlurile sunt declarate printr-o pereche de etichete cu numere corespunzătoare nivelului, de exemplu,

- titlul secțiunii de primul nivel și
- titlul secțiunii de nivelul șase. Titlurile diferă de textul obișnuit prin dimensiunea și lățimea literelor. Titlul de la primul nivel h1 este de obicei afișat într-un font foarte mare, în timp ce titlul de al șaselea nivel h6 este de obicei afișat într-un font foarte mic.

Titluri

Nu confundați titlurile secțiunilor documentului cu titlul documentului discutat anterior, definit de element .

Folosim prima propoziție ca titlu al textului - Pentru a face acest lucru, limitați-o doar la etichete

Și

.

Inserați etichete în textul fișierului other.html

Și

astfel încât acestea limitează prima propoziție a textului, iar această bucată de cod ia următoarea formă:

Bun venit pe pagina companiei SD!

Să ne uităm la rezultatul obținut.

Salvați fișierul selectând comanda de meniu Notepad File - Save.

Operația de salvare trebuie făcută întotdeauna înainte de vizualizarea documentului, deoarece deschide fișierul pentru vizualizare prin încărcarea lui în memoria RAM a computerului de pe disc. Dacă nu salvați fișierul după editarea codului HTML, nu veți vedea nicio configurație în browser.

Restaurați fereastra browserului făcând clic pe butonul acesteia din bara de activități.

Apăsați butonul F5 sau butonul Reîmprospătare de pe bara de instrumente a ferestrei de lucru a programului. Fișierul other.html va fi reîncărcat și veți vedea cum arată antetul de la primul nivel în fereastra browserului dvs.

Vedeți cum vor arăta titlurile celorlalte 5 niveluri schimbând numerele din etichete: h2, h3 și așa mai departe După fiecare configurare, nu uitați să salvați fișierul și să actualizați imaginea în fereastra browserului.

Când terminați experimentele, restaurați din nou etichetele din fișierul other.html

.

Folosind cele 6 nivele de titluri oferite de HTML, puteți crea un document ușor de citit, cu o structură intuitivă. Amintiți-vă că documentul dvs. va fi întotdeauna mult mai bine citit dacă este împărțit clar în secțiuni și subsecțiuni.

Alinierea capului

În mod implicit, titlul este aliniat la marginea din stânga a paginii. Dar poate fi și aliniat la dreapta sau centrat. Pentru alinierea corectă într-o etichetă

Este folosit atributul align="right", iar pentru centrare - align="center". De asemenea, este permisă o indicație evidentă a alinierii pe partea stângă - align="left".

Adaugă la etichetă

align="center" pentru a centra titlul. Acest element ar trebui să arate astfel:

Bun venit pe pagina companiei SD!

Pe viitor, nu vă vom aminti de necesitatea de a salva fișierul cu codul inițial și de a reîmprospăta imaginea în browser înainte de a le vizualiza.

Cum se evidențiază textul (aldine) în HTML

Acum să trecem la restul textului. Să-i mărim dimensiunea și să facem textul aldine italic. Pentru a seta stilul îndrăzneț, sunt utilizate etichete asociate .

Introduceți unul de deschidere în fișierul celălalt.html si inchidere etichete astfel încât să limiteze textul Aici veți afla... Acest element ar trebui să ia următoarea formă:

Cum se face textul italic în HTML

Stilul italic este setat folosind etichete .

Introduceți o etichetă HTML în codul inițial Și astfel încât elementul editat să ia următoarea formă:

Aici veți afla despre activitățile noastre, despre produsele software ale companiei noastre și despre echipamentele pe care le producem

Elementele de marcare pot fi imbricate, ca în această structură, unde elementul imbricate într-un element . Browserele moderne sunt capabile să gestioneze corect etichetele imbricate. Prin urmare, trebuie să vă asigurați că ordinea investițiilor nu este încălcată. Browserul va fi dificil de operat dacă imbricarea este ruptă. De exemplu, această intrare ar fi incorectă: . Conformitatea cu imbricarea este o parte foarte importantă a culturii generale de scriere a codului HTML.

Cum să faci text subliniat în HTML

Folosind câteva etichete puteți seta stilul subliniat al unei părți de text limitat de aceste etichete și folosind o pereche de etichete - afișați textul în font teletype.

Trebuie remarcat faptul că recent eticheta simplificată și accentuată folosind stiluri. echivalent . Da, noul analog pare mai greoi, dar, din păcate, acest lucru este mai adevărat. Principalul lucru în favoarea acestui lucru este că versiunea voluminoasă este cross-browser, cu alte cuvinte, potrivită pentru toate browserele, atunci când Nu toate browserele îl acceptă.

Cum să măriți textul în HTML

Acum să mărim dimensiunea fontului textului. Acest lucru se poate face folosind diferite metode.

Etichete măriți dimensiunea fontului textului cuprins între ele.

Adăugați etichete la începutul și, respectiv, la sfârșitul piesei de cod de mai sus Și astfel încât elementul să ia următoarea formă:

Aici veți afla despre activitățile noastre, despre produsele software ale companiei noastre și despre echipamentele pe care le producem

Utilizarea etichetelor puteți reduce dimensiunea fontului textului în comparație cu cea inițială.

O altă metodă de a specifica dimensiunea fontului este utilizarea etichetelor cu atributul dimensiune. Numerele întregi de la 1 la 7 sunt utilizate ca valori pentru acest atribut. În acest caz, valoarea 1 corespunde celei mai mici dimensiuni de font, iar valoarea 7 corespunde celei mai mari.

Folosind în loc de etichete vizualizați etichetele , vedeți cum se modifică dimensiunea fontului textului pentru diferite valori ale atributului dimensiune - de la 1 la 7.

De asemenea, puteți utiliza numere de la 1 la 7 cu semnul + (plus) sau - (minus) ca valoare a atributului dimensiune. În acest caz, dimensiunea fontului crește sau scade în mod corespunzător, în comparație cu cea inițială, de exemplu, etichetele dimensiunea fontului va crește cu un nivel față de cel actual. Verifica.

Setați 5 ca valoare a atributului dimensiune pentru fragmentul de text în cauză: . Codul HTML pentru această piesă ar trebui să fie astfel:

Aici veți afla despre activitățile noastre, despre produsele software ale companiei noastre și despre echipamentele pe care le producem.

În etichete Atributul de culoare poate fi folosit și pentru a indica culoarea fontului limitat de etichete text. Semnificațiile acestui atribut sunt aceleași ca și pentru atributele discutate anterior care descriu culoarea fundalului și a textului documentului.

Implicit, paragraful cu textul Aici veți afla... este aliniat la stânga. Centrați-l orizontal folosind etichete

. De asemenea, puteți alinia un paragraf la marginea dreaptă a paginii folosind etichete sau stânga - folosind etichete .

Introduceți etichete

limitându-le la paragraful desemnat.

Vă rugăm să rețineți că am folosit etichete pentru a centra paragraful

, spre deosebire de atributul align="center" pe care l-am folosit în etichete

.

Atenţie! Pentru etichetele 2010 ,

, , sunt considerate învechite și, prin urmare, este necesar să se utilizeze analogi din stiluri. Asta nu înseamnă că nu le poți folosi, dar dacă poți, încearcă să scapi de ele.

=

=

=

=

=

Există, de asemenea, un număr mare de alte etichete învechite care nu pot fi descrise în acest articol, așa că este mai bine să vă familiarizați imediat cu site-urile WEB specializate pe această problemă. Dar pe cele principale le-am postat aici puțin mai sus

Codurile de alocare

Limbajul HTML permite două abordări ale selectării fontului fragmentelor de text. Pe de o parte, puteți indica în mod direct că fontul dintr-o anumită secțiune a textului poate fi aldin sau cursiv, cu alte cuvinte, puteți indica în mod clar stilul de font al textului, așa cum am făcut în acest experiment. Pe de altă parte, puteți marca orice bucată de text ca având un stil logic diferit de cel obișnuit, lăsând interpretarea acestui stil în sarcina browserului. Astfel, stilul logic arată rolul unei piese de text, de exemplu, semnificația sa enormă în comparație cu textul obișnuit, sau faptul că această piesă este un citat. În propria muncă, puteți utiliza etichete ulterioare care definesc stiluri logice. Verificați cum funcționează în diferite browsere.

- folosit pentru a defini un cuvânt. Textul este afișat implicit cu caractere cursive.

- să evidențieze cuvintele și să le întărească. Textul este afișat implicit cu caractere cursive.

- pentru a evidenția titlurile cărților, filmelor, spectacolelor și așa mai departe, este afișat implicit cu caractere cursive.

- pentru fragmente de cod de program. Afișat pe afișaj într-un font cu lățime fixă.

- folosit pentru textul pe care utilizatorul îl introduce de la tastatură. Poate apărea în diferite fonturi în diferite browsere. Eticheta este învechită.

- servește la afișarea mesajelor programului. Afișat într-un font cu lățime fixă. Eticheta este învechită.

- pentru fragmente deosebit de importante. De obicei evidențiate cu aldine.

- folosit pentru a indica faptul că o bucată de text sau un cuvânt este o variabilă simbolică, cu alte cuvinte, text care poate fi înlocuit cu diferite expresii. Afișat implicit cu caractere cursive. Eticheta este învechită.

Specificația HTML 4.0 oferă o metodă mai avansată de specificare a stilurilor pentru text și alte părți - folosind un limbaj special numit CSS (Cascading Style Sheets). Foile de stil reprezintă o realizare uriașă în domeniul designului WEB, extinzând capacitatea de a îmbunătăți aspectul paginilor. Foile de stil facilitează definirea spațierii între linii, umplerea, culorile utilizate pentru text și fundal, dimensiunea fontului și stilul și așa mai departe. Majoritatea părților HTML pot fi stilate folosind un atribut de stil, care este plasat în interiorul etichetei de deschidere a unui element. Perechile de forma „proprietate: valoare” sunt folosite ca valoare a atributului de stil. De exemplu, într-o bucată de cod care descrie antetul secțiunii,

Atributul style="color: blue" specifică faptul că proprietatea culoare are valoarea albastru, cu alte cuvinte, textul titlului de la primul nivel ar trebui să fie afișat în albastru.

Alinierea cu stilurile

Să vedem cum să folosiți limbajul Cascading Style Sheets pentru a specifica stilul unei piese de text care începe cu cuvintele Aici veți învăța...

Pentru a specifica grosimea fontului, utilizați proprietatea font-weight cu valorile mai ușor (îngust), bold (semi-bold), mai bolder (bold), de exemplu, style="font-weight: bold".

Pentru a determina stilul italic, utilizați proprietatea font-style cu valoarea italic. Prin urmare, pentru a da textului un stil italic aldine, ar trebui să găsiți atributul de stil astfel: style="font-weight: bold; font-style: italic". Vă rugăm să rețineți: caracteristicile pot fi plasate în orice ordine și trebuie separate prin punct și virgulă.

Dacă trebuie să specificați dimensiunea fontului, ar trebui să utilizați proprietatea font-size, ale cărei valori pot fi specificate în valori relative sau absolute. Valorile relative sunt procente, iar punctele (pt), pixelii (px), centimetrii (cm), milimetrii (mm) sunt folosite ca valori absolute. De exemplu:

style="font-size: 200%"

style="font-size: 16pt"

style="font-size: 100px"

Prin specificarea dimensiunilor absolute, mai degrabă decât relative, privați utilizatorii care vă vizualizează paginile de capacitatea de a mări sau micșora dimensiunea fontului folosind comanda meniului browserului în conformitate cu viziunea și rezoluția monitorului. Fonturile vor fi afișate numai în dimensiunea pe care o specificați. Prin urmare, este mai bine să specificați dimensiunea fontului ca procent. În acest caz, dimensiunea fontului va fi mai mică sau mai mare cu un procent specificat decât atunci când este formatat folosind eticheta HTML implicită.

Pentru a determina metoda de aliniere orizontală a textului, utilizați proprietatea text-align cu valorile stânga (stânga), dreapta (dreapta), centru (centru), justificare (lățime). Astfel, pentru a indica faptul că textul Aici veți afla... ar trebui să fie formatat în stil aldine italic cu o dimensiune de 150% din original și aliniat la centru, stilul său ar trebui găsit după cum urmează:

style="font-weight: bold; font-style: italic; font-size: 150%; text-align: center"

Vom folosi acest atribut în etichete<р>, care vă permit să prezentați textul ca un paragraf separat.

Editați un element HTML care include textul Veți învăța aici... prin eliminarea etichetelor

, , , și inserarea etichetelor<р>Șicu atributul style, astfel încât acest element să ia următoarea formă:

<р style="font-weight: bold; font-style: italic; font-size: 150%; text-align: center">Aici veți afla despre activitățile noastre, despre produsele software ale companiei noastre și despre echipamentele pe care le producem

Vedeți, HTML permite o varietate de tehnici de stilare. Cu toate acestea, utilizarea limbajului de foi de stil în cascadă CSS este mai de dorit.

Alte opțiuni de aliniere și stil

Am analizat doar un caz de utilizare pentru limbajul foii de stil, în care definiția stilului este plasată în mod specific în eticheta elementului pe care îl descrieți.

Acest lucru se face folosind atributul style, care este folosit cu majoritatea etichetelor HTML standard. Dar există și alte utilizări pentru CSS.

În HTML standard, fără a introduce foi de stil, pentru a atribui anumiți parametri oricărui element, precum culoarea, dimensiunea, poziția pe pagină și altele asemenea, trebuie să conturați aceste caracteristici pentru fiecare element de fiecare dată, chiar dacă sunt 10 pagini. trebuie plasate pe o pagină a unor astfel de părți care nu diferă unele de altele. Trebuie să inserați aceeași bucată de cod HTML într-o pagină de zeci de ori, mărind dimensiunea fișierului și timpul necesar pentru a-l descărca de pe Internet.

Foile de stil funcționează într-un mod diferit, mai confortabil și mai economic. Pentru a atribui anumite caracteristici oricărui element, trebuie să conturați acest element o dată și să găsiți această descriere ca stil, apoi să indicați pur și simplu că elementul pe care doriți să îl proiectați în mod corespunzător trebuie să preia caracteristicile stilului pe care l-ați descris. Confortabil, nu-i așa?

Mai mult, puteți salva descrierea stilului nu în textul paginii dvs. WEB, ci într-un fișier separat - acest lucru vă va permite să utilizați descrierea stilului pe orice număr de pagini WEB. Și un alt avantaj asociat este capacitatea de a schimba designul oricărui număr de pagini, corectând doar descrierea stilului într-un fișier separat.

În plus, limbajul pentru foile de stil vă permite să lucrați cu designul fontului paginilor la un nivel chiar mai ridicat decât HTML standard.

În prezent, limbajul CSS are un număr destul de mare de parametri pentru părțile HTML pe care le poate controla. Folosind „safe”, cu alte cuvinte, compatibile cu cel mai mare număr de browsere, elemente CSS - caracteristicile fontului, părțile și culorile de fundal, caracteristicile textului și a marginilor - vă puteți facilita în mod semnificativ munca și vă puteți face paginile WEB mai atractive în ceea ce privește design text.

  • Serghei Savenkov

    un fel de recenzie „scurtă”... de parcă s-ar grăbi undeva