ลิงค์ CSS
ด้วย CSS ลิงก์สามารถจัดรูปแบบได้หลายวิธี
ลิงค์ข้อความ ลิงค์ ข้อความ ลิงค์ข้อความ ปุ่มลิงค์ ปุ่มลิงค์
ลิงค์จัดแต่งทรงผม
ลิงก์สามารถกำหนดสไตล์ด้วยคุณสมบัติ CSS ใดก็ได้ (เช่นcolor, font-family,
background, ฯลฯ )
ตัวอย่าง
a {
color: hotpink;
}
นอกจากนี้ ลิงก์สามารถจัดรูปแบบได้แตกต่างกันไปขึ้นอยู่กับสถานะที่อยู่ในนั้น
สถานะการเชื่อมโยงทั้งสี่คือ:
a:link- ลิงค์ปกติที่ไม่ได้เยี่ยมชมa:visited- ลิงค์ที่ผู้ใช้เคยเยี่ยมชมa:hover- ลิงค์เมื่อผู้ใช้วางเมาส์เหนือมัน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;
}
ตัวอย่างเพิ่มเติม
ตัวอย่าง
ตัวอย่างนี้สาธิตวิธีการเพิ่มสไตล์อื่นๆ ให้กับไฮเปอร์ลิงก์:
a.one:link {color: #ff0000;}
a.one:visited {color: #0000ff;}
a.one:hover
{color: #ffcc00;}
a.two:link {color: #ff0000;}
a.two:visited {color:
#0000ff;}
a.two:hover {font-size: 150%;}
a.three:link {color:
#ff0000;}
a.three:visited {color: #0000ff;}
a.three:hover {background:
#66ff66;}
a.four:link {color: #ff0000;}
a.four:visited {color:
#0000ff;}
a.four:hover {font-family: monospace;}
a.five:link {color:
#ff0000; text-decoration: none;}
a.five:visited {color: #0000ff;
text-decoration: none;}
a.five:hover {text-decoration: underline;}
ตัวอย่าง
อีกตัวอย่างหนึ่งของการสร้างกล่องลิงก์/ปุ่ม:
a:link, a:visited {
background-color: white;
color: black;
border: 2px solid green;
padding: 10px 20px;
text-align:
center;
text-decoration: none;
display: inline-block;
}
a:hover, a:active
{
background-color: green;
color: white;
}
ตัวอย่าง
ตัวอย่างนี้แสดงเคอร์เซอร์ประเภทต่างๆ (มีประโยชน์สำหรับลิงก์):
<span style="cursor: auto">auto</span><br>
<span style="cursor:
crosshair">crosshair</span><br>
<span style="cursor:
default">default</span><br>
<span style="cursor: e-resize">e-resize</span><br>
<span style="cursor: help">help</span><br>
<span style="cursor:
move">move</span><br>
<span style="cursor: n-resize">n-resize</span><br>
<span style="cursor: ne-resize">ne-resize</span><br>
<span style="cursor:
nw-resize">nw-resize</span><br>
<span style="cursor:
pointer">pointer</span><br>
<span style="cursor: progress">progress</span><br>
<span style="cursor: s-resize">s-resize</span><br>
<span style="cursor:
se-resize">se-resize</span><br>
<span style="cursor: sw-resize">sw-resize</span><br>
<span style="cursor: text">text</span><br>
<span style="cursor:
w-resize">w-resize</span><br>
<span style="cursor: wait">wait</span>