Tot textul inclus în etichete și devine subliniat.

Nume provine din cuvântul englezesc „subliniere”. Etichetă HTML considerate mai noi.

De exemplu

Text simplu.

Text simplu. Text subliniat prin eticheta ins

Convertit pe pagină în

Text simplu. Text subliniat prin eticheta u

Text simplu.

Text subliniat prin proprietatea CSS text-decoration

CSS are o proprietate numită text-decoration, care este responsabilă pentru formatarea textului html pentru a crea o subliniere.

Sintaxă CSS text-decor

text-decor: niciunul | subliniază | supraliniază | trece prin linie | moștenire;

• niciunul - text fără decor
• subliniază - subliniază
• overline - subliniere
• line-through - text barat
• clipește - text intermitent (se recomandă să nu folosiți această valoare)

Ne interesează valoarea sublinierii

De exemplu:

Текст со свойством text-decoration: underline

Преобразуется на странице в

Текст со свойством text-decoration: underline

Подчеркнутый текст через свойство CSS border-bottom

Свойство CSS border-bottom создано для создании рамок (границ) объекта снизу. Естественно таким образом можно задавать и подчеркивание тексту.

Рассмотрим пример

Преобразуется на странице в

Подчеркивание для блочных элементов вроде тега

можно проводить двояко. Например, линию под текстом устанавливать на всю ширину блока, независимо от объема текста. А также подчеркивание делать только у текста. Далее рассмотрим оба варианта.

Линия под текстом на всю ширину блока

Чтобы создать линию под текстом, следует добавить к элементу стилевое свойство border-bottom , его значением выступает одновременно толщина линии, ее стиль и цвет (пример 1).

Пример 1. Линия на всю ширину

HTML5 CSS 2.1 IE Cr Op Sa Fx

Text mostră

Distanța de la linie la text poate fi ajustată cu proprietatea padding-bottom prin adăugarea acesteia la selectorul H1. Rezultatul acestui exemplu este prezentat în Fig. 1.

Subliniați textul

Pentru a sublinia doar text, trebuie să utilizați proprietatea text-decor setată pentru a sublinia, adăugându-l din nou la selectorul H1 (exemplul 2).

Exemplul 2. Lățimea de la linie la text

HTML5 CSS 2.1 IE Cr Op Sa Fx

Text mostră

Titlul negru atrage atenția chiar dacă este negru, nu alb.

Rezultatul acestui exemplu este prezentat în Fig. 2.

Când utilizați proprietatea text-decorare, linia este codificată în text, astfel încât poziția și stilul acesteia nu pot fi determinate.

Salutări tuturor celor care sunt însetați de noi cunoștințe și îmi citesc blogul. Vreau să dedic publicația de astăzi unui subiect foarte ușor, care totuși ridică în mod regulat o serie de întrebări de la începători: „Cum se elimină sau se adaugă caractere de subliniere html”.

Din câte știți, caracterul de subliniere în sine poate fi setat manual, dar linkurile sunt setate în mod implicit. De aceea, în acest articol vă voi aminti cum să setați sublinierea pentru titluri, vă voi spune cum să setați linia de jos la lățimea completă a blocului, precum și cum să faceți față formatării standard a link-urilor. Ei bine, să începem!

Să subliniem asta!

Există o etichetă specială de asociere pentru sublinierea textului: cuvânt.

Cu toate acestea, designerii profesioniști de layout folosesc mecanismele meselor în cascadă de stil, de exemplu. css pentru a stila aspectul tuturor. Și este corect. 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 în acest fel.

Următoarele proprietăți sunt utilizate în principal pentru a sublinia conținutul textului: frontierăși text-decor.

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

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

1. frontieră-dreapta(pe dreapta)
2. frontieră-top(de mai sus)
3. frontieră-stânga(stânga)
4. frontieră-partea de jos(partea de jos)

• punct ( punctat)
• punctat ( întreruptă)
• liniar ( solid)
• dublu ( dubla)
• blocuri volumetrice de încadrare ( canelură,medalion,creasta şiînceput)

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

Acum să discutăm despre proprietatea limbajului css text-decor... Acest element este responsabil pentru decorarea textului suplimentar.

Acestea includ:

1. clipind ( clipi)
2. linia de deasupra textului ( supraliniere)
3. obiecte bătute ( 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ă consolidați cunoștințele acumulate și să încercați practic exemplul codului de program pe care l-am dat. Pentru cei familiarizați cu acest subiect, acesta va fi de asemenea util. După cum știm cu toții: „Repetarea este mama învățării!”

Acest cod implementează stilul de link modificat și, de asemenea, setează sublinierea antetului la lățimea completă a blocului.

Să îndreptăm textul cu un titlu subliniat

Cu această notă, închei postarea tutorialului. Acesta acoperă toate instrumentele necesare pentru sublinierea conținutului text, știind care vă puteți crea propriile opțiuni pentru proiectarea paginilor site-ului.

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

Salutări, Roman Chueshov

Există o mulțime de moduri diferite de a stila o subliniere. Vă puteți aminti articolul lui Marcin Vichari „Crafting link underlines” pe Medium. Dezvoltatorii Medium nu încearcă să facă ceva nebunesc, vor doar să creeze o linie drăguță sub text.

Aceasta este cea mai simplă subliniere, dar are dimensiunea corectă și nu se suprapune pe descendenții literelor. Și este cu siguranță mai bun decât liniuța de subliniere implicită în majoritatea browserelor. Medium s-a străduit să-și atingă stilul pe web. Doi ani mai târziu, încă ne este greu să obținem o subliniere frumoasă.

Goluri

Ce este în neregulă cu textul-decor familiar: subliniere? Pentru un scenariu ideal, sublinierea ar trebui să facă următoarele:

• poziționat sub linia de bază;
• omite elementele de la distanță;
• schimbați culoarea, grosimea și stilul liniei;
• lucrul cu text cu mai multe linii;
• lucrați pe orice fundal.

Cred că toate acestea sunt cerințe rezonabile, dar din câte știu, nu există o modalitate intuitivă de a realiza acest lucru cu CSS.

Abordari

Deci, care sunt aceste moduri diferite prin care putem implementa sublinierea pe web?

Iată cele pe care le iau în considerare:

• text-decor;
• margine-de jos;
• cutie-umbră;
• imagine de fundal;
• filtre SVG;
• Underline.js (pânză);
• text-decor- *.

Să analizăm aceste metode una câte una și să vorbim despre avantajele și dezavantajele fiecăreia dintre ele.

text-decor

Decorarea textului este cel mai evident mod de a sublinia textul. Aplicați o proprietate și este suficient. S-ar putea să arate destul de decent la dimensiunile mici ale fontului, dar măriți dimensiunea fontului și această subliniere începe să pară ciudată.

Cea mai mare problemă cu decorarea textului este lipsa personalizării. Sunteți limitat la culoarea și dimensiunea fontului textului și nu aveți nicio modalitate de a schimba acest lucru între browsere. Vom vorbi despre asta mai detaliat.

• ușor de folosit;
• poziționat sub linia de bază;
• omite descendenții în mod implicit în Safari și iOS;
• subliniază textul cu mai multe linii;
• funcționează pe orice fundal.

• nu omite descendenții în toate celelalte browsere;
• nu permite schimbarea culorii, greutății sau stilului liniei.

marginea-de jos

border-bottom oferă un echilibru bun între simplitate și personalizare. Această abordare folosește vechea proprietate CSS border, ceea ce înseamnă că puteți schimba cu ușurință culoarea, greutatea și stilul.

Așa arată marginea de jos pe elementele inline.

Principalul dezavantaj este distanța liniei de subliniere față de text, este în întregime sub descendente. Puteți remedia acest lucru setând elementele la blocare în linie și scăzând înălțimea liniei, dar apoi veți pierde capacitatea de a încheia text. Bun pentru cusături simple, dar nu este util în altă parte.

În plus, puteți utiliza text-shadow pentru a suprapune o parte din linia de lângă descendenți, imitând aceasta cu aceeași culoare ca fundalul. Adică, această tehnică funcționează doar pe un fundal monocrom simplu, fără degrade, modele sau imagini.

În acest moment, folosim deja până la patru proprietăți pentru a stila o linie. Aceasta este mult mai multă muncă decât adăugarea de text-decor.

• poate sări peste înștiințări folosind text-shadow;
• poate schimba culoarea, greutatea și stilul liniei;
• vă permite să utilizați tranziții și animații de culoare și greutate;
• funcționează cu text cu mai multe linii, cu excepția cazului în care se aplică blocarea inline;
• funcționează pe orice fundal atâta timp cât nu utilizați text-shadow.

• poziționat prea jos și mișcat într-un mod dificil;
• multe proprietăți suplimentare sunt folosite pentru a funcționa corect;
• atunci când utilizați text-shadow, selecția textului arată urâtă.

cutie-umbră

box-shadow desenează un descendent cu două umbre interioare: una creează un dreptunghi, iar cealaltă ascunde o parte din acesta. Aceasta înseamnă că aveți nevoie de un fundal de culoare solidă pentru ca acest lucru să funcționeze.

Puteți folosi același truc cu text-umbră pentru a umple golurile dintre subliniere și descendenți. Dar dacă culoarea sublinierii este diferită de culoarea textului - sau este suficient de subțire, linia nu se va ciocni cu descendenții așa cum se întâmplă cu decorarea textului.

• vă permite să schimbați culoarea și grosimea liniei;
• funcționează cu text cu mai multe rânduri.

• nu permite schimbarea stilului de subliniere;
• nu funcționează pe niciun fundal.

imagine de fundal

Metoda imaginii de fundal este cea mai apropiată de dorința noastră și are cele mai puține dezavantaje. Ideea este să folosiți gradient liniar și poziție de fundal pentru a crea o imagine care se repetă sub liniile de text.

Pentru ca această abordare să funcționeze, textul trebuie să fie în afișare standard: modul inline; ...

Următoarea opțiune renunță la gradientul liniar, pentru efecte puteți adăuga propria imagine de fundal.

• poate fi poziționat sub linia de bază;
• poate sări peste înștiințări din cauza text-shadow;
• lucrează cu imagini personalizate;
• împachetează mai multe rânduri de text;
• funcționează pe orice fundal, atâta timp cât nu aplicați text-shadow.

• dimensiunea imaginii poate varia în funcție de rezoluția ecranului, browser și mărire.

Filtre SVG

M-am jucat mult cu această metodă. Puteți crea un filtru inline SVG care desenează o linie și apoi extinde textul pentru a masca partea din linie pe care vrem să o facem transparentă. Apoi puteți da filtrului un id și puteți face link la el în CSS, cum ar fi filtrul: url (‘# svg-underline’).

Avantajul acestei abordări este că transparența este obținută fără aplicarea text-shadow, adică sărim peste înștiințările pe orice fundal, inclusiv degrade și imagini de fundal! Acest lucru funcționează doar pe o singură linie de text, rețineți asta.

Așa arată în Chrome și Firefox:

Suportul IE, Edge și Safari este problematic. Este dificil să testați suportul filtrului SVG în CSS. Puteți utiliza directiva @supports cu filtru, dar aceasta va verifica doar dacă referința la filtru funcționează, dar nu și filtrul în sine. Încercările mele s-au încheiat cu o determinare tristă a capabilităților browserului, acesta este un dezavantaj vizibil al metodei.

• poate fi poziționat sub linia de bază;
• poate sări peste elementele de la distanță;
• permite schimbarea culorii, grosimii și stilului liniei;
• funcționează pe orice fundal.

• nu funcționează cu text cu mai multe linii;
• nu funcționează în IE, Edge și Safari, dar puteți folosi text-decor ca o rezervă, arată decent în Safari.

Underline.js (pânză)

Underline.js este fascinant. Mi se pare impresionant ce a făcut Wentin Zhang cu abilitățile ei JavaScript și atenția la detalii. Dacă nu ați văzut demonstrația tehnică Underline.js, nu mai citiți și luați un minut din timpul dvs. Există și o discuție de nouă minute despre cum funcționează, dar voi descrie pe scurt: sublinierea este desenată folosind elemente ... Aceasta este o nouă abordare care funcționează surprinzător de bine.

În ciuda numelui captivant, Underline.js este doar o demonstrație tehnică. Acest lucru înseamnă că nu puteți pur și simplu să luați acest lucru și să îl conectați la proiect fără a schimba codul.

Am decis să menționez asta ca o dovadă a conceptului că are potențialul de a crea sublinii interactive frumoase, dar pentru ca acest lucru să funcționeze, trebuie să scrieți JavaScript.

Noi proprietăți de decorare a textului

Vă veți aminti că am promis că voi vorbi mai mult despre text-decor. A sosit timpul.

Această proprietate în sine funcționează excelent, dar puteți adăuga câteva proprietăți experimentale pentru a personaliza aspectul sublinierii.

• text-decor-culoare
• text-decor-sărire
• text-decor-stil

Dar nu fi prea fericit... Suport pentru browser - ca întotdeauna. Așa merge.

text-decor-culoare

Proprietatea text-decoration-color vă permite să schimbați culoarea sublinierii separat de culoarea textului. Suportul pentru această proprietate este mai bun decât v-ați aștepta - funcționează în Firefox și este prefixat în Safari. Iată problema: dacă aveți înștiințări, Safari va pune o subliniere peste text.

text-decor-sărire

Proprietatea text-decoration-skip permite omiterea descendenților în textul subliniat.

Această proprietate nu este standard și funcționează în prezent numai în Safari, cu prefixul -webkit-. Safari activează această proprietate în mod implicit, astfel încât înștiințările nu sunt întotdeauna barate.

Dacă utilizați Normalize, vă rugăm să rețineți că versiunile recente dezactivează această proprietate de dragul unui comportament coerent al browserului. Și dacă doriți ca sublinierea să nu afecteze descendenții, trebuie să o activați manual.

text-decor-stil

Proprietatea în stil text-decor oferă aceleași capacități de stil ca și proprietatea în stil chenar, cu adăugarea stilului ondulat.

Iată o listă cu valorile disponibile:

• întreruptă
• punctat
• dubla
• solid

În prezent, proprietatea text-decoration-style funcționează numai în Firefox, iată o captură de ecran din ea:

Ce lipseste

Seria de proprietăți text-decoration- * este mult mai intuitiv de utilizat decât restul proprietăților CSS pentru stilul subliniat. Dar dacă aruncați o privire mai atentă, nu există suficiente modalități de a seta grosimea sau poziția liniei pentru a ne satisface nevoile.

După câteva cercetări, am mai găsit câteva proprietăți:

• text-subliniere-lățime
• text-subliniere-poziție

Acestea par a fi schițe timpurii ale CSS, dar nu au fost niciodată implementate în browsere din cauza lipsei de interes.

concluzii

Deci, care este cel mai bun mod de a sublinia?

Pentru text mic, recomand să utilizați text-decoration cu adăugarea optimistă a text-decoration-skip. Pare puțin lipsit de gust în majoritatea browserelor, dar browserele au avut întotdeauna subliniere și oamenii pur și simplu nu vor fi atenți. În plus, există întotdeauna șansa ca, cu răbdare, această subliniere să arate bine într-o zi, fără ca tu să fii nevoit să schimbi nimic, așa cum vor face browserele.

Pentru textul corpului, este logic să folosiți imaginea de fundal. Această abordare funcționează, arată grozav și există mixuri Sass pentru ea. Puteți, în principiu, să omiteți umbra textului dacă sublinierea este subțire sau diferită de culoare față de text.

Pentru linii individuale de text, utilizați marginea de jos împreună cu orice proprietăți suplimentare.

Și dacă trebuie să săriți peste descendente față de un gradient sau o imagine, încercați să utilizați filtre SVG. Sau evitați pur și simplu să folosiți caractere de subliniere.

În viitor, pe măsură ce suportul pentru browser se îmbunătățește, singurul răspuns va fi setul de proprietăți text-decoration- *.

De asemenea, recomand să consultați articolul lui Benjamin Woodruff CSS Underlines Suck, care abordează aceleași probleme.