เกี่ยวการคลิกแล้วลิงค์เชื่อมไปอีก หน้าหนึ่ง คลิกเข้าไปในเว็บไซต์ เช่นการคลิกผ่านทางข้อความ รูปภาพ ไอคอน ปุ่ม แล้วแต่เราจะกำหนด
เนื้อหาฝั่ง HTML
<div class="container">
<div class="m-3">
<a href="https://www.google.com" target="_blank">This LInk</a>
</div>
<div class="m-3">
<a href="https://www.google.com" target="_blank">This LInk</a>
</div>
</div>Styling Links ออกแบบการลิงค์
เราสามารถออกแบบลิงค์ กับ CSS เช่น (e.g. color, font-family, background, etc.)
a {
color: rgb(243, 255, 80);
}
การเพิ่มลิงค์ สามารถออกแบบให้มีความแตกต่างขึ้นอยู่กับ สถานะ และสถานะการลิงค์ มี 4 แบบ ดังนี้
a:link = เชื่อมโยง
a:visited = มาเยือน
a:hover = เลื่อนเมาส์ใกล้
a:active = การใช้งานมาลองเขียนกัน
a:link {
color: red; //เชื่อมโยง
}
a:visited {
color: yellow; //มาเยือน
}
a:hover {
color: hotpink; //เลื่อนเมาส์ใกล้
}
a:active {
color: blue; //การใช้งาน
}
Text Decoration ตกแต่งข้อความ
text-decoration ส่วนใหญ่ใช้จะเอาขีดเส้นใต้ออก ดังนี้ underline มีขีดเส้นใต้ ถ้าไม่เอาขีดเส้นใต้ใช้ none
a:link {
color: red; //เชื่อมโยง
text-decoration: none; //เอาขีดเส้นใต้ออก
}
a:visited{
color:yellow; //มาเยือน
text-decoration: none; //เอาขีดเส้นใต้ออก
}
a:hover {
color: hotpink; //เลื่อนเมาส์ใกล้
text-decoration: none; //เอาขีดเส้นใต้ออก
}
a:active {
color: blue; //การใช้งาน
text-decoration: none; //เอาขีดเส้นใต้ออก
}Background Color สีพื้นหลัง
background-color สามารถใช้ระบุสีพื้นหลังได้
a:link {
color: red; //เชื่อมโยง
text-decoration: none; //เอาขีดเส้นใต้ออก
background-color: darkseagreen; //สีพื้นหลังข้อความ
}
a:visited{
color:yellow; //มาเยือน
text-decoration: none; //เอาขีดเส้นใต้ออก
background-color: darkseagreen; //สีพื้นหลังข้อความ
}
a:hover {
color: hotpink; //เลื่อนเมาส์ใกล้
text-decoration: none; //เอาขีดเส้นใต้ออก
background-color:cornflowerblue; //สีพื้นหลังข้อความ
}
a:active {
color: blue; //การใช้งาน
text-decoration: none; //เอาขีดเส้นใต้ออก
background-color:cornflowerblue; //สีพื้นหลังข้อความ
}
Advanced — Link Buttons
เราได้นำคุณสมบัติของ CSS หลายรายการเพื่อแสดงลิงก์เป็นกล่อง / ปุ่ม
a:link, a:visited {
background-color: coral;
color: white;
padding: 14px 25px;
text-align: center;
text-decoration: none;
display: inline-block;
}a:hover, a:active {
background-color: grey;
}
จบแล้ววว ลองเอามาประยุกต์ใช้กันเน้อ บ๊ะบายยยย เจอกันเรื่อง CSS Lists เน้อ
