Cascading Style Sheets (CSS) atributi ko'pincha veb-sahifalardagi ko'priklarning rangini o'zgartirish uchun ishlatiladi. Ushbu muammoning kamroq funktsional echimlari HTML tilida (HyperText Markup Language - "gipermatnni belgilash tili").
Bu zarur
HTML va CSS tillari haqida asosiy bilimlar
Ko'rsatmalar
1-qadam
Ko'priklar uchun uslublar blokini tayyorlang. Oddiy ko'rinishida u quyidagicha ko'rinishi mumkin: a {rang: Yashil} Bu erda "a" "selektor" deb nomlanadi, bu qavs ichidagi uslub tavsifini hujjatdagi barcha bog'lanish teglariga qo'llash kerakligini bildiradi. Yashil rang bog'lanish rangini belgilaydi; bu rangning juda qo'pol ta'rifi va kamdan kam qo'llaniladi. Ko'pincha, "a" selektoriga "psevdo-class" qo'shiladi - bu uch xil holatdagi bog'lanish uslubini belgilashga imkon beruvchi yorliq.
2-qadam
Havolaning normal (nofaol) holatini shakllantirish uchun pseudo-class havolasidan foydalaning. Bunday ko'rinishi mumkin, masalan: a: link {color: Green}
3-qadam
Havola Hover-da qanday paydo bo'lishi kerakligini ko'rsatish uchun pseudo-class hover-dan foydalaning. Masalan: a: hover {color: Lime}
4-qadam
Oldindan tashrif buyurilgan havolaning uslubini tavsiflash uchun tashrif buyurilgan psevdo-klassdan foydalaning. Masalan: a: tashrif buyurilgan {color: DarkGreen}
5-qadam
Uchala holatni bitta uslubni tavsiflash blokiga birlashtiring. CSS tavsiflarini o'z ichiga olgan HTML kodining ko'rinishi, masalan, quyidagicha ko'rinishi mumkin:
a: havola {color: Green}
a: tashrif buyurilgan {color: DarkGreen}
a: hover {color: Lime}
Bu erda HTML uslubidagi ochilish va yopilish teglari brauzerda uslublar tavsiflari qaerda boshlanishi va tugashi haqida ma'lumot beradi va ular orasida uchta holatdagi bog'lanish xatti-harakatining tavsifi mavjud.
6-qadam
Yuqorida ishlatilgan namuna faqat rang xususiyatlarini ko'rsatadi, ammo tavsifga boshqa atributlarni kiritish mumkin. Masalan, agar sahifa dizayni havolaning normal (harakatsiz) holatida chizilmasligini, lekin kursor ustiga qo'yilganda tagining ostiga chizilishini talab qilsa, u holda kod quyidagicha o'zgartirilishi mumkin:
a: link {color: Green; matnni bezatish: yo'q;}
a: tashrif buyurilgan {color: DarkGreen; matnni bezatish: yo'q;}
a: hover {color: Lime; matnni bezatish: tagiga chizish;}
7-qadam
Agar siz sahifadagi ba'zi bir havolalarning rangini o'zgartirishni xohlasangiz va qolganlarini standart sozlamalar bilan qoldirsangiz, u holda har bir o'zgartirilayotgan havolaning yorlig'iga class atributini qo'shing. Masalan, ushbu hiperstansiya sinfiga newLinks deb nom bering. Keyin havola yorlig'i shunday ko'rinishi mumkin: matn havolasi Uslub tavsifiga bir xil sinf nomi qo'shilishi kerak:
a.newLinks: havola {rang: Yashil; matnni bezatish: yo'q;}
a.newLinks: tashrif buyurilgan {color: DarkGreen; matnni bezatish: yo'q;}
a.newLinks: hover {color: Lime; matnni bezatish: tagiga chizish;}
8-qadam
Yuqorida tavsiflangan misollardan tayyorlangan uslub tavsif kodini sahifaning sarlavhasida - va teglar orasiga joylashtiring. Agar kerak bo'lsa, havola teglariga sinf tavsifida ishlatiladigan nom bilan sinf atributini qo'shing. Keyin o'zgartirilgan sahifani saqlang va ko'priklarning rangini o'zgartirish tartibi tugaydi.
