ป้ายกำกับ: css links คือ

LV.27 CSS Links

Posted on by alsoon

CSS Links ลิงก์สามารถกำหนดสไตล์ด้วยคุณสมบัติของ CSS ใดก็ได้ เช่น color, font-family, background

ตัวอย่าง

<!DOCTYPE html>
<html lang="th-TH">
	<head>
		<title>nkaub | CSS Links</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta charset="UTF-8">
		<meta name="description" content="ทำเว็บไซต์เอง HTML CSS JavaScript jQuery PHP MySql">
		<meta name="keywords" content="ทำเว็บไซต์เอง, HTML, CSS, JavaScript, jQuery, PHP, MySql">
		<meta name="author" content="Theethawat Chetjeerasioon">
		
		<style>
			a {
				font-size: 46px;
			}
			
			/* unvisited link */
			a:link {
				color: blue;
			}

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

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

			/* selected link */
			a:active {
				color: green;
			}
		</style>
	</head>
	<body>
	
		<a href="#">Link...</a>
		
	</body>
</html>

Text Decoration

text-decoration ขีดเส้นข้อความ

ตัวอย่าง

<!DOCTYPE html>
<html lang="th-TH">
	<head>
		<title>nkaub | CSS Text Decoration</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta charset="UTF-8">
		<meta name="description" content="ทำเว็บไซต์เอง HTML CSS JavaScript jQuery PHP MySql">
		<meta name="keywords" content="ทำเว็บไซต์เอง, HTML, CSS, JavaScript, jQuery, PHP, MySql">
		<meta name="author" content="Theethawat Chetjeerasioon">
		
		<style>
			a {
				text-decoration: none;
			}
			
			a:hover {
				font-size: 46px;
				text-decoration: underline;
			}

		</style>
	</head>
	<body>
	
		<a href="#">Link...</a>
		
	</body>
</html>

Background Color

background-color เพิ่มสีพื้นหลังให้ลิงค์

<!DOCTYPE html>
<html lang="th-TH">
	<head>
		<title>nkaub | CSS Background Color</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta charset="UTF-8">
		<meta name="description" content="ทำเว็บไซต์เอง HTML CSS JavaScript jQuery PHP MySql">
		<meta name="keywords" content="ทำเว็บไซต์เอง, HTML, CSS, JavaScript, jQuery, PHP, MySql">
		<meta name="author" content="Theethawat Chetjeerasioon">
		
		<style>
			a {
				color: #fff;
				padding: 30px;
			}
			
			a:link {
				background-color: yellow;
			}

			a:visited {
				background-color: blue;
			}

			a:hover {
				background-color: green;
			}

			a:active {
				background-color: pink;
			} 
		</style>
	</head>
	<body>
		
		<a href="#">Link...</a>
		
	</body>
</html>

Link Buttons

เป็นการทำลิงค์ให้เป็นปุ่มหรือกล่อง

ตัวอย่าง

<!DOCTYPE html>
<html lang="th-TH">
	<head>
		<title>nkaub | CSS Link Buttons</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta charset="UTF-8">
		<meta name="description" content="ทำเว็บไซต์เอง HTML CSS JavaScript jQuery PHP MySql">
		<meta name="keywords" content="ทำเว็บไซต์เอง, HTML, CSS, JavaScript, jQuery, PHP, MySql">
		<meta name="author" content="Theethawat Chetjeerasioon">
		
		<style>
			a:link, a:visited {
				background-color: rgb(0,255,0);
				color: white;
				padding: 14px 25px;
				text-align: center;
				text-decoration: none;
				display: inline-block;
			}

			a:hover, a:active {
				background-color: rgba(0,255,0,0.2);
			}
		</style>
	</head>
	<body>
	
		<a href="#">Link...</a>
		
	</body>
</html>
Top