Lv.25 CSS Text

CSS Text เป็นการกำหนดคุณสมบัติต่างๆสำหรับการจัดรูปแบบของข้อความ

CSS Text Color

กำหนดสีให้กับข้อความ เช่น red #fff rgb(255,0,0)

ตัวอย่าง

<!DOCTYPE html>
<html lang="th-TH">
	<head>
		<title>nkaub | CSS Text</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>
			h1 {
				color: red;
			}
			
			h2 {
				color: #0000ff;
			}
			
			p {
				color: rgb(255,165,0);
			}
			
		</style>
	</head>
	<body>
		
		<h1>หัวเรื่อง H1<h/1>
		<h2>หัวเรื่อง H1<h/2>
		<p>พารากราฟ</p>
		
	</body>
</html>

CSS Text Alignment

text-align เป็นการตำแหน่งของข้อความให้อยู่ ซ้าย กลาง ขวา

<!DOCTYPE html>
<html lang="th-TH">
	<head>
		<title>nkaub | CSS Text Alignment</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>
			h1 {
				color: red;
				text-align: left;
			}
			
			h2 {
				color: #0000ff;
				text-align: center;
			}
			
			p {
				color: rgb(255,165,0);
				text-align: right;
			}
			
		</style>
	</head>
	<body>
		
		<h1>หัวเรื่อง H1</h1>
		<h2>หัวเรื่อง H2</h2>
		<p>พารากราฟ</p>
		
	</body>
</html>

CSS Text Decoration

text-decoration ใช้สำหรับลบเส้นขีดใต้แท็ก <a> หรือเพิ่มขีดเส้นใต้ให้กับข้อความ

ตัวอย่าง

<!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>
			h1 {
				color: red;
				text-align: left;
				text-decoration: overline;
			}
			
			h2 {
				color: #0000ff;
				text-align: center;
				text-decoration: line-through;
			}
			
			h3 {
				color: rgb(255, 165, 0);
				text-align: right;
				text-decoration: underline;
			}
			
			a {
				text-decoration: none;
			}
			
		</style>
	</head>
	<body>
		
		<h1>หัวเรื่อง H1</h1>
		<h2>หัวเรื่อง H2</h2>
		<h3>หัวเรื่อง H3</h3>
		<a href="#">Text Link..</a>
		
	</body>
</html>

CSS Text Transformation

text-transform ใช้เพื่อระบุตัวพิมพ์ใหญ่และตัวพิมพ์เล็กในข้อความ

ตัวอย่าง

<!DOCTYPE html>
<html lang="th-TH">
	<head>
		<title>nkaub | CSS Text Transformation</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>
			h1 {
				color: red;
				text-align: left;
				text-decoration: overline;
				text-transform: uppercase;
			}
			
			h2 {
				color: #0000ff;
				text-align: center;
				text-decoration: line-through;
				text-transform: lowercase;
			}
			
			h3 {
				color: rgb(255, 165, 0);
				text-align: right;
				text-decoration: underline;
				text-transform: capitalize;
			}
			
		</style>
	</head>
	<body>
		
		<h1>หัวเรื่อง H1 uppercase</h1>
		<h2>หัวเรื่อง H2 lowercase</h2>
		<h3>หัวเรื่อง H3 capitalize</h3>
		
	</body>
</html>

CSS Text Spacing

text-indent ใช้เพื่อระบุการเยื้องของบรรทัดแรกของข้อความ

ตัวอย่าง

<!DOCTYPE html>
<html lang="th-TH">
	<head>
		<title>nkaub | CSS Text Spacing</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>
			
			p {
				text-indent: 100px;
			}
			
		</style>
	</head>
	<body>
		
		<p>ใช้เพื่อระบุการเยื้องของบรรทัดแรกของข้อความ</p>
		
	</body>
</html>

letter-spacing ใช้เพื่อเว้นวรรคตัวอักษรหรือระบุช่องว่างระหว่างอักขระในข้อความ

ตัวอย่าง

<!DOCTYPE html>
<html lang="th-TH">
	<head>
		<title>nkaub | CSS Text Spacing</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>
			
			h1 {
				letter-spacing: 10px;
			}

			h2 {
				letter-spacing: -5px;
			}
			
		</style>
	</head>
	<body>
		
		<h1>ใช้เพื่อเว้นวรรคตัวอักษรหรือระบุช่องว่างระหว่างอักขระในข้อความ</h1>
		<h2>ใช้เพื่อเว้นวรรคตัวอักษรหรือระบุช่องว่างระหว่างอักขระในข้อความ</h2>
		
	</body>
</html>

line-height ใช้เพื่อเพิ่มความสูงของบรรทัด

ตัวอย่าง

<!DOCTYPE html>
<html lang="th-TH">
	<head>
		<title>nkaub | CSS Text Spacing</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>
			
			h1 {
				letter-spacing: 10px;
				line-height: 1.8;
			}

			h2 {
				letter-spacing: -5px;
				line-height: 0.8;
			}
			
		</style>
	</head>
	<body>
		
		<h1>ใช้เพื่อเว้นวรรคตัวอักษรหรือระบุช่องว่างระหว่างอักขระในข้อความ</h1>
		<h2>ใช้เพื่อเว้นวรรคตัวอักษรหรือระบุช่องว่างระหว่างอักขระในข้อความ</h2>
		
	</body>
</html>

word-spacing ใช้เพื่อเพิ่มระยะห่างระหว่างคำ

ตัวอย่าง

<!DOCTYPE html>
<html lang="th-TH">
	<head>
		<title>nkaub | CSS Text Spacing</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>
			
			h1 {
				word-spacing: 100px;
			}

			h2 {
				word-spacing: -2px;
			}
			
		</style>
	</head>
	<body>
		
		<h1>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</h1>
		<h2>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</h2>
		
	</body>
</html>

CSS Text Shadow

text-shadow ใช้เพื่อเพิ่มเงาให้กับข้อความ

ตัวอย่าง

<!DOCTYPE html>
<html lang="th-TH">
	<head>
		<title>nkaub | CSS Text Shadow</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>
			
			h1 {
				text-shadow: 2px 2px;
			}
			
			h2 {
				text-shadow: 2px 2px rgb(255,160, 30);
			}
			
			h3 {
				color: #fff;
				text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;
			}
			
		</style>
	</head>
	<body>
		
		<h1>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</h1>
		<h2>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</h2>
		<h3>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</h3>
		
	</body>
</html>
Top