Există multe etichete pentru formatarea textului. Unele dintre ele sunt folosite des (și vă veți aminti rapid de ele), altele - rar (nu trebuie să le amintiți).

Aici ne vom uita la cele care sunt folosite frecvent.

Etichete care fac titluri de text

Aceste etichete evidențiază textul ca titluri. Aceste. fiecare titlu începe cu linie nouă, este evidențiat cu caractere aldine și are propria mărime (antetul de la primul nivel este cel mai mare, al șaselea nivel este cel mai mic).

Aceste etichete pot fi folosite cu parametrul alinierea orizontală alinia. Valori posibile pentru acest parametru:

• stânga- stânga,
• corect- pe dreapta,
• centru- in centru,
• justifica- în lățime.

Exemplu de cod:

Etichete de întrerupere de paragraf și de rând

Etichetă
- etichetă de alimentare forțată. Textul de după această etichetă începe pe un rând nou.
Etichete împărțiți textul în paragrafe. Înainte de începutul fiecărui paragraf ar trebui să plasați o etichetă

, eticheta de închidere este opțională. Spre deosebire de etichetă
Paragrafele sunt separate unul de celălalt printr-o linie goală.

La etichetă

exista un parametru alinia, care specifică modul în care este aliniat textul dintr-un paragraf. Valori posibile pentru acest parametru:

• stânga- stânga,
• corect- pe dreapta,
• centru- in centru,
• justifica- în lățime.

Exemplu de cod:

Formatare HTML

Acesta este un paragraf, este separat de restul textului linii goale sus și jos și aliniate la stânga.

Acesta este un paragraf, este separat de restul textului prin linii goale în partea de sus și de jos și este aliniat la dreapta.

Acesta este un paragraf, este separat de restul textului prin linii goale în partea de sus și de jos și aliniat la centru.

Este doar text.
Acesta este text pe o nouă linie.

În fereastra browserului va arăta astfel:

Etichete care fac textul italic

Aceste etichete pun textul în cursiv, dar fac acest lucru prin diverse motive.
Etichete folosit pentru a evidenția în mod logic titlurile cărților, articolelor și citatelor.
Etichete sunt folosite pentru a evidenția definițiile.
Etichete Şi evidențiați părți importante ale textului. Acesta din urmă nu este recomandat pentru utilizare.

Exemplu de cod:

Formatare HTML Acest text este în etichete citate
Acest text este în etichete dfn
Acest text este în etichete em
Acest text este în etichetele i

În fereastra browserului va arăta astfel:

Etichete care fac textul aldine

Ambele sunt folosite pentru a evidenția secțiuni importante de text, dar prima este de preferat.

Exemplu de cod:

Acest text în etichete puternice
Acest text este în etichete b

În fereastra browserului va arăta astfel:

Etichete care evidențiază textul subliniat

Ambele sunt folosite pentru a sublinia pasaje importante ale textului, dar primul este preferat.

Exemplu de cod:

Formatare HTML Doar text

Acest text este în etichete u

În fereastra browserului va arăta astfel:

Etichete care afișează textul în font monospațiu

Textul este afișat într-un font monospațiu, dar este de preferat să îl folosiți pe primul.

Exemplu de cod:

Formatare HTML Doar text
Acest text este în etichete kbd
Acest text este în etichete de exemplu
Acest text este în etichete tt

În fereastra browserului va arăta astfel:

Etichete care afișează text în indice și indice

Etichete afișați textul sub nivelul liniei într-o dimensiune mai mică a fontului.
Etichete afișați textul deasupra nivelului liniei într-o dimensiune mai mică a fontului.
Convenabil pentru a obține formule matematice și chimice.

Exemplu de cod:

Formatare HTML y=x 2 - ecuația unei parabole.

H2O este formula apei.

În fereastra browserului va arăta astfel:

eticheta fontului si parametrii sai

Etichete indicați parametrii fontului textului:

faţă- numele fontului. Puteți enumera mai multe nume de fonturi, separate prin virgule. În acest caz, dacă primul font specificat nu este găsit (nu știți ce fonturi sunt instalate pe computerul utilizatorului), browserul îl va folosi pe următorul din listă.

dimensiune- dimensiunea fontului în unități arbitrare de la 1 la 7. Dimensiunea implicită a fontului este 3.

culoare- culoarea textului (implicit - negru).

Există două moduri de a specifica o culoare: după nume și prin specificarea unui cod de culoare hexazecimal.

Cu culori personalizate (sunt 156) totul este simplu, uită-te la tabelul corespunzător, selectează culoarea care îți place și scrie-i numele în valoarea parametrului (de exemplu, color="blue").

Dar mult mai multe alegeri oferă o a doua metodă. Aici putem alege dintr-un milion de culori specificând codul său hexazecimal. Acest cod are 6 cifre și începe cu caracterul „#”. Nu vom intra în detalii despre modul în care se formează codul de culoare, vom sublinia doar că acesta poate fi obținut, de exemplu, în program Photoshop. Citiți despre cum să faceți acest lucru pe pagină
Va fi mai clar cu un exemplu:

Să evidențiem cuvântul „text” în roșu:

Text

Acum să adăugăm etichete italice (se deschide în stânga, se închid în dreapta):

Text

Și acum - etichete îndrăznețe:

Text

De fiecare dată plasăm toate etichetele anterioare în altele noi. Aceasta se numește ordine de cuibărire. Puteți folosi etichete diferite Pentru a formata textul, principalul lucru este să nu încălcați ordinea de imbricare.

Aceasta încheie a treia lecție, ne-am uitat la principalele modalități de formatare a textului, în lecția următoare ne vom uita la etichetele de formatare mai puțin aplicabile. Cu toate acestea, nu va fi o idee rea să vă familiarizați cu ele.

Dispunerea oricărui text informativ presupune includerea de hyperlinkuri sau ancore semantice. Aceste elemente sunt adăugate folosind eticheta „a” (ancoră). Browsere moderne afișează în mod implicit un element similar cu Adesea, designerii de aspect sau web designerii preferă fie să schimbe acest stil, fie să-l elimine cu totul.

În unele cazuri, acest lucru este cu adevărat necesar. De exemplu, într-un bloc de legături dens, unde designul inutil va supraîncărca percepția și va face documentul dificil de citit. Cu toate acestea, în unele cazuri este oportun să se mențină o distincție între text și link-uri. Dacă designul site-ului exclude complet o astfel de formatare, atunci merită să utilizați orice alt tip de evidențiere a unor astfel de elemente. Cel mai comun tip de diferențiere astăzi este contrastul de culoare al ancorelor din text. Este eficient. Singurul dezavantaj mic al acestei opțiuni va fi problema evidențierii textului de către persoanele care nu pot percepe diverse culori(daltonism). Dar acesta este un procent atât de mic de utilizatori încât poate fi neglijat.

Dacă decideți să eliminați sublinierea legăturilor, atunci veți avea nevoie de anumite cunoștințe despre structura paginii de Internet, și anume CSS.

Eliminați sublinierea linkului de pe întreg site-ul

Pentru o persoană care cunoaște bine designul web și CSS în special, eliminarea sublinierii linkurilor nu va fi dificilă. Pentru a face acest lucru, trebuie doar să găsiți și să deschideți fișierul din fișierele site-ului care este responsabil pentru stil. De obicei se află în directorul rădăcină și are extensia .css. Puteți elimina sublinierea din linkuri folosind acest cod simplu:

text-decor: niciuna;

Această mică linie va elimina complet sublinierea tuturor elementelor scrise cu eticheta „a” pe întregul site.

Dar dacă nu ai acces fișier CSS?

În acest caz, este recomandabil să folosiți eticheta Style la începutul documentului. Funcționează la fel ca un fișier CSS. Pentru a aplica stiluri, este necesar chiar la începutul documentului (sau Pagini HTML) adăugați o construcție în care obișnuitul Reguli CSS stiluri.

Aceste stiluri se aplică numai pentru pagina specifică. Acestea nu se vor aplica altor secțiuni sau documente ale site-ului.

Eliminați sublinierea linkului la trecerea cursorului

Dar ce se întâmplă dacă trebuie să eliminați sublinierea linkului de la trecerea cursorului? CSS ne poate ajuta și în acest caz. Codul va arăta astfel:

text-decor: niciuna;

Este pseudo-clasa „:hover” care este responsabilă pentru decorarea elementelor atunci când treceți peste ele.

Combinând aceste două opțiuni, putem face ca sublinierea linkului să apară doar la trecerea cursorului, altfel va arăta ca un text obișnuit:

text-decor: niciuna;

text-decor: subliniere;

Folosind identificatori și clase

După cum puteți vedea din cele de mai sus, schimbarea stilului unui element de pe un site web sau un document HTML este destul de ușoară. Dezavantajele unor astfel de opțiuni sunt imposibilitatea aplicării selective a stilurilor: nu întregului site sau documentului, ci unui anumit link.

Există mai multe opțiuni pentru a rezolva această problemă.

Puteți elimina sublinierea linkurilor inline. Deși acest lucru nu este strict recomandat din punct de vedere al optimizării site-ului.

Pentru a face acest lucru, trebuie să specificați parametrul Style direct în eticheta de link:

A doua variantă este mai acceptabilă.

Intră în element clasa suplimentara sau id și atribuiți stilurile de care avem nevoie acestor selectori:

O clasă este scrisă cu un punct înaintea numelui ei:

None_decoration(

text-decor: niciuna;

Identificatorul este indicat prin semnul #:

#none_decoration(

text-decor: niciuna;

Această regulă se aplică atât fișierului CSS, cât și etichetei Style

Modificarea stilului de afișare a linkurilor în text

Pe lângă posibilitate, vă permite să aplicați și alte tipuri de stilizare. Adesea, designerii web sau designerii de layout folosesc pentru a evidenția textul linkului schimbându-i culoarea în raport cu textul principal.

Acest lucru este, de asemenea, destul de simplu de făcut:

culoare :*specifica culoarea dorităîn orice format (*roșu, #c2c2c2, rgb (132, 33, 65)*)*;

Un stil similar este aplicat conform acelorași reguli ca cele descrise pentru desublinierea unei legături. regulile CSS în în acest caz, identic. Schimbarea culorii linkului și eliminarea sublinierii pot fi aplicate ca stil separat (atunci linkul va rămâne subliniat, dar va schimba culoarea de la albastru standard la culoarea dorită).

Înlocuirea stilului standard

O ultimă notă. În loc să anulați sublinierea Legături CSS face posibilă înlocuirea valorilor standard de proiectare. Pentru a face acest lucru, trebuie doar să înlocuiți următoarele valori în construcția text-decor:

stil-decor-text:

• Dacă este nevoie linie continuă, specificați valoarea solidă.
• Pentru o linie ondulată - ondulată.
• Linie dubla - respectiv dubla.
• Linia poate fi înlocuită cu o secvență de puncte - punctate.
• Subliniați un cuvânt ca o linie punctată - întreruptă

De asemenea, puteți modifica poziția liniei față de text:

Construcția linie-text-decor-linie poate lua următoarele valori:

Și culoarea (a nu se confunda cu culoarea textului!):

text-decoration-line: (orice culoare în orice format * roșu, #c2c2c2, rgb (132, 33, 65)*).

Pentru comoditate, toate cele trei poziții pot fi scrise împreună în construcție:

text-decor: roșu, line-through, ondulat.

Salutări tuturor celor care sunt însetați de noi cunoștințe și îmi citesc blogul. Publicare astăzi Vreau să mă dedic destul de mult subiect lejer, care totuși ridică în mod regulat o serie de întrebări în rândul începătorilor: „Cum să eliminați sau să adăugați sublinia html".

După cum știți deja, caracterul de subliniere în sine poate fi setat manual, dar pentru link-uri sunt setate în mod implicit. De aceea, în acest articol, vă voi aminti cum să setați sublinierea titlurilor, să vă spun cum să setați linia de jos pe întreaga lățime a blocului și, de asemenea, cum să faceți față formatare standard link-uri. Ei bine, să începem!

Să subliniem asta!

Sunt speciale etichetă asociată pentru a sublinia textul: cuvânt.

Cu toate acestea, designerii profesioniști de layout folosesc mecanismele meselor în cascadă de stil, de exemplu. css, pentru a proiecta aspectul tuturor. Și așa este. Această abordare separă marcajul de stil și face formatarea flexibilă și convenabilă. În plus, este mai ușor să prindeți bug-uri (erori) în cod.

Pentru subliniere continutul textului Următoarele proprietăți sunt utilizate în principal: frontierăŞi text-decor.

Element frontieră este responsabil pentru setarea unui cadru în jurul blocului specificat și, de asemenea, vă permite să setați grosimea liniei și stilul acesteia.

Această unitate de limbă este destul de flexibilă, deoarece puteți specifica formatarea pentru părțile individuale ale marginii. Acest lucru se realizează folosind proprietăți:

1. frontieră-corect(corect)
2. frontieră-top(mai sus)
3. frontieră-stânga(stânga)
4. frontieră-fund(fund)

De asemenea, folosind frontieră poti seta:

• punct ( punctat)
• punctat ( întreruptă)
• liniar ( solid)
• dublu ( dubla)
• incadrarea volumetrica a blocurilor ( canelurămedalioncreasta şiînceput)

Nu uitați că puteți repeta oricând setările de stil ale blocului părinte folosind cuvânt cheie moşteni.

Acum să discutăm despre proprietate limbajul css text-decor. Acest articol este responsabil pentru decorațiuni suplimentare de text.

Acestea includ:

1. clipind ( clipi)
2. rând deasupra textului ( supraliniere)
3. obiecte tăiate ( line-through)
4. moștenire de stil ( moşteni)
5. anularea tuturor decorațiunilor suplimentare ( nici unul)
6. sublinierea de care avem nevoie ( subliniază)

E timpul să exersezi

Acum vreau să consolidezi cunoștințele dobândite și să încerci practic exemplul pe care l-am dat codul programului. Pentru cei familiarizați cu acest subiect, acesta va fi de asemenea util. După cum știm cu toții: „Repetiția este mama învățării!”

Acest cod implementează o stilizare modificată a legăturilor și, de asemenea, setează sublinierea titlului pe toată lățimea blocului.

Să denumim textul cu un titlu subliniat.

Pe această notă, închei această publicație educațională. Acoperă totul instrumentele necesare pentru a sublinia conținutul text, știind care vă puteți crea propriile opțiuni de design pentru paginile site-ului web.

Nu uitați să vă alăturați rândurilor abonaților mei, pentru că sunt încă multe și interesante subiecte utileși, de asemenea, distribuie linkul blogului prietenilor tăi. Pa! Pa!

Cu stima, Roman Chueshov

Prin folosirea text html poate fi dat design frumos. Elementul de subliniere este foarte popular, dar nu toți utilizatorii obișnuiți știu cum să-l folosească.

Subliniați în HTML

Deci cum faci sublinierea? în html este formatat folosind o etichetă . Este folosit în toate specificațiile html și xhtml, dar numai în condițiile tranziției , deoarece trebuie specificată versiunea de browser a markupului. În acest caz, documentul trece validarea cu succes. Elementul trebuie indicat ca standard, adică chiar în partea de sus a paginii.

Etichetă inchidere, trebuie insotita. Trebuie să-l adăugați la marcaj astfel:

1. Titlul numărul unu

Noastre textîntr-un paragraf

Cuvântul „text” va fi subliniat.

De asemenea, puteți sublinia o singură literă dintr-un cuvânt:

1. Titlul numărul doi

Cele noastre La st în paragraf

În mod tradițional în marcaj html Linkurile de subliniere sunt afișate atunci când treceți cu mouse-ul sau chiar staționar, iar acest lucru se întâmplă în mod implicit în toate browserele. Prin urmare, puneți eticheta în mod continuu nu este foarte recomandat.

În plus, scrierea stilurilor în css face codul mai compact, ceea ce înseamnă că pagina se va încărca mai repede.

Cel mai adesea, designerii de layout aplică stiluri adăugând chenare sau subliniind la html sau plasându-le într-un fișier CSS separat.

Subliniați în CSS

Decorarea textului când ajutor css- convenabil și mod practic. Cel mai mult moduri simple o astfel de selecție: folosiți text-decor sau chenar-bottom.

Pentru a evidenția textul cu text-decor, proprietatea trebuie adăugată la clasa dorită.

• clasa dorita (
• text-decor: subliniere;

Trebuie amintit că numele claselor sunt întotdeauna scrise în latină.

Decorarea se poate face și folosind chenare. Marginile vă permit să faceți atât o subliniere obișnuită (solidă), cât și una punctată. În acest scop se înregistrează proprietățile necesare margini, dar proprietatea de decorare a textului este eliminată.

• clasa dorita (
• text-decor: niciuna;

Textul este apoi decorat folosind următoarea proprietate:

• .clasa-dorită (
• text-decor: niciuna;
• chenar-jos: 2px negru punctat;

Așa iese decorul: pentru a-l face solid, în loc de „liniat”, se folosește „solid”. Pentru cei cărora le place să decoreze textul cu subliniere punctată, puteți încerca să folosiți „punctată”.

Stilurile de cadre sunt scrise pe o singură linie. Pe lângă tipul de subliniere, trebuie să specificați și grosimea și culoarea sublinierii. Puteți experimenta cu dimensiunea, dar de obicei 1 sau 2 pixeli sunt suficienti. Culoarea textului poate fi setată și la culoarea sublinierii:

• clasa dorita (
• text-decor: niciuna;
• chenar-jos: 1px albastru punctat;
• culoare: albastru;

Va funcționa așa text albastru cu design albastru. Pentru a atașa un stil la html, trebuie să adăugați o clasă la marcaj.

• Al treilea titlu

Textul nostru într-un paragraf

Gata, acestea sunt elementele de bază ale sublinierii în html.

Vă permite să creați diferite subliniere în HTML: subliniere, supraliniere, text prin linie etc. Să combinăm această caracteristică cu cea anterioară și să obținem:

A doua linie arată cum totul este scris într-un singur rând cu decor text.

text-decoration-style — stil de subliniere a textului

Opțiunea specifică aspect linie decorativă pentru /link. Noile linii directoare CSS au adăugat valori ondulate și duble, așa că acum există 5 dintre ele:

• solid - linie continuă;
• dublu - dublu (din primul exemplu de mai sus);
• punctat - constă dintr-o succesiune de puncte;
• dashed - vă permite să creați o subliniere CSS întreruptă;
• ondulat - o linie ondulată spectaculoasă.

text-underline-position - poziționarea sublinierii CSS

Folosind această proprietate, puteți controla poziția liniei în raport cu gliful fontului.
Sunt disponibile în total 4 opțiuni:

• auto — este situat cât mai aproape de linia de bază a textului;
• sub - sub marginea cea mai de jos a fontului;
• stânga și dreapta - stânga/dreapta pentru postările afișate vertical.

Iată o diferență vizuală între sublinierea textului folosind under și auto:

Diferența, cred, este destul de evidentă.

text-decoration-skip - eliminați sublinierea pentru elemente

Folosind această opțiune, puteți anula (sări) decorarea unor elemente în linie HTML. Pentru a înțelege mai bine valori valide spatii, obiecte, cutie-decor, margini, cerneala Voi duplica poza din postarea precedenta:

Adică, de exemplu, folosind cerneală, puteți face un caracter de subliniere în CSS care să nu se intersecteze cu caracterele. Obiectele de valoare vă permit să săriți peste elementele inline (inline-block) - introduceți un interval, iar linia continuă se va rupe în locul potrivit:

Parametrii cutie-decor, spații, margini sunt mult mai puțin acceptați de browsere, astfel încât rezultatele acestora diferă uneori de cele așteptate. Iată starea compatibilității/suportului pentru decorarea textului la momentul scrierii:

Trucuri suplimentare pentru sublinierea linkurilor

Utilizatorii începători îi întreabă adesea pe unii întrebări tipice pe această temă, așa că am decis să le luăm în considerare. Exemplu general este în partea de jos după explicații.

Cum să eliminați sublinierea linkului

a:hover ( text-decor: subliniat; )

Ambele exemple de mai jos vă permit să înțelegeți logica modului în care funcționează trecerea cu mouse-ul: fie specificați inițial sublinierea linkului în CSS, apoi o eliminați în trecerea cu mouse-ul, sau invers.

Dacă aveți alte întrebări pe această temă, adresați-le în comentarii. Vom încerca să o analizăm mai târziu sau să vă oferim câteva indicii în răspunsuri. Principalul lucru în această chestiune este practica - încercați să adăugați diferite proprietăți pentru opțiunea de decorare text direct în exemple sau creați-vă propriul fișier de testare. Sperăm că totul a devenit clar pe tema sublinierii textului și a linkurilor în CSS / HTML.