Cascading Style Sheets (CSS) шинж чанар нь вэб хуудасны гипер холбоосын өнгийг өөрчлөхөд ихэвчлэн ашиглагддаг. Энэ асуудлын шийдэл багатай шийдэл нь HTML хэл дээр байдаг (HyperText Markup Language - "hypertext markup language").
Энэ нь зайлшгүй шаардлагатай
HTML ба CSS хэлний анхан шатны мэдлэг
Зааварчилгаа
1-р алхам
Гипер холбоосуудад зориулж сарлагийн саваг бэлтгэ. Энгийн хэлбэрээр энэ нь иймэрхүү харагдаж магадгүй юм: {өнгө: Ногоон} Энд "а" -г "сонгогч" гэж нэрлэдэг бөгөөд энэ нь хаалтанд байгаа хэв маягийн тодорхойлолтыг баримт бичгийн бүх холбоос шошгонд ашиглах ёстойг харуулж байна. Ногоон нь холбоосын өнгийг тодорхойлдог бөгөөд энэ нь өнгөний маш бүдүүлэг тодорхойлолт бөгөөд ховор хэрэглэгддэг. Ихэнх тохиолдолд "псевдо анги" -г "а" сонгогч дээр нэмдэг бөгөөд энэ нь гурван өөр муж дахь холбоосын хэв маягийг тодорхойлох боломжийг олгодог шошго юм.
Алхам 2
Холбоосын хэвийн (идэвхгүй) төлөвийг хэвэнд оруулахын тулд холбоос псевдо классыг ашиглана уу. Энэ нь иймэрхүү харагдаж магадгүй, жишээлбэл: a: link {color: Green}
Алхам 3
Ховил дээр холбоос хэрхэн гарч ирэхийг зааж өгөхдөө хуурамч ангийн хулганыг ашиглана уу. Жишээ нь: a: hover {color: Lime}
Алхам 4
Очсон псевдо анги ашиглан аль хэдийн зочилсон холбоосын хэв маягийг тодорхойл. Жишээ нь: а: зочилсон {өнгө: DarkGreen}
Алхам 5
Бүх гурван төлөвийг нэг хэв маягийн тодорхойлолтын блок болгон нэгтгэнэ. CSS-ийн хэв маягийн тодорхойлолтыг агуулсан HTML кодын харагдах байдал нь жишээлбэл дараах байдалтай байж болно.
a: холбоос {өнгө: ногоон}
a: зочилсон {өнгө: DarkGreen}
a: hover {color: Lime}
Энд HTML загварын нээгдэж, хаагдаж байгаа хаягууд нь хөтөч дээр хэв маягийн тодорхойлолт хаана эхэлж төгсгөл болох талаар өгүүлдэг бөгөөд тэдгээрийн хооронд гурван төлөв дэх холбоос зан үйлийн тодорхойлолт байдаг.
Алхам 6
Дээр ашигласан дээж нь зөвхөн өнгөний шинж чанарыг харуулдаг боловч бусад шинж чанаруудыг тайлбар дотор багтааж болно. Жишээлбэл, хуудасны дизайны хувьд холбоосыг хэвийн (идэвхгүй) төлөвт доогуур зурах ёсгүй, харин курсорыг дарахад доогуур зураастай байхыг шаарддаг бол кодыг дараах байдлаар өөрчилж болно.
a: холбоос {өнгө: Ногоон; текст чимэглэл: байхгүй;}
a: зочилсон {өнгө: DarkGreen; текст чимэглэл: байхгүй;}
a: hover {color: Lime; текст чимэглэл: доогуур зураас;}
Алхам 7
Хэрэв та хуудсан дээрх зарим холбоосуудын өнгийг өөрчлөхийг хүсч, үлдсэнийг нь анхдагч тохиргоогоор үлдээхийг хүсвэл өөрчлөгдөж буй холбоос бүрийн шошгонд class шинж чанарыг нэмнэ үү. Жишээлбэл, энэ холбоосын ангиллыг newLinks гэж нэрлэ. Дараа нь холбоосын шошго иймэрхүү харагдаж магадгүй: текстийн холбоос Загварын тайлбар дээр ижил ангийн нэрийг нэмэх шаардлагатай:
a.newLinks: холбоос {өнгө: Ногоон; текст чимэглэл: байхгүй;}
a.newLinks: зочилсон {өнгө: DarkGreen; текст чимэглэл: байхгүй;}
a.newLinks: hover {color: Lime; текст чимэглэл: доогуур зураас;}
Алхам 8
Дээр тайлбарласан жишээнүүдээс бэлтгэсэн хэв маягийн тодорхойлолтын кодыг хуудасны толгой хэсэгт - ба шошгоны хооронд байрлуулна. Шаардлагатай бол холбоосын хаягуудад классын шинж чанарыг загварын тодорхойлолтод ашигласан нэрээр нэмнэ. Дараа нь өөрчлөгдсөн хуудсыг хадгалж, гипер холбоосын өнгийг өөрчлөх процедур дуусах болно.
