ການປະຕິບັດ CSS

ດ້ວຍ CSS, ພວກເຮົາສາມາດກໍານົດຮູບແບບການເຊື່ອມໃນວິທີຫຼາຍຢ່າງ.

ການເຊື່ອມມວນຊົນ ການເຊື່ອມມວນຊົນ ກະບັບສະເພາະ ກະບັບສະເພາະ

ກໍານົດຮູບແບບການເຊື່ອມ

ການເຊື່ອມສາມາດນຳໃຊ້ປະສົມຂອງ CSS ອີກຫຼາຍຢ່າງ(ອີກ color,font-family,background ແລະອີກ()ເພື່ອກໍານົດຮູບແບບ.

ຄວາມຄົນ

a {
  color: hotpink;
}

Try It Yourself

ອີກຢ່າງໜຶ່ງແມ່ນສາມາດກໍານົດຮູບແບບການເຊື່ອມອີກຫຼາຍຢ່າງອີກພາຍໃນສະຖານະການຂອງການເຊື່ອມ:

ສະຖານະການການເຊື່ອມທີ່ສີ່ຫຼາຍ:

  • a:link - ການເຊື່ອມທີ່ຍັງບໍ່ໄດ້ຮັບການເຂົ້າຫາ:
  • a:visited - ການເຊື່ອມທີ່ໄດ້ຮັບການເຂົ້າຫາ:
  • a:hover - ຜູ້ນຳໃຊ້ຈະຍົກເຫມືອງຫຼັງການເຊື່ອມ:
  • a:active - ການປະກົດການເຊື່ອມຖືກກົດສົມທຽບ:

ຄວາມຄົນ

/* ການເປັນການເຊື່ອມທີ່ບໍ່ໄດ້ຮັບການເຂົ້າຫາ */
a:link {
  color: red;
}
/* ການເປັນການເຊື່ອມທີ່ໄດ້ຮັບການເຂົ້າຫາ */
a:visited {
  color: green;
}
/* ການຍົກຂອງເຫມືອງຫຼັງການເຊື່ອມ */
a:hover {
  color: hotpink;
}
/* ການເປັນການເລືອກການເຊື່ອມ */
a:active {
  color: blue;
}

Try It Yourself

ຖ້າຕ້ອງກໍານົດຮູບແບບສຳລັບຫຼາຍສະຖານະການການເຊື່ອມແລ້ວໃຫ້ຕາມກົດລະບຽບທີ່:

  • a:hover ຕ້ອງຢູ່ຫຼັງ a:link ແລະ a:visited
  • a:active ຕ້ອງຢູ່ຫຼັງ a:hover

ການສະແດງມີສີຫຼັງ

text-decoration ປະສົມສຳລັບການຫຼົບຫຼວງສີລະຫວ່າງການເຊື່ອມ:

ຄວາມຄົນ

a:link {
  text-decoration: none;
}
a:visited {
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}
a:active {
  text-decoration: underline;
}

Try It Yourself

ສີຫຼັງ

background-color ປະສົມຂອງສຳລັບການກໍານົດສີຫຼັງການເຊື່ອມ:

ຄວາມຄົນ

a:link {
  background-color: yellow;
}
a:visited {
  background-color: cyan;
}
a:hover {
  background-color: lightgreen;
}
a:active {
  background-color: hotpink;
}

Try It Yourself

ກະບັບສະເພາະ

ນີ້ເປັນຄວາມທີ່ສະແດງການພະຍາຍາມທີ່ສູງກວ່ານັ້ນທີ່ພວກເຮົາຈະປະສົມປະກອບຫຼາຍຢ່າງຂອງ CSS ເພື່ອສະແດງການເຊື່ອມຕໍ່ຢ່າງກາຍ/ກະບັບບາງ:

ຄວາມຄົນ

a:link, a:visited {
  background-color: #f44336;
  color: white;
  padding: 14px 25px;
  text-align: center; 
  text-decoration: none;
  display: inline-block;
}
a:hover, a:active {
  background-color: red;
}

Try It Yourself

More Examples

Add different styles to hyperlinks
This example demonstrates how to add other styles to hyperlinks.
Advanced - Create bordered link button
This is another example of how to create a link box/button.
Change Cursor
cursor property specifies the type of cursor to be displayed. This example demonstrates different types of cursors (useful for links).