Ce este atributele de etichete HTML și cum să le utilizați? Cum se face un font frumos în HTML: dimensiuni, culori, tag-uri html font atributes font.

Element (din engleza. font. - Font) este un container pentru a schimba caracteristicile fontului, cum ar fi dimensiunea, culoarea și setul cu cască.

Acest element este depășit, în schimb, utilizați stiluri.

Sintaxă

Text

Tag-ul de închidere

Obligatoriu.

Exemplu

Font.

P.Șeful acestei propuneri este scris de fontul arial, este evidențiat în roșu și a crescut în dimensiune.

Rezultat acest exemplu prezentat în fig. unu.

Smochin. 1. Schimbarea tipului de text

Notă

Pentru a schimba culoarea textului, stilul proprietății color este proiectat, familia Font este stabilită de proprietatea Font-Family și dimensiunea textului prin proprietatea de dimensiune a fontului.

font.

Primul Cuvântul acestei propuneri este scris de fontul arial, este evidențiat în roșu și a crescut în dimensiune.

Browsere

Tabelul de browser aplică următoarea notație.

- elementul este complet susținut de browser;
- browserul elementului nu este perceput și ignorat;
- Când poate apărea de lucru erori diferiteSau elementul este susținut cu rezerve.

Numărul indică versiunea browserului începând cu care este acceptat elementul.

98.9k.

În dimensiunea fontului HTML joacă un rol important. Vă permite să atrageți atenția utilizatorului informații importantePostat pe pagina site-ului. Deși nu numai mărimea literelor este importantă, dar și culoarea, grosimea și chiar o familie.

Etichete și atribute cu robot cu fonturi HTML

Limba hipertextului are un mare set de fonduri pentru a lucra cu fonturile. La urma urmei, formatarea textului este principala sarcină a HTML.

Cauza creației limba HTML. Problema afișării browserelor de formare a textului.

Luați în considerare etichetele care sunt utilizate pentru a lucra cu fonturile în HTML și atributele acestora. Principalul este eticheta . Folosind valorile atributelor sale, puteți seta mai multe caracteristici ale fontului:

culoare - Setează culoarea textului;
dimensiune - Dimensiunea fontului în unități condiționate.

Valoarea atributului pozitiv este acceptată de la 1 la 7.

face - folosit pentru a instala familiile de fonturi text care urmează să fie utilizate în interiorul etichetei . Câteva valori enumerate prin virgulă sunt acceptate imediat.

Numai textul care se află între partea din eticheta perechii de fonturi este formatată. Textul rămas este afișat prin font standard instalat în mod implicit.

De asemenea, în HTML există o serie de etichete de perechi care specifică o singură regulă de formatare. Acestea includ:

- Specifică fontul îndrăzneț la HTML. Etichetă prin acțiuni similare cu cea precedentă;

- dimensiunea este mai mare decât setul implicit;

- dimensiunea fontului mai mic;

- Text înclinat (italic). O etichetă similară ;

- Text cu subliniere;

~~- accentuat;~~

_{- afișați textul numai în litere mici;}

^{- în majuscule.}

Text normal

Thumbnail.

Thumbnail.

Mai obișnuit

Mai puțin obișnuit

Italică

Italică

Cu accent

~~Zdrobit~~

Caracteristicile atributului de stil

În plus față de etichetele descrise, există încă mai multe modalități de a schimba fontul în HTML. Unul dintre ele este utilizarea atributului universal de stil. Folosind valorile proprietăților sale, puteți seta stilul de afișare a fontului:

1) Font-Family - Proprietatea stabilește familia de fonturi. Puteți enumera mai multe valori.
Schimbarea fontului în HTML la următoarea valoare va apărea dacă familia anterioară nu este instalată în sistem de operare Utilizator.

Sintaxă de scriere:

font-Family: Numele fontului [, numele fontului [, ...]]

2) Dimensiune font - Dimensiunea este setată de la 1 la 7. Aceasta este una dintre principalele modalități la modul în HTML puteți mări fontul.
Sintaxă de scriere:

dimensiune font: dimensiune absolută Dimensiune relativă Valoare | Interesul | moşteni.

Dimensiunea fontului poate fi de asemenea setată:

În pixeli;

În valoare absolută ( xx-mic, x-mic, mic, mediu, mare);

În procente;

Puncte (PT).

Font-dimensiune: 7

Dimensiune font: 24px

Dimensiune font: x-mare

Font-dimensiune: 200%

Font-dimensiune: 24pt

3) Stilul de font - stabilește stilul de scriere a fontului. Sintaxă:
font-stil: normal | Italice | Oblic | moşteni.

Valori:

scrierea normală;

italic - italic;

oblic - font cu o panta spre dreapta;

moșteniți - moștenește scrisul elementului părinte.

Un exemplu de modificare a fontului în HTML utilizând această proprietate:

font-stil: moștenire

font-stil: italic

font-stil: normal

font-stil: oblic

4) Varianta font - traduce toate literele majuscule la titlu. Sintaxă:
font-varianta: normal | Capace mici | moşteni.

Un exemplu de modificare a fontului în HTML de această proprietate:

font-varianta: moștenire

font-varianta: normal

varianta de font: capace mici

5) Greutatea fontului - vă permite să setați grosimea scrisului textului (saturație). Sintaxă:
greutatea fonturilor: Bold | Bolder | mai ușoară | Normal | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900

Valori:

bold - instalează un font html îndrăzneț;

mai îndrăzneț - gras față de normal;

bricheta este saturată în raport cu normal;

normal - scriere normală;

100-900 - Grosimea fontului este stabilită în echivalentul numeric.

greutate font: Bold

greutate font: Blower

font-greutate: mai ușoară

greutate font: normal

greutate font: 900

greutate font: 100

Proprietatea fonturilor și culoarea fontului HTML

Font este o altă proprietate de containere. În interiorul în sine, a combinat valorile mai multor proprietăți concepute pentru a schimba fonturile. Sintaxă font:

font: Fotografie de font de dimensiune font | moşteni.

De asemenea, fonturile utilizate de sistem în inscripții pe diverse controale pot fi specificate ca valoare.

caption - pentru butoane;

icon - pentru icoane;

mENU - MENU;

mesaj-box - casete de dialog;

subtitrare mică - pentru controale mici;

stare-bar - String de stare Font.

Astăzi, vom continua luarea în considerare a diferitelor etichete, și anume fonturi, blockquote, pre, puternice, em, b, i și altele care ne permit să formatăm textul.
Blockquote și pre-formatare în HTML
Înainte (chiar înainte de CSS) citate etichetă Blockquote. În codul HTML a fost utilizat destul de des, deoarece fragmentul de text închis în ea, a primit o liniuță orizontală, care nu a fost atât de ușor de făcut în acel moment datorită imposibilității folosind CSS. Proprietăți. Elementul blockquote este o pereche și în interior, poate fi ambele etichete și bloc mici (de exemplu, paragrafele p).

Exemplu

Exemplu închis în blockquote

Acum, eticheta blockquote este încă utilizată la realizarea textului, dar aspect Citat în timpul nostru este de obicei setat cu folosind CSS. Proprietățile prescrise tocmai pentru acesta într-un fișier cu mese de stil din șablonul dvs. de design. De exemplu, în cazul blogului meu, în stil.css puteți găsi următoarele linii:
# Blockquoteckquote (marja: 15px 0 20px 0; padding: 5px 8px 5px 35px; fundal: # EAEDF0 URL (imagini / quote2.png) No-repetare partea stângă; poziția de fundal: 8px 5px; Culoare: # 666; Font- Dimensiune: 14px; Lățime: 91%; Font-Style: Italic;) # Blockquote P (culoarea: # 666, font-dimensiune: 14px;)
Ei bine, și cum se vor uita citatele închise în blockquote, puteți vedea în textul articolului cu un interviu cu capul.
În plus față de citatele din HTML mai devreme (înainte de apariția CSS), o altă etichetă formatată a fost foarte utilizată - Centru. Este o pereche (recipient particular) și bloc. Poate intra în orice element al textului (atât minuscule, cât și bloc), care va fi aliniat în centru ca urmare a acestui fapt.
Deci, acum să luăm în considerare eticheta Pre.care vă permite să transferați formatarea textului specificată direct la cod sursa. Amintiți-vă că am spus că toate alergarea într-un rând (spațiu, fila și transferul de linie) vor fi înlocuite cu un singur spațiu atunci când parsați codul din browser.
Deci, elementul este prețios interzice abrevierea simbolurile goale În textul textului care va fi încheiat în acesta. Ceea ce este demn de remarcat, pentru un fragment încheiat în Pre, browserul nu va transfera automat șirurile pe simbolurile spațiale.
Acestea. Toate liniile din interiorul elementului vor fi considerate un browser inseparabil - pe măsură ce ați scris în cod, acesta va fi afișat în browser. Mai mult decât atât, în browser pentru a afișa textul textului formatat utilizând TAG-ul, va fi utilizat un font de monosolină, cum ar fi curierul nou sau similar cu acesta.

Formatarea în codul sursă Teg PRE TAG-uri depășite

Teg pre-însăși este bloc, iar în interiorul acestuia (această pereche) poate fi încheiat doar un conținut minuscule (adică, în interior, nu ar trebui să fie plasat paragrafe P, anteturi H1 - H6 etc.).
HTML are o altă etichetă de bloc care este concepută pentru a forma adresa de text. În interiorul acestei etichete pot fi amplasate în conformitate cu standardele validatorului, doar un conținut minuscule care va fi afișat în italica de browser.
Font - Lucrați cu font de culoare și text în HTML curat
Etichete puternice, EM - ale secrețiilor logice și vizuale din text
Dacă CSS nu exista acum, atunci ar trebui să descriu numirea anumitor etichete logice și fizice (vizuale) text. Dar, pentru că CSS este acum folosit pe majoritatea covârșitoare a site-urilor, rolul unor astfel de etichete în codul HTML este deja practic redus la zero, așa că mă duc să le beau și să explic de ce au fost folosite înainte (și unele sunt folosite acum).
Etichetele vizuale sunt concepute pentru a schimba designul textului, care va fi văzut de vizitatorii site-ului dvs., dar care nu ar trebui să aibă o atenție deosebită motoarelor de căutare.
Etichetele logice ale formatării textului, în teorie, sunt orientate pentru a indica orice accente motoarele de căutare. Pentru utilizator, selecția acestor elemente va schimba, de asemenea, apariția cuvintelor evidențiate.
Dacă vă amintiți, nu a fost atât de mult timp în urmă, optimizatorii au sfătuit să aloce locații semnificative cu cuvinte cheie (după cum este necesar pentru alocarea) etichetelor de formatare logică a puternică și EM, care va arăta ca un utilizator cu caractere aldine și italic.
Dar pentru selecția fără cuvinte cheie sfătuit să utilizeze Elementele HTML. "B" și "i", care pentru utilizatori din nou ar arăta ca o separare a caracterelor îndrăznețe și italice, dar nu luate în considerare de motoarele de căutare, deoarece Ele nu sunt etichete de formatare logică.
Acum, toate acestea nu funcționează la fel de mult cum am crezut și alocarea cuvintelor cheie cu ajutorul puternic și EM facem mai degrabă ca un obicei, mai degrabă decât să sperăm pentru anumite dividende pentru acest lucru de către motoarele de căutare.
Deci, în afară de cele deja menționate "B" și "I" (evidențierea cu caractere aldine și italice) la categorie formatare vizuală Puteți atribui fontului, pre, pre, precum și etichetelor deja luate în considerare la începutul articolului:
"U" - evidențiază sublinierea
"Strike" - Lista
"SUP" - indicele superior
"Sub" - indice mai mic
"TT" - font cu o singură dimensiune
"Big" - Creșteți fontul
"Mici" - reduceți fontul

Ei bine, acum să ne uităm la lista de articole formatare logică Text:
"Em" - alocarea logică a fragmentelor importante în italică
"Puternic" este același, dar numai pentru a ieși, va fi grasă
"Cite" - alocarea citatelor în italice
"Cod" - conceput pentru a afișa o varietate de coduri de către Monosine Phon
"Samp" - pentru a evidenția mai multe simboluri de către Monosine Font
"ABBR" - În atributul de titlu al acestei etichete, este scris pentru a decripta orice abreviere (tip, css sau html, care sunt citite de spelled, și nu ca un singur cuvânt). Cuvintele prescrise în titlu vor apărea atunci când rezumați cursorul mouse-ului la această abreviere.
"Acronimul" este același, dar folosit pentru acronime, adică Abrevieri care nu sunt citite de scrisori, ci ca un cuvânt (de exemplu, MKAD sau Poliția de trafic)
"KBD" - folosit pentru a afișa fontul de text monoshyy introdus de utilizatorul site-ului de pe tastatură
"Var" - folosit pentru a selecta variabilele în orice cod
"DEL" - alocarea de trecere atunci când este necesară pentru a arăta că un fel de fragment a fost eliminat după publicarea documentului HTML
"INS" - evidențierea sublinierului atunci când este necesar să se arate că s-a introdus o piesă după publicarea documentului HTML

Încă o dată, repet că datele de formatare a etichetelor în majoritatea lor sunt foarte rar găsite atunci când scrieți codul acum, dar totuși numirea lor nu va fi superfluă.

Multă baftă! La întâlnirile ambigue pe site-ul web al blogului
S-ar putea să fiți interesat
Blind simboluri și codul de formatare în HTML, precum și spații speciale de măturat și alte mnemonice
Deoarece culorile sunt setate în codul HTML și CSS, selecția nuanțelor RGB în tabele, emiterea de programe Yandex și alte programe Selectați, Opțiune, Textare, Etichetă, FieldSet, Legend - HTML Tags Formulare de liste de drop-down și câmp de text
Listele din codul HTML - UL, OL, Li și DL etichete
Cum se creează un hyperlink (a, href, goală țintă), cum să îl deschideți într-o fereastră nouă de pe site, precum și faceți o legătură de imagine în codul HTML
Tabele în tabelul HTML - Tags, TR și TD, precum și Colspan, CellPadding, CellSpacing și Rowspan pentru a le crea
Etichete și atribute ale antetelor H1-H6, linia orizontală HR, briefing RR și paragraful P conform HTML 4.01
Care este limba HTML HyperText Markup și cum se poate vedea lista tuturor etichetelor din validatorul W3C
Tag-ul IMG - HTML pentru introducerea imaginilor (SRC), alinierea și raționalizarea acestuia cu text (align), precum și sarcini de fundal (fundal)
Comentarii și directive DOCTYPE în codul HTML, precum și conceptul de elemente de bloc și litere mici (etichete)

În plus față de utilizarea dimensiunilor și modelelor standard (căști) de fonturi, puteți defini fonturile pentru fiecare fragment de text utilizând etichete speciale. Cea mai ușoară cale este să folosiți așa-numitul Stiluri fizice:

Pentru fiecare etichetă a stilului fizic, există o etichetă de închidere adecvată care anulează utilizarea ulterioară a stilului. De exemplu, pentru etichetă Eticheta de închidere este.
Mai jos este un exemplu al unui program și apariția diferitelor stiluri fizice:

<НЕАD><ТIТLЕ>Stiluri fizice

<В>Îndrăzneţ
Italică
Subliniat
~~Încrucișate~~
<ТТ>Maşină de scris
<ВХ1>Bold italic
<ВХ1><и>Îndrăzneață de vindecare încurajată

Smochin. 649. Stiluri fizice
În interiorul etichetei de titlu, puteți introduce o etichetă de stil fizic pentru a modifica întregul titlu sau doar o parte parte. De exemplu, pentru a selecta o parte a textului definit ca un antet, puteți utiliza următorul design:

<НЕАD><ТIТLЕ>Stiluri fizice și logice

<Н2>Aceasta - modificat Nivelul 2 antet

Smochin. 650. Schimbarea stilului de font al părții antetului
Folosind o etichetă specială Puteți configura fontul pentru imaginea textului: Setați setul cu cască, dimensiunea și culoarea. În primul rând, puteți seta dimensiunea fontului principal care este utilizat în documentul implicit. Tag-ul principal al fontului are un format . Dimensiunea fontului principal poate fi setată de la 1 la 7. Dacă nu utilizați această etichetă, atunci dimensiunea fontului principal este setată la 3.
etichetă Setează dimensiunea fontului curent pentru fragmente individuale de text. Această etichetă nu afectează stilurile. Gama de valori posibile este de la 1 la 7. Această etichetă vă permite, de asemenea, controlul dimensiunii fontului curent față de cea principală. Pentru a face acest lucru, simbolul + este utilizat (pentru a mări) și simbolul - (pentru a reduce) dimensiunea fontului pe o anumită valoare. De exemplu, dacă dimensiunea fontului principal este setată la 3, apoi eticheta setează dimensiunea fontului curent la 5.
Pentru a seta setul cu cască font utilizat eticheta . De exemplu:

Dacă această etichetă nu este utilizată în documentul dvs., browserul va aplica fontul instalat în configurația sa. Prin urmare, textul de pe ecranul de utilizator poate să se uite la all după cum ați imaginat-o. De asemenea, ar trebui să se țină cont de faptul că dacă fontul pe care l-ați atribuit nu este instalat pe computerul utilizatorului, browserul va portreta textul setat în mod implicit.
Puteți să etichetați specificați prin lista de fonturi prin virgulă. În acest caz, browserul va folosi primul font găsit. De exemplu, puteți scrie o etichetă:
Fata \u003d "arial, sanans serif, curier"\u003e
În mod tipic, în listă sunt specificate fonturi similare. Se recomandă atribuirea celor mai populare fonturi. Când plasați pagina informații text. Este mai bine să nu atribuiți deloc un nume de font, bazându-se pe setări standard browser. Dar, atunci când dezvoltați o pagină, trebuie să utilizați, de asemenea, setările standard ale browserului pentru a sincroniza percepția textului cu o posibilă percepție a utilizatorului. În cele din urmă, creați o pagină nu pentru dvs., ci pentru cititori.
Utilizarea atributului de culoare din etichetă Puteți seta culoarea fontului:

Argumentul atributului de culoare este o înregistrare hexazecimală a codului de culoare (componenta roșie, verde și albastră, cu alte cuvinte, componenta RGB). Următorul program Demonstrează controlul fontului:

<НЕАD><ТIТLЕ>Instalarea fonturilor

<Р>Aria font. Abvgdzhzik.
<Р>Font Courier. Abvgdzhzik.
<Р>Simbol font. Abvgdzhzik.

Smochin. 651. Utilizarea diferitelor fonturi
Rețineți că în etichetă Puteți utiliza mai multe sau toate atributele posibile. De exemplu:

În formulele matematice, precum și pentru înlocuire, indicii se aplică adesea indici care diferă de textul principal al poziției (ușor sau mai jos) și dimensiunea. Etichetele servesc în acest scop și În consecință, pentru indicii superioară și inferioară.

<НЕАD><Т1ТLЕ>Indexuri / Nad\u003e

<НЗ>Un exemplu de utilizare a indexurilor
<Р> (5 + x ²)^{x + 3.}

a. ₁ + A. ₂+ A. ₃
<Р>Note de substituție ²

Smochin. 832. Folosind indicele superioare și inferioare
În plus față de cele discutate mai sus, există etichete de formatare a textului suplimentar:
- evidențiază adresele de e-mail, adresele poștale și
numere de telefon;
<СIТЕ> - alocarea cotei;
, - înregistrarea textelor text, a constantelor simbolice;
- Introduceți texte de la tastatură.
În ultimele trei stiluri, se utilizează un font monociotic (de obicei curier). De exemplu, literele I și W Monosolid de font ocupă același loc. Utilizarea fonturilor monofizi se datorează oportunității simple de aliniere a textului folosind simbolurile spațiale. Observăm un alt moment. În etichetele fontului, ca în etichetele stilurilor logice, puteți introduce un atribut Titlu \u003d "șir"care vă permite să legați o etichetă pop-up în textul din interiorul acestei etichete. Argumentul Atributa. Titlu este un rând de sfaturi. Când opriți indicatorul mouse-ului pe un cuvânt sau o frază evidențiată, apare o sugestie în apropierea indicatorului. Cu această recepție, puteți descifra abrevierile, oferiți utilizatorilor explicații și recomandări suplimentare.

Etichetă Este un container pentru a schimba caracteristicile fontului, cum ar fi dimensiunea, culoarea și setul cu cască. Deși această etichetă este încă acceptată de toate browserele, este considerată caduce și se recomandă refuzarea de a refuza stilurile. Sintaxă Text Parametri Descrierea parametrilor etichetei Parametrul de culoare Setează culoarea textului în interiorul recipientului . Sintaxă ... Analog css -color. Parametru Face Parametrul față este utilizat pentru a seta setul cu cască al fontului utilizat pentru text. Numele fonturilor pot fi aduse mai multe prin virgule. În acest caz, dacă se găsește primul font specificat, browserul va utiliza următoarele pe listă. Sintaxă ... Argumente - orice număr de nume de fonturi separate prin virgule. Familiile universale de fonturi: serif.- Fonturi cu serif (antic), timp de tip; sans-serif.- fonturi tocate (fonturi fără adidași sau grotesc), reprezentant tipic - arial; cURSIV- fonturi corporale; fantezie- fonturi decorative; monospace.- Fonturi de monoswriter, lățimea fiecărui caracter într-o astfel de familie este aceeași. Analog CSS - Font-Family Opțiunea de dimensiune Setează dimensiunea fontului în unitățile convenționale de la 1 la 7. Dimensiunea medie utilizată în mod implicit este recepționată 3. Dimensiunea fontului poate fi specificată ca valoare absolută (de exemplu, dimensiunea \u003d "4") și relativă (de exemplu, dimensiunea \u003d dimensiunea \u003d "+ 1", dimensiune \u003d "- 1"). În acest din urmă caz, dimensiunea variază în raport cu baza. Dimensiunea fontului afectează nu numai parametrul de dimensiune specificat, ci și alegerea setului cu cască al fontului. Deci, fontul arial arată mai mare decât fontul de timp, iar fontul Verdana este un font ușor arial. Luați această caracteristică atunci când alegeți un font și dimensiuni. Sintaxă ... Argumentul este un număr întreg de la 1 la 7 sau schimbă valoarea la o parte mai mare sau mai mică utilizând simboluri + și -.