Bağlantılar web səhifələrində çox yaygındır, lakin bir çox veb-dizaynerlər CSS ilə olan əlaqələrini effektiv şəkildə manipulyasiya etmək və idarə etmək üçün güclə başa düşmürlər. Ziyaret, hover və aktiv dövlətlərlə əlaqə qura bilərsiniz. Əlavələrinizi daha çox pizzaz vermək və ya düymələr və ya hətta şəkillər kimi baxmaq üçün sərhədlər və arxa planlar ilə də işləyə bilərsiniz.
Çox web dizaynerləri "a" etiketində bir üslub müəyyən edərək başlayır:
a {rəng: qırmızı; }Bu , linkin bütün aspektlərini (hover, ziyarət və aktiv) tərtib edəcəkdir. Hər bir hissəni ayrı-ayrı olaraq tərtib etmək üçün, link keçid sinfləri istifadə etməlisiniz.
Link Pseudo-Classes
Siz müəyyənləşdirə biləcəyiniz 4 əsas söz-söhbət tipi vardır:
- link: bu link üçün standart stil
- : ziyarət - bir linki tıkladıktan sonra
- : hover - siçan bir keçid üzərində hazırlanır (əvvəlcədən klikləyin)
- aktivdir - hüququ linki tıklandığında
Bağlantı sözü sinifini müəyyən etmək üçün, CSS selektorunuzdakı bir etiketlə istifadə edin. Beləliklə, bütün əlaqələrinizin rəngi boz rəngini dəyişdirmək üçün yaz:
a: ziyarət {rəng: boz; }Stil bir keçid pseudo-class ifası varsa, hamısını tərtib etmək yaxşı bir fikirdir. Belə bir şəkildə kənar nəticələrlə təəccüblənməyəcəksiniz. Yəni yalnız ziyarət edilən rəngləri boz olaraq dəyişdirmək istəyirsən, əlaqənizin bütün digər yalançı xüsusiyyətləri qara qalır, belə yazarsınız:
a: link, a: hover, a: aktiv {rəng: qara; } a: ziyarət edilən {rəng: boz; }Link rənglərini dəyişdirin
Stil əlaqələrinin ən populyar yolu siçan üzərindən keçərkən rəng dəyişdirməkdir:
bir {color: # 00f; } a: hover {color: # 0f0; }Ancaq unutmayın ki, linkin onlar ilə əlaqəli olaraq necə göründüyünə təsir edə bilərsiniz: aktiv mülk:
bir {color: # 00f; } a: aktiv {color: # f00; }Yoxsa aşağıdakı linki ilə ziyarət etdiyiniz əlaqənin necə göründüyü: ziyarət edilən əmlak:
bir {color: # 00f; } a: ziyarət edilmiş {color: # f0f; }Hamısını birlikdə qoymaq üçün:
bir {color: # 00f; } a: ziyarət edilmiş {color: # f0f; } a: hover {color: # 0f0; } a: aktiv {color: # f00; }İkonları və ya güllələri əlavə etmək üçün Bağlantılara Arka Planlar qoyun
Şık Arka Planlar məqaləsində olduğu kimi bir ardıcıllığa bir fon əlavə edə bilərsiniz, ancaq bir az fon ilə oynayaraq əlaqəli bir simvolu olan bir keçid yarada bilərsiniz. Mətn böyük olmadıqda 15px ətrafında 15px ətrafında kiçik bir simvol seçin. Arxanı linkin bir tərəfinə yerləşdirin və təkrar etmə seçimini təkrarlamayın. Sonra keçiddə olan mətn simgeyi görmək üçün kifayət qədər sola və ya sağa köçürülməlidir.
bir {dolgu: 0 2px 1px 15px; background: #fff url (ball.gif) left center heç təkrar; rəng: # c00; }Simgenizi aldıktan sonra, əlaqəni dəyişdirmək üçün hover, aktiv və simgelerinizi ziyarət etdiyiniz kimi fərqli bir şəkil qura bilərsiniz:
bir {dolgu: 0 2px 1px 15px; background: #fff url (ball.gif) left center heç təkrar; rəng: # c00; } a: hover {background: #fff url (ball2.gif) sol mərkəzdə təkrarlanmadı; } a: effektiv {fon: #fff url (ball3.gif) sol mərkəz təkrarlanmadı; }Bağlantılarınızı Düymələrə baxın
Düymələr çox populyardır, amma CSS gəlib çatana qədər, səhifələrinizin yüklənməsini daha uzun sürməsini təmin edən şəkilləri istifadə edərək düymələr yaratmaq məcburiyyətində oldunuz. Xoşbəxtlikdən, CSS ilə asanlıqla bir düyməsinə bənzər təsiri yaratmağa kömək edə biləcək bir sərhəd stili var.
a {border: 4px başlanğıc; padding: 2px; mətn dekorasiyası: none; } a: aktiv {border: 4px daxili; }Qeyd edək ki, rəngləri başlanğıcda və əlavə üslubda qoyduğunuzda, brauzerlər siz gözlədiyiniz kimi onları göstərmək mümkün deyil. Beləliklə, burada rəngli sərhədləri olan bir fancier düyməsi var:
a {border-style: solid; sərhəd eni: 1px 4px 4px 1px; mətn dekorasiyası: none; padding: 4px; sərhəd rəngli: # 69f # 00f # 00f # 69f; }Və bir düyməsinə keçidinizin hover və aktiv üslublarını da təsir edə bilər, yalnız bu sözdəki sinfləri istifadə edin:
a: link {border-style: solid; sərhəd eni: 1px 4px 4px 1px; mətn dekorasiyası: none; padding: 4px; sərhəd rəngli: # 69f # 00f # 00f # 69f; } a: hover {border-color: #ccc; }