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>