Pe această pagină veți găsi exemple despre cum să schimbați legăturile HTML folosind CSS, ceea ce vă permite să le blocați link-uri, link-uri pictograme, fără subliniere, cu colțuri rotunjite, să schimbați distanța dintre ele și multe altele. Pe viitor, pe baza acestor exemple, puteți crea diverse opțiuni pentru meniurile de navigare pentru site.

Înainte de a începe să studiați exemplele, vreau să fac o mică precizare. În toate exemplele, pentru o mai mare claritate, va fi folosită o pseudo-clasă CSS, care este folosită pentru a schimba stilurile de link-uri atunci când cursorul mouse-ului trece peste ele. Trebuie spus că această practică este comună și este folosită într-o măsură sau alta pe aproape toate site-urile de internet.

În acest exemplu, vom elimina sublinierea de pe linkuri, apoi le vom adăuga sau elimina la trecerea mouse-ului.

Exemplu HTML și CSS: cum să eliminați și să adăugați subliniere din linkuri

Descrierea exemplului

1. În mod implicit, toate browserele populare adaugă o subliniere la linkuri, care este controlată de proprietatea CSS. Adică, implicit această proprietate, pentru legături, are valoarea underline . Folosind aceste cunoștințe, schimbăm sublinierea legăturilor în diferitele lor stări.

Inițial, sublinierea legăturilor este o linie subțire și solidă, apăsată aproape aproape de text. Și în cele mai multe cazuri, această opțiune este destul de suficientă. Cu toate acestea, uneori, un design necesită ca legăturile să fie subliniate cu o linie punctată mai degrabă decât cu o linie continuă, sau ca distanța de la subliniere la legături să fie mai mare decât standardul sau ca sublinierea în sine să fie mai îndrăzneață. Și uneori trebuie să faci un fel de subliniere exotică, de exemplu, cu o linie ondulată sau multicoloră. Toate aceste opțiuni vor fi discutate în acest exemplu.

Exemplu HTML și CSS: Subliniere a linkului punctat

Descrierea exemplului

1. În primul rând, eliminăm sublinierea standard din toate link-urile, deoarece vom folosi metode non-standard. Apoi adăugăm un chenar de jos la primul link folosind proprietatea CSS și îl facem întrerupt. Acesta va fi sublinierea noastră. Pentru a elimina sublinierea atunci când treceți cu mouse-ul peste un link, folosim o pseudo-clasă și facem ca fundalul cadrului să fie același cu fundalul paginii, adică pur și simplu îl ascundem. În teorie, ar fi mai bine să facem transparent fundalul cadrului, dar IE6 înțelege greșit acest sens.
2. Cu a doua legătură facem la fel ca și cu prima, dar doar desenăm o linie continuă. Pentru a mări distanța de la text la subliniat, dăm linkului o mică marjă de jos folosind proprietatea CSS.
3. Al treilea link are o subliniere multicoloră, așa că o vom adăuga folosind o imagine de fundal. Pentru aceasta folosim o imagine mică, pe care o conectăm prin CSS. Poziționați fundalul în partea de jos a link-ului (0 100%) și lăsați-l să fie duplicat numai pe orizontală (repetare-x). Sublinierea este gata, dar este prea aproape de text pentru a remedia acest lucru, adăugăm o mică liniuță la link-ul de mai jos; Acum asta e.
4. În vechiul IE6 și IE7, pot apărea probleme cu afișarea caracterului de subliniere pe prima și a doua legătură. Pentru a remedia acest lucru, adăugați proprietatea zoom :1, care include așa-numita aspect. Această proprietate este nevalidă și numai aceste browsere o înțeleg, așa că este mai bine să o activați comentarii condiționate.

Foarte des, pentru a crea un meniu, trebuie să faci nu doar link-uri text, ci link-uri blocate, în care zona activă va fi atât textul în sine, cât și o anumită zonă din jurul lui.

Descrierea exemplului

1. Pentru a crea legături de bloc, folosim proprietatea CSS :block, care le transformă în elemente de bloc care creează o întrerupere de linie înainte și după ele. Dacă nu sunt necesare întreruperi de linie, puteți înlocui valoarea cu inline-block .
2. Deoarece linkurile noastre sunt acum blocuri, dacă este necesar, le putem modifica lățimea (CSS) sau înălțimea (CSS).
3. În acest exemplu, nu specificăm deloc înălțimea legăturilor, ci pur și simplu le dăm interior padding (CSS), care extinde blocurile.

Descrierea exemplului

1. Totul este foarte simplu - folosind proprietatea CSS adăugăm cadrul dorit la legăturile de sub cursor. Cu toate acestea, vă rugăm să rețineți că adăugăm exact același cadru la link-urile obișnuite, dar îl facem de aceeași culoare ca fundalul paginii. Adică pur și simplu ascundem deocamdată cadrul. Acest lucru se face astfel încât, atunci când treceți cursorul mouse-ului, legăturile să nu înceapă să „sare” din cauza desenului cadrului.

În loc să facă culoarea chenarului să se potrivească cu fundalul paginii, ar putea fi setată la transparentă și făcută transparentă, dar așa cum am spus, IE6 nu o gestionează corect.

Exemplu HTML și CSS: Crearea de legături 3D

Descrierea exemplului

1. Folosind proprietatea CSS adăugăm cadre la link-uri, iar cu ajutorul le setăm culoarea. În același timp, indicăm o nuanță deschisă de culoare pentru marginile din stânga și de sus și o nuanță închisă pentru partea de jos și dreapta. Datorită acestei distribuții de culori, obținem link-uri care arată ca niște butoane tridimensionale.
2. Pentru a face să pară că butoanele sunt apăsate atunci când treceți cursorul mouse-ului, inversăm culorile cadrului legăturilor cu o pseudo-clasă. Pentru un efect de clic suplimentar, setați poziționarea relativă (CSS :relativ) și faceți un decalaj în sus de un pixel (CSS :-1px).
3. Ei bine, pentru a face totul absolut frumos, am setat textul și culoarea de fundal a linkurilor de sub cursor puțin mai întunecate decât de obicei. Gata.

În acest exemplu, vom face legături cu pictograme care vor conține nu numai imagini ale acestor pictograme, ci și textul de sub ele. Cu toate acestea, în viitor, le puteți schimba cu ușurință și lăsa, de exemplu, doar pictograme.

Înainte de a începe lucrul, vom pregăti mai multe imagini cu pictograme, în două seturi - pentru link-uri obișnuite și link-uri sub cursorul mouse-ului. Al doilea set ar trebui să fie exterior diferit de primul, la noi acest lucru este exprimat în paleta de culori.

Descrierea exemplului

1. Pentru a scurta codul, folosim două clase în link-uri - „linkuri” (cu proprietăți comune) și „imagine”, „audio”, „video” (personale pentru fiecare link). Acest punct este descris în detaliu în clasele Referință CSS.
2. Pictogramele noastre au dimensiunea de 50x50 pixeli și vor fi prezente pe link-uri ca fundal (CSS), pe care le vom centra în partea de sus (50% 0) și le vom împiedica replicarea (fără repetare).
3. Adăugăm padding (CSS) la linkuri, astfel încât textul din linkuri să nu adere de margini. În același timp, facem ca indentația de sus să fie egală cu înălțimea pictogramelor, astfel încât textul să nu se suprapună cu acestea, deoarece icoanele noastre sunt fundalul.
4. Dacă există foarte puțin text în linkuri, atunci imaginile cu pictograme vor fi tăiate pe părțile laterale. Pentru a preveni acest lucru, setăm legăturile la o lățime minimă (CSS), astfel încât să fie cel puțin egală cu lățimea pictogramelor. În cazul nostru, trebuie să obținem o lățime minimă de 50px, dar o setăm la 40px, deoarece se vor adăuga încă 10px datorită umpluturii laterale.
5. Pentru ca lățimea minimă să funcționeze, convertim legăturile în blocuri inline (CSS: inline-block).

IE6 va trebui să „vindece” puțin:

1. IE6 nu înțelege proprietatea lățimii minime, dar interpretează proprietatea CSS ca o lățime minimă. Prin urmare, folosim unul simplu pentru asta hack care va rezolva această problemă.

În acest exemplu, vom rotunji colțurile legăturilor folosind una dintre metode colțurile rotunjite, descris în subsecțiunea următoare. Nu vom lua în considerare opțiunea folosind CSS 3, deoarece totul este foarte simplu acolo, dar ar fi mai bine să facem rotunjiri folosind imagini.

Pentru a face acest lucru, mai întâi vom tăia mai multe imagini goale în două seturi - pentru link-uri obișnuite și link-uri sub cursor. Pentru noi va diferi prin prezenta/absența umbrelor în imagini.

Descrierea exemplului

Nu ne vom opri asupra tehnologiei de rotunjire în sine, dacă este necesar, puteți citi despre aceasta în secțiunea corespunzătoare a site-ului.

1. Folosind proprietatea CSS :inline-block facem link-uri blocuri inline. În special, acest lucru este necesar pentru a putea da link-urilor o înălțime exactă care să se potrivească cu înălțimea imaginilor.
2. Eliminați sublinierea și centrați textul (CSS:center). În general, în cazul nostru nu este necesară centrarea textului, deoarece legăturile se adaptează la dimensiunea textului din ele și pur și simplu nu există niciunde unde să fie aliniat. Dar dacă trebuie să măriți lățimea legăturilor (de exemplu, până la 150 px), atunci această aliniere va fi utilă.
3. Pentru a schimba aspectul legăturilor atunci când sunt sub cursorul mouse-ului, adăugăm selectoare suplimentare stilurilor cu o pseudo-clasă CSS, în care indicăm părțile noastre din imagini, dar fără umbră.

Pentru IE6 și IE7 conectăm stiluri suplimentare folosind comentarii condiționate, dar schimbăm puțin codul CSS în sine și îl facem diferit de cel folosit în modalități de rotunjire a colțurilor:

1. Esența schimbării este că cu ajutorul expresiei integrăm aceleași două etichete în interiorul linkurilor, dar numai fără atributele care conțin stiluri. În schimb, adăugăm clasele „left_bok” și „right_bok” la etichete, adăugăm stiluri pentru ele și le scriem mai jos. Aceste stiluri sunt aproape exact aceleași ca în codul CSS principal, dar aici toate imaginile sunt folosite ca fundal al etichetelor.

Colțurile rotunjite ale legăturilor (opțiunea a doua)

Să ne uităm la un alt exemplu de rotunjire a colțurilor legăturilor, dar folosind patru imagini de colț separate.

Descrierea exemplului

Nici aici nu vom vorbi despre rotunjirea în sine, vom contura doar punctele distinctive.

1. Folosind proprietatea CSS :inline-blok, convertim linkurile in blocuri inline. Apoi scoatem sublinierea de pe ele, adaugam un cadru si aliniem textul la centru.
2. Deoarece pseudoelementele cu care rotunjim colțurile sunt situate în interiorul link-urilor, conținutul lor este de asemenea centrat și, prin urmare, colțurile de imagine adăugate de proprietatea CSS nu sunt plasate în colțuri așa cum avem nevoie. Pentru a remedia acest lucru, îi adăugăm :left, returnând valoarea pe care browserele o folosesc implicit.

Limbajul de proiectare a paginilor web CSS pare înșelător de ușor de înțeles și de utilizat, motiv pentru care fiecare dezvoltator web începător se grăbește înainte fără a învăța temeinic structura și fundamentul acestui limbaj de marcare. Acest lucru nu este surprinzător, deoarece foile de stil în cascadă vă permit să proiectați o pagină web prin simpla enumerare a proprietăților sale necesare, care pot fi copiate dintr-un manual o dată sau de două ori.

Problemele încep atunci când un astfel de webmaster întâlnește codul altcuiva, se pierde în el și nu înțelege principiile interacțiunii elementelor din pagină. Din cauza încercărilor de a manipula codul, pagina începe să arate haotică, stângace, ca și cum ar fi fost așezată în zorii Internetului în anii 90 - toate linkurile sunt albastre sau violet și au, de asemenea, subliniere care este teribil de depășită în termenii de proiectare. Aceasta este problema pe care vom învăța să o rezolvăm rapid și ușor, folosind selectoarele și declarațiile de valoare corecte.

Instrucțiuni: cum să eliminați sublinierea linkului în CSS

Proprietatea text-decorare este responsabilă pentru sublinierea textului. Pentru a elimina complet sublinierea linkului CSS de pe o pagină, putem folosi una dintre următoarele metode:

• atribuiți un atribut direct etichetei de link în HTML stil, în care scrie: text-decor: niciuna;
• atribuiți legătura idși să-i aplice proprietăți similare;

• Pentru a elimina sublinierea legăturii CSS pentru mai multe elemente, trebuie să le oferiți un atribut de clasă clasăși setați aceeași proprietate ca pentru o singură legătură.

Printre altele, există o modalitate în CSS de a elimina sublinierea linkurilor din întreaga pagină, pentru a face acest lucru trebuie să utilizați următoarea sintaxă:

• a (text-decor: niciuna;).

Capcane atunci când lucrați în CSS cu link-uri

Când vine vorba de schimbarea aspectului elementelor de câmp ale oricărei acțiuni, pentru un dezvoltator fără experiență, totul devine și mai dificil. Dar nu disperați, soluția este la fel de simplă și elegantă ca și în cazul precedent cu vizualizarea elementului standard.

Link-urile sunt foarte fine atunci când vine vorba de gestionarea lor prin CSS. De exemplu, se pare intuitiv că dacă setați culoarea textului pentru un paragraf la roșu, atunci linkul din acesta ar trebui să fie și roșu - dar nu a fost cazul. Fiecare link are nevoie de o abordare „individuală”, iar pentru a spune mai tehnic – mai întâi în CSS trebuie să specificăm fie id-ul, fie clasa, fie selectorul „a” sub forma locației sale în documentul web pentru care dorim pentru a seta proprietățile. Dacă pur și simplu setați proprietăți pentru eticheta „a”, aceasta va defini stilurile de bază ale linkurilor de pe pagină, care pot fi reatribuite elementelor individuale de pe pagină folosind CSS.

Eliminarea sublinierii legăturilor la hover este simplă, dar nu evidentă

La ce ne referim când vorbim despre hoverul de link-uri? În termeni tehnici, aceasta este o pseudo-clasă a selectorului și definește starea sa curentă. Varietatea de pseudo-clase și funcționalitatea lor este atât de extinsă încât li se poate da un articol separat, dar acum ne interesează doar o pseudo-clasă - hover. Este responsabil pentru comportamentul unui link (sau al oricărei alte etichete HTML) atunci când trece cu mouse-ul. Acum că înțelegeți structura modului în care browser-ul vă procesează codul, puteți utiliza acest exemplu:

• a: hover (text-decor: niciunul).

Puteți învăța restul pseudoclaselor și cum să lucrați singur cu ele folosind cărți de referință și manuale CSS, dar pentru a lucra pe deplin cu sublinierea linkurilor, acest articol este suficient.

De la autor: Stilizarea sublinierii linkurilor este destul de complicată și tot uit care metodă este cea mai bună în ce situație. Din fericire, John Jameson ne va ajuta să înțelegem rapid acest lucru în articolul său.

Există multe moduri de a stila sublinierile. S-ar putea să vă amintiți articolul „Crearea sublinierii linkurilor pe mediu”. Medium nu a încercat să facă nimic ieșit din comun, au vrut doar să creeze subliniere atractive în text.

Sublinii subțiri, negre, cu spații în jurul literelor cu înștiințări de jos - lucrare de Marcine Witchery din articolul Crearea de subliniere a linkurilor pe mediu.

O subliniere standard bună, care este, de asemenea, o dimensiune bună și permite coborâre. Mult mai bine decât implicit majoritatea browserelor. După cum se dovedește, Medium s-a confruntat cu o mulțime de provocări pe parcurs. Și chiar și doi ani mai târziu, stilul bun subliniat încă provoacă o mulțime de probleme.

Goluri

De ce nu folosiți doar text-decor: subliniați? Dacă vorbim despre un scenariu ideal, sublinierea ar trebui:

să fie situat sub linia de bază;

sări peste litere mici;

schimba culoarea, grosimea și stilurile;

mergeți la linia nouă;

lucrați cu orice fundal.

Cred că este absolut posibil pentru noi să cerem toate aceste lucruri de la subliniere, dar din câte știu, nu există o modalitate intuitivă de a face toate aceste lucruri în CSS.

Abordări

Deci, ce metode avem la dispoziție pentru a sublinia textul? Mi-am amintit următoarele:

text-decor;

imagine de fundal;

filtre SVG;

Underline.js(pânză);

text-decor-*

Să parcurgem întreaga listă și să luăm în considerare toate avantajele și dezavantajele fiecărei abordări.

proprietate text-decor

Proprietatea text-decorare este cea mai simplă modalitate de a sublinia textul. Trebuie să aplicați o singură proprietate. Pe text mic, o astfel de linie va arăta bine, dar dacă măriți dimensiunea fontului, va arăta ciudat.

Cea mai mare problemă cu proprietatea text-decor este lipsa personalizării. Linia folosește culoarea și dimensiunea fontului textului căruia i se aplică și nu există nicio modalitate între browsere de a schimba stilurile. Vom vorbi mai în detaliu despre această proprietate puțin mai târziu.

Pro

usor de utilizat;

situat sub linia de bază;

omite descendenții în mod implicit în Safari și iOS;

sare la o nouă linie;

funcționează cu orice fundal.

Contra

nu omite descendenții de litere în alte browsere;

Culoarea, grosimea și stilurile nu pot fi modificate.

proprietate de margine de jos

Proprietatea de la marginea de jos este un echilibru bun între viteză și personalizare. Această abordare folosește cadre CSS dovedite, ceea ce înseamnă că puteți schimba cu ușurință culoarea, grosimea și stilurile. Iată cum arată proprietatea border-bottom pe elementele inline:

Cel mai mare dezavantaj este cât de departe este sublinierea de text. Sublinierea este situată sub descendentele literelor. Această problemă poate fi rezolvată prin blocarea elementului în linie și reducerea înălțimii liniei, dar apoi se pierde capacitatea de a sări la linii noi. Bun pentru linii simple, dar nu mai mult.

De asemenea, puteți utiliza text-shadow pentru a ascunde părți ale liniei din jurul texturilor de jos. În acest caz, va trebui să imitați culoarea de fundal, ceea ce înseamnă că metoda funcționează doar pe fundaluri uniforme. Gradienele și imaginile nu vor funcționa.

În prezent, există 4 proprietăți pentru sublinierea stilului. Mult mai bine decât doar decorarea textului.

Pro

puteți folosi proprietatea de tranziție și puteți anima culoarea și grosimea;

sare la linii noi în mod implicit dacă elementul nu este bloc în linie;

Contra

linia este situată foarte departe și este greu de mutat;

trebuie folosite prea multe proprietăți inutile pentru ca sublinierea să arate bine;

Evidențierea slabă a textului când utilizați text-shadow.

proprietate box-shadow

Proprietatea box-shadow desenează o subliniere folosind două umbre interioare: una care creează dreptunghiul și una care îl ascunde. Aceasta înseamnă că pentru ca metoda să funcționeze corect, este nevoie de un fundal uniform.

Același truc cu umbră de text poate fi folosit pentru a simula sărirea peste cuvintele de jos ale literelor. Dacă culoarea liniei este diferită de text sau este suficient de subțire, atunci nu ar trebui să existe probleme, așa cum este cazul cu decorarea textului.

Pro

poate fi plasat sub linia de bază;

puteți sări peste înștiințări folosind text-shadow;

puteți schimba culoarea și grosimea;

sare la linii noi.

Contra

stilurile nu pot fi schimbate;

Nu funcționează cu toate mediile.

proprietatea imaginii de fundal

Proprietatea background-image ne rezolvă cel mai bine problemele și are foarte puține dezavantaje. Ideea este că creați o imagine folosind gradient liniar și poziție de fundal care se repetă pe o axă orizontală de-a lungul liniilor de text. Elementul trebuie să fie afișat: inline;.

Demo-ul de mai jos nu folosește gradient liniar. Pentru a crea un efect cool, puteți folosi propria imagine.

Pro

poate fi poziționat sub linia de bază;

puteți sări peste înștiințările de jos folosind text-shadow;

puteți schimba culoarea, grosimea (chiar și cu jumătate de pixel) și stilurile;

lucrează cu imagini personalizate;

sare la linii noi;

funcționează cu orice fundal atâta timp cât nu utilizați text-shadow.

Contra

Dimensiunea imaginii poate varia în funcție de rezoluție, browser și nivelul de zoom.

filtre SVG

Aceasta este metoda cu care m-am jucat. Puteți crea un element de filtru SVG în linie care va desena linia și va extinde textul pentru a masca părțile liniei care ar trebui să fie transparente. Filtrului i se poate da un id și poate fi referit în CSS folosind filtrul: url(‘#svg-underline’).

Ce este grozav la acest lucru este că filtrul adaugă transparență fără a se baza pe text-shadow. Aceasta înseamnă că puteți sări peste baloanele cu litere pe orice fundal, inclusiv degrade și imagini! Exemplul de mai jos funcționează doar cu o singură linie de text, așa că aveți grijă.

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

Există probleme de asistență în IE, Edge și Safari. Este dificil să testați suportul pentru filtrele SVG în CSS. Puteți folosi regula @supports pe filtru, dar aceasta va verifica doar dacă linkul în sine funcționează și nu dacă filtrul este aplicat sau nu. Metoda mea este destul de dură pentru browsere, așa că fiți de două ori atenți.

Pro

situat sub linia de bază;

omite liderii de jos;

Puteți schimba culoarea, grosimea și stilurile;

funcționează pe orice fundal.

Contra

nu sare la linii noi;

nu funcționează în IE, Edge și Safari, dar puteți specifica decorarea textului ca alternativă. Sublinierea în Safari arată grozav de la sine.

Underline.js (pânză)

Underline.js este o bibliotecă uimitoare. Sunt impresionat de ceea ce Wenting Zhang a putut face cu JS și de atenția la detalii. Dacă nu ați văzut încă demonstrația tehnologică Underline.js, opriți-vă un minut și aruncați o privire. Există un discurs minunat de nouă minute online despre principiile muncii, vă voi repeta rapid acum. Sublinierea sunt desenate folosind pânza. O abordare complet nouă, care funcționează surprinzător de bine.

În ciuda numelui atractiv, acesta este doar o demonstrație tehnică. Adică, nu veți putea introduce imediat biblioteca în proiect fără o grămadă de modificări.

Această bibliotecă merită menționată doar ca dovadă de concept. Canvas are potențialul de a crea evidențieri frumoase, interactive, dar va trebui să scrieți cod JS suplimentar pentru ca acesta să funcționeze corect.

Proprietăți text-decor-*

Îți amintești când am spus că vom intra în mai multe detalii despre ceva mai târziu? Acum hai să facem asta. Proprietatea text-decor funcționează bine singură, dar putem adăuga câteva proprietăți experimentale pentru un aspect și mai bun:

text-decor-culoare

text-decor-sărire

text-decor-stil

Nu vă bucurați din timp, știți despre suportul pentru browser.

proprietate text-decorare-culoare

Proprietatea text-decoration-color vă permite să schimbați culoarea sublinierii separat de culoarea textului. Proprietatea are chiar și un suport bun pentru browser. Funcționează în Firefox și este prefixat în Safari. Există un dezavantaj - dacă nu ștergeți linia din jurul înștiințărilor, în Safari se va afla deasupra textului. Firefox:

proprietate text-decorare-skip

Proprietatea text-decoration-skip este responsabilă pentru omiterea baloanelor de subsol în textul subliniat.

Proprietatea nu este standard și în prezent funcționează numai în Safari. Pentru a lucra în alte browsere, trebuie să utilizați prefixul –webkit-. În Safari, această proprietate este activată în mod implicit, motiv pentru care subliniază săriți subsolurile chiar și pe site-urile unde această proprietate nu este specificată.

Dacă utilizați Normalize, trebuie să știți că versiunile recente dezactivează proprietatea să funcționeze normal în toate browserele. Dacă doriți să recuperați acele subliniere aproape magice, trebuie să activați această proprietate.

proprietate de stil text-decor

Proprietatea text-decorare-stil oferă același set de subliniere ca și proprietatea în stil chenar, dar adaugă și un nou aspect - ondulat. Valori posibile:

Momentan, proprietatea text-decorare-stil funcționează numai în Firefox, mai jos este o captură de ecran:

Set de subliniere monocromatice Arata asemanator?

Ce s-a întâmplat?

Proprietățile text-decoration-* sunt mai intuitive decât alte proprietăți pentru stilizarea subliniilor. Cu toate acestea, dacă aruncați o privire diferită asupra cerințelor pe care le-am prezentat mai devreme, veți observa că folosind aceste proprietăți nu puteți modifica grosimea și poziția. După câteva cercetări am găsit aceste două proprietăți:

text-subliniere-lățime

text-subliniere-poziție

Se pare că aceste proprietăți au fost eliminate dintr-o versiune timpurie a CSS din cauza lipsei de interes față de ele. Nu au fost folosite niciodată. Hei, nu e vina mea.

Concluzii

Deci, care este cel mai bun mod de a sublinia textul? Totul depinde de diverși factori.

Pentru text mic, recomand să utilizați text-decoration și proprietatea experimentală text-decoration-skip, în speranța că va funcționa. În majoritatea browserelor arată așa, dar așa a fost întotdeauna și oamenii nu i-au acordat atenție. Dacă ai suficientă răbdare, sunt șanse ca în curând toate subliniatele tale să arate bine fără să fii nevoit să schimbi nimic.

Pentru textul corpului, utilizați imaginea de fundal. Metoda funcționează, arată frumos și există mixuri Sass pentru ea. Dacă sublinierea este subțire sau culoarea este diferită de text, probabil că puteți sări peste metoda text-shadow. Pentru textul pe o singură linie, utilizați bordur-bottom și orice alte proprietăți.

Și pentru a sări peste înștiințările de litere pe fundaluri sau imagini în gradient, încercați să utilizați un filtru SVG. Sau pur și simplu nu amestecați astfel de fundaluri cu subliniere. În viitor, când suportul pentru browser se va îmbunătăți, va fi posibil să se utilizeze proprietățile text-decoration-*.

Dispunerea oricărui text informativ presupune includerea de hyperlinkuri sau ancore semantice. Aceste elemente sunt adăugate folosind eticheta „a” (ancoră). Browserele moderne afișează în mod implicit un element similar.

Î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 culori diferite (daltonism). Dar acesta este un procent atât de mic de utilizatori încât poate fi neglijat.

Dacă, până la urmă, s-a decis eliminarea sublinierii 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ă linie mică va elimina complet sublinierea tuturor elementelor scrise cu eticheta „a” pe întregul site.

Dar dacă nu aveți acces la fișierul 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, trebuie să adăugați o construcție chiar la începutul documentului (sau al paginii HTML), în care se aplică regulile obișnuite ale stilurilor CSS.

Aceste stiluri se aplică numai unei anumite pagini. 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 punctul de vedere al optimizării site-ului.

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

A doua opțiune este mai acceptabilă.

Introducem o clasă sau un id suplimentar în element și atribuim 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ți 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 acest caz sunt identice. 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ă desubliniați un link, CSS vă oferă posibilitatea de a suprascrie valorile implicite de stil. Pentru a face acest lucru, trebuie doar să înlocuiți următoarele valori în construcția de decorare text:

stil-decor-text:

• Dacă aveți nevoie de o 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.

Deși sublinierea este folosită în mod tradițional pentru a formata legăturile text, este posibil să se folosească și alte metode pentru a schimba aspectul legăturilor. Iată câteva dintre ele:

• link-uri fără subliniere;
• evidențiere decorativă;
• evidențierea cu culoarea de fundal;
• cadru;
• poza de langa link.

Legături fără subliniere

Sublinierea legăturilor text a devenit deja un anumit standard și un semnal că acesta nu este doar text, ci un link. Acesta, apropo, este unul dintre motivele pentru care nu ar trebui să aplicați sublinierea textului obișnuit - utilizatorii vor crede că au de-a face cu un link. Pe lângă utilizarea sublinierii, datorită CSS, dezvoltatorii de site-uri web au acum o opțiune alternativă - crearea de linkuri fără subliniere. Când este utilizat corect, acest design de link poate chiar să ofere site-ului un anumit efect. Trebuie doar să clarificați utilizatorului ce este un link și ce este text obișnuit, distingându-le, de exemplu, după culoare. De asemenea, puteți face astfel încât atunci când treceți cursorul, linkul să devină subliniat, să își schimbe culoarea sau ambele efecte să fie utilizate în același timp.

Exemplul 1. Fără subliniere pentru linkuri

Pseudo-clasele :hover și :visited nu trebuie să adauge decor text, ele moștenesc proprietățile selectorului a.

Sublinierea legăturilor atunci când treceți cu mouse-ul peste ele

Pentru a adăuga o subliniere la link-urile care au text-decoration : none , ar trebui să utilizați pseudo-clasa :hover. Acesta definește stilul link-ului atunci când cursorul mouse-ului trece peste el. Tot ce rămâne este să adăugați proprietatea text-decor pentru pseudo-clasă cu sublinierea valorii (exemplul 2).

Exemplul 2: Sublinierea linkurilor

Subliniere decorativă a legăturii

Sublinierea legăturilor poate fi setată nu doar cu o linie continuă, ci, de exemplu, cu o linie punctată. Pentru a face acest lucru, trebuie să utilizați proprietatea border-bottom, care creează o linie în partea de jos a elementului. Specificând unul dintre argumentele acestei proprietăți, punctat , obținem o liniuță de subliniere punctată. Exemplul 3 arată cum să setați o linie punctată albastră pentru legăturile roșii atunci când treceți cursorul peste ele cu cursorul mouse-ului.

Exemplul 3: subliniere punctată pentru linkuri

Când utilizați metoda de mai sus, o linie punctată apare chiar sub sublinierea normală a textului. Prin urmare, ar trebui să adăugați decor text cu valoarea none la stilul de legătură, astfel încât să nu obțineți două linii în același timp (Fig. 1).

Orez. 1. Folosind o linie punctată pentru a evidenția o legătură

Nu este necesar să utilizați o linie punctată, de exemplu, pentru a crea o linie dublă, trebuie să specificați o valoare, așa cum se arată în exemplul 4.

Exemplul 4: linkuri de subliniere dublă

Schimbând grosimea liniei, tipul și culoarea acesteia, puteți obține multe efecte diferite.

Folosind o culoare de fundal

Pentru a adăuga un fundal colorat unui link, trebuie doar să utilizați proprietatea de fundal, atribuindu-i o culoare în orice format disponibil. În mod similar, puteți utiliza pseudo-clasa :hover, apoi culoarea de fundal de sub link se va schimba când treceți mouse-ul peste ea (exemplul 5).

Orez. 2. Schimbați culoarea de fundal când treceți cu mouse-ul peste un link

Încadrați în jurul linkului

Exemplul 6 arată cum se schimbă culoarea chenarului folosind proprietatea chenar. Sublinierea textului prin decorarea textului poate fi eliminată sau lăsată neschimbată.

Exemplul 6. Schimbarea culorii chenarului legăturilor

Pentru a preveni lipirea cadrului de text, în exemplu, marginile sunt stabilite în jurul lui folosind umplutură. De asemenea, puteți adăuga un fundal împreună cu utilizarea cadrului, folosind proprietatea de fundal.

Dacă doriți să adăugați un cadru la linkuri atunci când treceți cu mouse-ul peste ele, trebuie să vă asigurați că textul nu se mișcă în acest caz. Cel mai simplu mod de a realiza acest lucru este să adăugați un chenar invizibil în jurul legăturii și apoi să schimbați culoarea chenarului folosind pseudo-clasa :hover. Culoarea transparentă este specificată folosind cuvântul cheie transparent, altfel stilul nu se va schimba.

A ( chenar: 1px solid transparent; /* Chenar transparent în jurul linkurilor */ ) a:hover ( chenar: 1px roșu continuu; /* Chenar roșu când treceți cu mouse-ul peste un link */ )

Imagini de lângă link-uri externe

Un link extern este unul care indică către un alt site. Un astfel de link nu este diferit de link-urile locale din site, puteți determina unde duce doar uitându-vă la bara de stare a browserului. Dar nu toată lumea se uită la această linie și nu întotdeauna. Pentru a ajuta utilizatorii să diferențieze linkurile externe de linkurile obișnuite, acestea ar trebui să fie evidențiate într-un fel. De exemplu, puneți o imagine mică lângă link care arată că starea linkului este diferită (Fig. 3).

Lucrul bun despre folosirea imaginilor în apropierea link-urilor externe este că linkul astfel conceput este în mod clar diferit de link-urile obișnuite din site, iar o imagine corect selectată îi spune vizitatorului că linkul duce către un alt site. Pentru a separa stilul pentru link-urile locale și externe, vom folosi un selector de atribute. Deoarece toate linkurile către alte site-uri sunt scrise cu un protocol, de exemplu http, este suficient să setați stilul pentru acele linkuri a căror valoare a atributului href începe cu http://. Acest lucru se face folosind constructul a (...), așa cum se arată în Exemplul 7.

Imaginea de fundal este situată în dreapta link-ului și, pentru ca textul să nu se suprapună cu imaginea, se adaugă o marjă la dreapta prin proprietatea padding-right. Dacă trebuie să adăugați o imagine în stânga, înlocuiți 100% cu 0 și padding-right cu padding-left .

Protocolul poate fi nu numai http, ci și ftp și https pentru ei, această rețetă nu mai funcționează. Deci, pentru versatilitate, este mai bine să schimbați selectorul la un , acesta spune că stilul ar trebui aplicat tuturor link-urilor a căror adresă conține //.