Հղումներն անչափ տարածված են վեբ էջերում, սակայն շատ վեբ դիզայներները չեն գիտակցում, որ նրանք ունեն CSS- ով իրենց շահագործումը արդյունավետ կառավարելու եւ կառավարելու համար: Դուք կարող եք սահմանել հղումներ այցելուների, սավառակների եւ ակտիվ պետությունների հետ: Դուք նաեւ կարող եք աշխատել սահմանների եւ ծագման հետ, ձեր հղումներն ավելի շատ պիցազի տալ կամ դրանք դարձնել կոճակներ կամ նույնիսկ պատկերներ:
Վեբ դիզայներների մեծամասնությունը սկսում է «ա» պիտակի վրա ոճը սահմանել `
ա {գույնը `կարմիր; }Դա կանդրադառնա հղման բոլոր ասպեկտներին (սավառնել, այցելել եւ ակտիվ): Յուրաքանչյուր մասի ոճը առանձին, դուք պետք է օգտագործեք հղումը կեղծ դասեր:
Link Pseudo- դասեր
Կան չորս հիմնական տեսակի կապի կեղծ դասեր, որոնք կարող եք սահմանել.
- հղումը, սա հղման համար նախնական ոճն է
- այցելել է հղումը, կտտացրելուց հետո
- : hover - որպես մկնիկը պատրաստվում է հղման վրա (նախապես սեղմել)
- ակտիվ - աջ, քանի որ հղումը կտտացնում է
Սխալ կեղծ դասի սահմանելու համար օգտագործեք այն CSS ընտրիչի պիտակի հետ: Այսպիսով, փոխել ձեր բոլոր հղումների գորշ գորշ գույնը, գրեք:
a: այցելել {գույնը `գորշ; }Եթե դուք ոգեշնչում եք մեկ հղում կեղծ դասի, լավ գաղափար է բոլոր նրանց ոճը: Այս կերպ ձեզ չի զարմացնի արտառոց արդյունքներ: Այսպիսով, եթե դուք պարզապես ցանկանում եք փոխել այցելած գույնը գորշ, իսկ ձեր հղումների բոլոր այլ կեղծ գույները սեւ են, ապա գրեք.
a: հղում, a: hover, a: ակտիվ {գույնը `սեւ; } a: այցելել {գույնը `գորշ; }Փոխեք հղիչի գույները
Հղի հղումների ամենատարածված ձեւը փոխել է գույնը, երբ մկնիկը շրջում է այն:
ա {գույնը `# 00f; } a: hover {color: # 0f0; }Բայց մի մոռացեք, որ դուք կարող եք ազդել, թե ինչպես է հղումը նայում, քանի որ նրանք սեղմում են այն, ակտիվ գույք:
ա {գույնը `# 00f; } a: ակտիվ {color: # f00; }Կամ, թե ինչպես է հղումը նայում այն, երբ այցելել եք այն, այցելած գույքը.
ա {գույնը `# 00f; } a: այցելել {գույնը `# f0f; }Բոլորը միասին դնելու համար.
ա {գույնը `# 00f; } a: այցելել {գույնը `# f0f; } a: hover {color: # 0f0; } a: ակտիվ {color: # f00; }Կտտացրեք ֆոնի վրա հղումներ Սրբապատկերներ կամ փամփուշտներ ավելացնելու համար
Դուք կարող եք տեղադրել ֆոնի վրա որպես հղում, ինչպես նաեւ նորաձեւ ֆոնտերի հոդվածում, բայց մի փոքրիկ պլանի հետ խաղում, կարող եք ստեղծել կապակցված պատկերակ: Ընտրեք պատկերակը, որը փոքր է, 15px- ի մոտ 15px, եթե ձեր տեքստը մեծ չէ: Տեղադրեք ֆոնի վրա հղումը մեկ կողմում եւ կրկնելի տարբերակը սահմանեք ոչ մի անգամ: Այնուհետեւ սեղմեք հղումը այնպես, որ հղումի տեքստը բավականին հեռացվի ձախից կամ աջից տեսնեն պատկերակը:
a {padding: 0 2px 1px 15px; background: #fff url (ball.gif) left center no-repeat; գույնը `# c00; }Երբ դուք ունեք ձեր պատկերակը, դուք կարող եք ստեղծել այլ պատկեր, ինչպես ձեր սավառնել, ակտիվ եւ այցելել սրբապատկերներ հղումը փոխելու համար:
a {padding: 0 2px 1px 15px; background: #fff url (ball.gif) left center no-repeat; գույնը `# c00; } a: hover {background: #fff url (ball2.gif) left center no- կրկնում; } a: ակտիվ {background: #fff url (ball3.gif) left center no-repeat; }Կատարեք ձեր հղումները նման կոճակներով
Բայց կոճակները շատ տարածված են, բայց մինչեւ CSS- ն եկավ, դուք ստիպված եղավ ստեղծել նկարներ , օգտագործելով պատկերներ , որոնք ձեր էջերը ավելի երկար են բեռնում: Բարեբախտաբար, կա սահմանային ոճ, որը կարող է օգնել ձեզ հեշտությամբ ստեղծել CSS- ի կոճակ նման ազդեցություն:
a {border: 4px սկիզբ; padding: 2px; տեքստերի ձեւավորում `ոչ; } a: ակտիվ {border: 4px ներդիր; }Նշենք, որ գույները սկզբում եւ ներդաշնակ ոճեր եք դնում, բրաուզերները, հավանաբար, չեն մատուցի դրանք, ինչպես կարող եք ակնկալել: Այսպիսով, ահա գունավոր սահմաններով հետաքրքրասեր կոճակը:
{{border-style: solid; սահմանի լայնությունը `1px 4px 4px 1px; տեքստերի ձեւավորում `ոչ; padding: 4px; սահմանային գույնը `# 69f # 00f # 00f # 69f; }Եվ դուք կարող եք ազդել նաեւ կոճակի հղման սավառնել եւ ակտիվ ոճերի վրա, պարզապես օգտագործել այդ կեղծ դասերը:
a: հղում {border-style: solid; սահմանի լայնությունը `1px 4px 4px 1px; տեքստերի ձեւավորում `ոչ; padding: 4px; սահմանային գույնը `# 69f # 00f # 00f # 69f; } a: hover {border-color: #ccc; }