Холбоосууд нь вэб хуудсанд маш түгээмэл байдаг боловч олон вэб дизайнерууд өөрсдийн холбоосыг үр дүнтэй удирдах, зохицуулахын тулд CSS- тэй байх хүчийг ойлгодоггүй. Та зочлох, хөдлөх, идэвхтэй мужуудтай холбоосыг тодорхойлох боломжтой. Мөн та хил хязгаар, суурь дэвсгэртэй ажиллах боломжтой бөгөөд холбоосуудаа илүү pizzaz эсвэл товчлуурууд эсвэл зураг шиг харуулах боломжтой.
Ихэнх вэб дизайнерууд "a" дээр хэв маягийг тодорхойлж эхэлнэ:
a {color: red; }Энэ нь холбоосын бүх талыг (hover, visited, active) загварчилна. Хэсэг тус бүрийг тусад нь ангилахын тулд та холбоос псевдо-классыг ашиглах ёстой.
Псевдо классын холбоос
Тодорхойлж болох псевдо-класс холболтын дөрвөн үндсэн төрлүүд байдаг:
- : холбоос - энэ бол холболтын анхдагч загвар юм
- : зочилсон - холбоосыг товшсоны дараа
- : hover - хулганыг линк дээр дарна (урьдчилан харах)
- : идэвхтэй - холбоосыг товшсон үед зөв холбоно
Псевдо-класст холбоосыг тодорхойлохын тулд CSS-ийн сонгон шалгаруулагчийн хаягийг ашиглана уу. Тэгэхээр саарал өнгийн бүх холбоосууд нь зочилсон өнгийг өөрчлөхийн тулд бичнэ үү:
a: visited {color: gray; }Хэрэв та псевдо классын нэг холбоосыг хэвлээд байвал бүгдийг нь хэвлэ. Ингэснээр та гадны үр дүнгээс гайхахгүй. Хэрэв та зочлох өнгөийг саарал болгож өөрчлөхийг хүсвэл таны холбоосуудын бусад бүх псевдо-шинж чанарууд хар хэвээр байвал та дараах байдлаар бичих болно:
а: холбоос, а: hover, a: active {color: black; } a: зочилсон {өнгө: саарал; }Холбоосын өнгө өөрчлөх
Холбоосыг загварчлахад хамгийн түгээмэл арга бол хулганыг үүнд шилжих үед өнгийг өөрчлөх явдал юм:
a {color: # 00f; } a: hover {color: # 0f0; }Гэхдээ та холбоос дээр дарж байгаад ямар нөлөө үзүүлж болохыг мартаж болохгүй: идэвхтэй өмч:
a {color: # 00f; } a: active {color: # f00; }Эсвэл дараах холбоосыг доорх линкээр харуулав:
a {color: # 00f; } a: visited {color: # f0f; }Хамтдаа бүгдийг нь хийцгээе:
a {color: # 00f; } a: visited {color: # f0f; } a: hover {color: # 0f0; } a: active {color: # f00; }Холбоосууд буюу сумуудыг нэмэхийн тулд холбоосууд дээрхи зургийг тавих
Та Загварын Үндэслэлийн өгүүлэлтэй адилхан холбоос дээр байрлуулж болно, гэхдээ арай бага зэрэг тоглох замаар холбоос үүсгэх холбоос үүсгэж болно. Жижиг текстийг 15px-ээр 15px-р сонгоно уу. Холбоосын нэг талыг дэвсгэр дээр тавин давтагдах тохируулгыг no-repeat болгон тохируулна. Дараа нь холбоос дээр дарж текст дотор текстийг зүүн буюу баруун талдаа хангалттай зөөгдөж шилжүүлэхийн тулд дүрсийг харах боломжтой.
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-repeat; } a: active {background: #fff url (ball3.gif) left center no-repeat; }Холбоосуудаа Товчнууд шиг харагдуулна
Товчнууд нь маш их алдартай боловч CSS үргэлжлэх хүртэл та зургуудаа ашиглан товчлуурууд үүсгэх ёстой бөгөөд ингэснээр таны хуудсыг ачааллахад илүү урт хугацаа шаардагдана. Аз болоход, танд CSS товчоор амархан товчлуур мэт нөлөө үзүүлэхэд туслах хилийн хэв маягийг бий болгодог.
a {border: 4px эхлэл; padding: 2px; текст-чимэглэл: none; } a: active {border: 4px inset; }Тэмдэглэж хэлэхэд, та өнөө үед өнгө, оруулгын хэв маягийг өнгө оруулснаар хөтчүүд нь тэдгээрийг хүссэнээр үзүүлэхийг хүсдэггүй. Тэгэхээр энд өнгөт хил бүхий нисгэгч товч байна:
a {border-style: solid; border-width: 1px 4px 4px 1px; текст-чимэглэл: none; padding: 4px; хилийн өнгө: # 69f # 00f # 00f # 69f; }Мөн та товчлуурын холбоос дээрх идэвхтэй болон идэвхтэй хэлбэрүүдэд нөлөөлж чадна, тэдгээрийг зөвхөн псевдо-классыг ашигладаг:
a: link {border-style: solid; border-width: 1px 4px 4px 1px; текст-чимэглэл: none; padding: 4px; хилийн өнгө: # 69f # 00f # 00f # 69f; } a: hover {border color: #ccc; }