CSS Холбоос /Links/

CSS-ийн тусламжтай холбоосыг олон янзаар загварчлах боломжтой.

Энэ бол хобоос        Энэ бол хобоос

Холбоосын загварууд

Холбоосыг шинж чанараар нь загварчилж болно. /өнгө, дэвсгэр өнгө, үсгийн фонт, гэх мэт/

<style>
a {
  color: green;
}
</style>

Холбоосыг тухайн мужаас хамаарч өөр өөр байдлаар загварчлах боломжтой.

Холболтын дөрвөн муж байдаг.

• a:link - Ердийн үед буюу холбоос дээр дараагүй үед
• a:visited - Хэрэглэгч холбоос дээр дарсан үед
• a:hover - Холбоос дээр хулгана очих үед
• a:active - Холбоос дээр дарж байх үед

Холбоосын загварууд

Холбоосыг тухайн мужаас хамаарч өөр өөр байдлаар загварчлах боломжтой.

Холболтын дөрвөн муж байдаг. a:link - Ердийн үед буюу холбоос дээр дараагүй үед a:visited - Хэрэглэгч холбоос дээр дарсан үед a:hover - Холбоос дээр хулгана очих үед a:active - Холбоос дээр дарж байх үед

<style>
/* Холбоос дээр дараагүй үед улаан */
a:link {
  color: red;
}
/* Холбоос дээр дарсан үед цэнхэр */
a:visited {
  color: blue;
}
/* Хулган холбоос дээр очих үед шар */
a:hover {
  color: yellow;
}
/* Сонгох үед хар */
a:active {
  color: black;
}
</style>

Текст Decoration

text-decoration шинж чанарт холбоосны доогуур зураасыг зааж өгнө.

<style>
a:link {
  text-decoration: none;
}
a:visited {
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}
a:active {
  text-decoration: underline;
}
</style>

Дэвсгэр өнгө /Background Color/

background-color шинж чанарт холбоосны дэвсгэр өнгийг зааж өгнө.

<style>
a:link {
  background-color: red;
}

a:visited {
  background-color: yellow;
}

a:hover {
  background-color: orange;
}

a:active {
  background-color: green;
} 
</style>

Холбоос товчлуур /Link Buttons/

Холбоосын CSS-н тусламжтай товч хэлбэртэй харуулж болно.

<style>
a:link, a:visited {
  background-color: MediumSeaGreen;
  color: white;
  padding: 15px 25px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
}

a:hover, a:active {
  background-color: green;
}
</style>

Сэтгэгдэлүүд