Դաս 5: Լինքեր

0

Այն ինչ սովորել եք նախորդ դասերին կիրառելի է նաև լինքերի համար՝ օրինակ՝ փոխել գույները, ընգծել և այլն: Նորությունն այն է, որ CSS-ը թույլ է տալիս սահմանել այդ հատկություններ կախված հղուման  /link/ վիճակից`  unvisited, visited, active կամ երբ մկնիկի կուրսորը պահված է նրա վրա /hover/: Դա Ձեզ թույլ կտա կայքին հաղորդել գեղեցիկ ու հետաքրքիր էֆֆեկտներ, որոնք կառավարելու համար պիտի օգտվեք pseudo-classe-երից:

Ի՞նչ է pseudo-class-ը

pseudo-class-ը թույլ է տալիս Ձեզ հաշվի առնել տարբեր պայմաններ HTML tag-ի  property-ն սահմանելիս:

Եկե՛ք նայենք օրինակին՝ ինչպես գիտեք՝ լինքերը HTML-ում նշվում են <a> tag-ով: Այդպիսով, մենք կարող ենք a-ը օգտագործել որպես selector CSS-ում:

               a {

                               color: blue;

               }

Լինքը կարող է ունենալ տարբեր կարգավիճակներ: Օրինակ՝ այն կարող է լինել unvisited  կամ visited: Դուք կարող եք օգտագործել pseudo-class-երը այցելված (visited) և չայցելված (unvisited ) լինքերին տարբեր style-եր հաղորդելու համար:

               a:link {

                               color: blue;

               }

               a:visited {

                               color: red;

               }

Օգտագործե՛ք a:link և a:visited չայցելված և այցելված լինքերի համար համապատասխանաբար: Ակտիվ լինքերն ունեն a:active pseudo-class և a:hover, երբ մկնիկը գտնվում է լինքի վրա:

Մենք կանդրադառնանք յուրաքանչյուր pseudo-class-ին առանձին՝ իր օրինակներով և բացատրությունով հանդերձ:

Pseudo-class: link

pseudo-class :link-ը օգտագործվում է այն լինքերի համար, որոնք տանում են դեպի չայցելված էջեր:

Ներքևում ցուցադրված օրինակում չայցելված լինքերը բաց կապույտով են նշված:

               a:link {

                               color: #6699CC;

               }

Pseudo-class: visited (այցելված)

pseudo-class :visited-ը օգտագործվում է այցելված էջերին տանող լինքերի համար: Օրինակ՝ ներքևում ցուցադրված կոդը բոլոր այցելված լինքերը կդարձնի մուգ մանուշակագույն:

               a:visited {

                               color: #660099;

               }

Pseudo-class: active

pseudo-class :active-ն օգտագործվում է ակտիվ լինքերի համար:

Այս օրինակը ակտիվ լինքերին տալիս է դեղին ֆոն:

               a:active {

                               background-color: #FFFF00;

               }

Pseudo-class: hover

pseudo-class :hover-ը օգտագործվում է, երբ մկնիկի սլաքը գտնվում է լինքի վրա:

Դա կարող է օգտագործվել հետաքրքիր էֆֆեկտներ ստանալու համար: Օրինակ՝ եթե մենք ցանկանում ենք, որ մեր լինքերը լինեն նարնջագույն գույնի և իտալիկ, երբ մկնիկի սլաքը գտնվում է դրանց վրա, մեր CSS-ը պետք է հետևյալ տեսքն ունենա:

               a:hover {

                               color: orange;

                               font-style: italic;

               }

Տառերի միջև հեռավորությունը  սահմանվում է letter-spacing property –ի միջոցով: Դա կարող է կիրառվել լինքերին հատուկ էֆֆեկտ ստանալու նպատակով:

               a:hover {

                               letter-spacing: 10px;

                               font-weight:bold;

                               color:red;

               }

Օրինակ: ՄԵԾԱՏԱՌ և փոքրատառ

text-transform property-ի միջոցով փոխում ենք մեծատառերն ու փոքրատառերը: Դա կարող է օգտագործվել նաև լինքերին էֆֆեկտ հաղորդելու համար:

               a:hover {

                               text-transform: uppercase;

                               font-weight:bold;

                               color:blue;

                               background-color:yellow;

               }

Վերացնել լինքերի ընդգծումը

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

Լինքերի ընդգծումը հանելը շատ հեշտ է: text-decoration property-ն կարող է օգտագործվլ տեքստի ընդգծման համար:  Ընգծումը հեռացնելու համար պարզապես պետք է text-decoration-ի արժեքը սահմանել none:

               a {

                               text-decoration:none;

               }

text-decoration-ը, ինչպես նաև մնացած property-ները կարող եք օգտագործել բոլոր 4 pseudo-class-երի համար:

               a:link {

                               color: blue;

                               text-decoration:none;

               }

               a:visited {

                               color: purple;

                               text-decoration:none;

               }

               a:active {

                               background-color: yellow;

                               text-decoration:none;

               }

               a:hover {

                               color:red;

                               text-decoration:none;

               }

Summary

Այս դասի միջոցով Դուք սովորեցիք pseudo-class-երի մասին՝ օգտագործելով անցյալ դասին քննարկված որոշ property-ներ:  Սա Ձեզ որոշակի պատկերացում պիտի տա CSS-ի տրամադրած հնարավորությունների մասին:

Հաջորդ դասին մենք կանդրադառնանք թե ինչպես է պետք սահմանել property-ները հատուկ էլեմենտների և էլեմենտների խմբերի համար:

Հարգելի ընթերցող, խնդրում ենք չմոռանալ like տալ մեր ֆեյսբուքյան էջին, քանի որ նորությունների մեծ մասը առաջինը տեղադրվում է հենց այնտեղ։ Ինչպես նաև հետևեք մեզ այլ սոցիալական ցանցերում և, իհարկե, գրանցվեք մեր բլոգում։

Share.