Ինչպես փոխել հղումը Ընդգծում է վեբ էջում

Հեռացրեք Հղումը ընդգծում կամ Ստեղծեք փորված կետավոր կամ կրկնակի հղումներ

Լռելյայն, վեբ բրաուզերները որոշակի CSS- ի ոճեր են, որոնք կիրառվում են հատուկ HTML տարրերի վրա: Եթե ​​դուք չեք վերագրում այս կանխատեսումները ձեր կայքի սեփական ոճի թերթերով, ապա կիրառվում է նախնականը: Հիպերտոնիկների համար կանխադրված ցուցադրման ոճը այն է, որ ցանկացած կապակցված տեքստը կապույտ եւ ընդգծված կլինի: Բրաուզերը դա անում է, որպեսզի կայքի այցելուները հեշտությամբ կարողանան տեսնել, թե որն է տեքստը: Շատ վեբ դիզայներները չեն հետաքրքրում այս լռելյայն ոճերի համար, հատկապես ընդգծում են: Բարեբախտաբար, CSS- ն հեշտացնում է փոխել նրանց տեսքը, կամ ընդհանրապես հեռացնել դրանք:

Ընդլայնված տեքստի հղումների հեռացում

Ներկայացված տեքստը կարող է ավելի դժվար լինել կարդալ այդ ոչ տեքստի տեքստը: Բացի այդ, շատ դիզայներներ պարզապես չեն հետաքրքրում գծագրված տեքստի հղումների տեսքը: Այդ դեպքերում, հավանաբար, կցանկանայիք ընդհանրապես ընդգծել այդ ընդգծումները:

Նշված տողերի տեքստի հղումներից հեռացնելու համար դուք կօգտագործեք CSS- ի գույքի տեքստի ձեւավորում: Ահա այն CSS- ն, որը գրեցիք, դա արեց:

ա {text-decoration: none; }

CSS- ի այս մեկ տողում դուք ընդգծում եք բոլոր տեքստային հղումներից: Չնայած սա շատ ընդհանուր ոճ է (այն օգտագործում է տարր ընտրող), այն դեռ ունի ավելի շատ առանձնահատկություն, քան կանխադրված բրաուզերների ոճերը: Քանի որ այդ ստանդարտ ոճերն այնպիսին են, որ ստեղծում է ընդգծումը, սկսելու է այն, ինչ ձեզ հարկավոր է վերագրել:

Հստակեցնելու հեռացում

Տեսանելի է, ընդգծված հեռացման հնարավորությունը կարող է լինել այն, ինչ ցանկանում եք իրականացնել, բայց դուք պետք է զգույշ լինեք, երբ դա անում եք: Անկախ նրանից, թե դուք ցանկանում եք ընդգծել հղումների տեսքը, թե ոչ, չեք կարող պնդել, որ դրանք ակնհայտ են դարձնում, թե որ տեքստը կապակցված է, եւ որը չի: Եթե ​​վերցնում եք ընդգծված կապույտ կապի գույնը, ապա պետք է համոզվեք, որ դրանք փոխարինեք ոճերով, որոնք դեռ թույլ են տալիս տեքստը առանձնացնել: Սա ձեր կայքի այցելուների համար ավելի ինտուիտիվ փորձ կկատարի:

Չբացառեք ոչ հղումներ

Հղումներ եւ ընդգծումից մեկ այլ զգուշություն, մի ընդգծեք տեքստը, որը հղում չէ այն որպես ընդգծելու ձեւ: Մարդիկ եկել են ակնկալել ընդգծված տեքստը, որպես հղում, այնպես որ, եթե ընդգծեք բովանդակությունը, շեշտը դնելու համար (փոխարենը դա համարձակություն կամ այրելու համար), դուք ուղարկեք սխալ հաղորդագրությունը եւ խառնաշփոթեք կայքի օգտագործողներին:

Փոխեք ընդգրկույթը կետեր կամ տողեր

Եթե ​​ցանկանում եք պահել ձեր տեքստային հղումը, ընդգծում է, բայց փոխեք ոճի այդ տողը նախնական տեսքից, որը «պարտավորված» գիծ է, կարող եք դա անել: Այս պինդ գիծի փոխարեն, դուք կարող եք օգտագործել կետերը `ձեր հղումները ընդգծելու համար: Դա անելու համար դուք դեռ շարունակում եք հստակեցնել գծերը, բայց դուք փոխարինեք այն սահմանային ներքեւի ոճով:

ա {text-decoration: none; border-bottom: 1px կետավոր; }

Քանի որ դուք ստացել եք ստանդարտ ընդգծվածը, կետավորը միակն է, որը հայտնվում է:

Դուք կարող եք նույն բանը անել, որպեսզի ստանաք: Պարզապես փոխեք սահմանի ներքեւի ոճը,

ա {text-decoration: none; border-bottom: 1px dashed; }

Փոխեք ընդգծված գույնը

Ձեր հղումների վրա ուշադրություն հրավիրելու եւս մեկ եղանակ է փոխել ընդգծված գույնը: Պարզապես համոզվեք, որ գույնը համապատասխանում է ձեր գունային սխեմայով :

ա {text-decoration: none; border-bottom: 1px կոշտ կարմիր; }

Կրկնակի ընդգծում է

Խոսքը կրկնակի ընդգծում է, որ դուք պետք է փոխեք սահմանի լայնությունը: Եթե ​​ստեղծեք 1px լայն սահման, ապա դուք կստանաք կրկնակի ընդգծում, որը կարծես մեկ ընդգծված է:

ա {text-decoration: none; border-bottom: 3px կրկնակի; }

Կարող եք նաեւ օգտագործել գոյություն ունեցող տողը, երկակի ընդգծելու համար այլ առանձնահատկություններով, ինչպիսիք են կետավորող տողերից մեկը.

{border-bottom: 1px կրկնակի; }

Չհիշեք կապի պետությունները

Դուք կարող եք ավելացնել սահմանային ներքեւի ոճը ձեր հղումներ դեպի տարբեր պետություններում, ինչպիսիք են. Hover, ակտիվ կամ այցելել: Սա կարող է ստեղծել հաճելի «rollover» ոճով այցելուների համար, երբ դուք օգտագործում եք «սավառնել» կեղծ դասը: Երկրորդ կետավորված գծապատկերը հայտնվում է, երբ դուք սավառնում եք հղումը:

ա {text-decoration: none; } a: hover {border-bottom: 1px կետավոր; }

Իրական հոդվածը Ջենիֆեր Քրինինն է: Խմբագրված է Ջերեմի Գիրարդը