CSSการเชื่อมโยง

❮ก่อนหน้า ❯บทถัดไป

ด้วย CSS เชื่อมโยงสามารถสไตล์ในรูปแบบต่างๆ

ลิงค์ข้อความ ลิงค์ข้อความ ปุ่มลิงก์ ปุ่มลิงก์

ลิงค์ที่จัดแต่งทรงผม

ลิงค์ที่สามารถตกแต่งด้วยคุณสมบัติ CSS ใด ๆ (เช่น color , font-family , background , ฯลฯ )

ตัวอย่าง

a {
color: hotpink;
}

ลองตัวเอง»

นอกจากนี้การเชื่อมโยงสามารถสไตล์แตกต่างกันขึ้นอยู่กับสิ่งที่รัฐพวกเขาอยู่ใน

สี่การเชื่อมโยงรัฐ ได้แก่ :

a:link - ปกติการเชื่อมโยง unvisited
a:visited - การเชื่อมโยงผู้ใช้ได้เข้าเยี่ยมชม
a:hover - การเชื่อมโยงเมื่อ mouses ผู้ใช้มากกว่านั้น
a:active - การเชื่อมโยงในขณะที่มีการคลิก

ตัวอย่าง

/* unvisited link */
a:link {
    color: red;
}

/* visited link */
a:visited {
    color: green;
}

/* mouse over link */
a:hover {
    color: hotpink;
}

/* selected link */
a:active {
    color: blue;
}

ลองตัวเอง»

เมื่อตั้งค่ารูปแบบการเชื่อมโยงสำหรับรัฐหลายมีกฎสั่งซื้อ:

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;
}

ลองตัวเอง»

สีพื้นหลัง

background-color ของสถานที่สามารถนำมาใช้เพื่อระบุสีพื้นหลังสำหรับการเชื่อมโยง:

ตัวอย่าง

a:link {
    background-color: yellow;
}

a:visited {
    background-color: cyan;
}

a:hover {
    background-color: lightgreen;
}

a:active {
    background-color: hotpink;
}

ลองตัวเอง»

ขั้นสูง - ปุ่มเชื่อมโยง

ตัวอย่างนี้แสดงให้เห็นถึงตัวอย่างที่สูงกว่าที่เรารวม 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;
}

ลองตัวเอง»