เกี่ยวกับการตกแต่งข้อความ สีของข้อความ ตำแหน่ง การแปลงข้อความ ย่อหน้า เว้นวรรคข้อความ ระยะห่างระหว่างบรรทัด ระยะห่างระหว่างคำ เงาข้อความ
Text Color สีข้อความ
สีใช้กำหนดสีของข้อความ [color: …….. ;]ระบุสีดังนี้
ชื่อของสี : "red"
ค่าluเลขฐานสิบหก : "#ff0000"
ค่าสี RGB : "rgb(255,0,0)"มาลองเขียนกัน
<!DOCTYPE html>
<html>
<head>
<style>
div {
color: deeppink; //สีของข้อความ
}
</style>
</head>
<body> <h1>CSS Text</h1>
<div>
Hello Welcome
</div></body>
</html>
Text Alignment การจัดแนวข้อความ
กำหนดค่าการจัดแนวข้อความในแนวนอน (horizontal) การจัดแนวสามารถมาจัดได้ดังนี้ ซ้าย (Left) , ขวา (Right) , ตรงกลาง (Center) และ ธรรมดา (justified) [text-align: ……….. ;]
<!DOCTYPE html>
<html>
<head>
<style>
div {
color: deeppink; //สีของข้อความ
text-align: center; //ข้อความอยู่ตรงกลาง
}
</style>
</head>
<body><h1>CSS Text</h1>
<div>
Hello Welcome
</div></body>
</html>
Text Decoration การขีดเส้น
ข้อความจะถูกขีดเส้น ขีดเส้นด้านบนข้อความ ตรงกลางข้อความ ข้างล่างข้อความ หรือจะไม่มีการขีดเส้นเลยก็ได้ [ text-decoration: ……… ; ] . สามารถกำหนดค่าได้ดังนี้
[ text-decoration: ……… ; ]
none : ไม่มีขีดเส้น
overline : ขีดเส้นข้างบนข้อความ
line-through : ขีดเส้นตรงกลางข้อความ
underline : ขีดเส้นใต้ข้างล่างข้อความลองมาเขียนกัน
<!DOCTYPE html>
<html>
<head>
<style>
div {
color: deeppink; // สีของข้อความ
text-align: center; //ข้อความอยู่ตรงกลาง
text-decoration: underline; //ขีดเส้นใต้ข้างล่างข้อความ
}
</style>
</head>
<body><h1>CSS Text</h1>
<div>
Hello Welcome
</div></body>
</html>
Text Transformation การแปลงข้อความ
การแปลงข้อความจากตัวอักษรตัวเล็กเป็นตัวใหญ่ จากตัวใหญ่เป็นตัวเล็ก [text-transformation: …….. ;] เราสามารถกำหนดค่าให้ได้ดังนี้
uppercase : ตัวอักษรตัวใหญ่ทั้งหมด
lowercase : ตัวอักษรตัวเล็กทั้งหมด
capitalize : ตัวอักษรตัวแรกของคำตัวใหญ่ และตัวต่อไปเล็กมาลองเขียนกัน
<!DOCTYPE html>
<html>
<head>
<style>
div {
color: deeppink; //สีของข้อความ
text-align: center; //ข้อความอยู่ตรงกลาง
text-decoration: underline; //ขีดเส้นใต้ข้างล่างข้อความ
text-transform: capitalize; //อักษรตัวแรกเป็นตัวใหญ่ }
</style>
</head>
<body><h1>CSS Text</h1>
<div>
hello welcome
</div></body>
</html>
Text Indentation ย่อหน้า
การย่อหน้าข้อความ [text-indent: ……;] การกำหนดค่ามีดังนี้
text-indent: 50px;มาลองเขียนกัน
<html>
<head>
<style>
div {
color: deeppink; //สีของข้อความ
text-transform: capitalize; //อักษรตัวแรกเป็นตัวใหญ่
text-indent: 50px; //ย่อหน้าข้อความ 50px
}
</style>
</head>
<body><h1>CSS Text</h1>
<div>
In my younger and more vulnerable years my father
gave me some advice that I've been turning over in
my mind ever since. 'Whenever you feel like criticizing
anyone,' he told me, 'just remember that all the people
in this world haven't had the advantages that you've had.' </div></body>
</html>
Letter Spacing ระยะห่างระหว่างตัวอักษร
การให้ระยะห่างระหว่างตัวอักษร ถ้าจำนวนค่ามากๆ ระยะก็จะห่างมาก ถ้าค่าติดลบ ก็ทับซ้อนกัน [letter-spacing: ……… ;]
<!DOCTYPE html>
<html>
<head>
<style>
div.text1 {
color: deeppink; //สีของข้อความ
text-transform: capitalize; //อักษรตัวแรกเป็นตัวใหญ่
text-indent: 50px; //ย่อหน้าข้อความ 50px
letter-spacing: 5px; //ความห่างระหว่างตัวอักษรที่ 5px
}
div.text2 {
color: deeppink; //สีของข้อความ
text-transform: capitalize; //อักษรตัวแรกเป็นตัวใหญ่
text-indent: 50px; //ย่อหน้าข้อความ 50px
letter-spacing: -5px; //ความห่างระหว่างตัวอักษรที่ -5px
}
</style>
</head>
<body><h1>CSS Text</h1>
<div class="text1">
Letter Spacing
</div>
<div class="text2">
Letter Spacing
</div></body>
</html>
Line Height ระยะห่างระหว่างบรรทัด
การจักระยะห่างระหว่างบรรทัด เพื่อให้ดูง่าย แยกออกได้ชัดเจน [line-height: ……;] เขียนได้ดังนี้
<!DOCTYPE html>
<html>
<head>
<style>
div.text1 {
color: deeppink; //สีของข้อความ
text-transform: capitalize; //อักษรตัวแรกเป็นตัวใหญ่
line-height: 0.7; //ความห่างระหว่างบรรทัดอยู่ที่ 0.7
}
div.text2 {
color: rgb(10, 75, 64); //สีของข้อความ
text-transform: capitalize; //อักษรตัวแรกเป็นตัวใหญ่
line-height: 1.8; //ความห่างระหว่างบรรทัดอยู่ที่ 1.8
}
</style>
</head>
<body><h1>CSS Text</h1>
<div class="text1">
This is a paragraph with a smaller line-height.<br>
This is a paragraph with a smaller line-height.<br>
</div>
<div class="text2">
This is a paragraph with a smaller line-height.<br>
This is a paragraph with a smaller line-height.<br>
</div></body>
</html>
Text Direction ทิศทางข้อความ
ทิศข้อความ สลับหัว สลับท้าย เขียนตัวอักษรจากขวามาซ้าย
<!DOCTYPE html>
<html>
<head>
<style>
div.text1 {
color: deeppink; //สีของข้อความ
text-transform: capitalize; //อักษรตัวแรกเป็นตัวใหญ่
line-height: 0.7; //ความห่างระหว่างบรรทัดอยู่ที่ 0.7
}
div.text2 {
color: rgb(10, 75, 64); //สีของข้อความ
text-transform: capitalize; //อักษรตัวแรกเป็นตัวใหญ่
line-height: 1.8; //ความห่างระหว่างบรรทัดอยู่ที่ 1.8
direction: rtl; //แปลงตัวอักษรจากขวามาซ้าย
}
</style>
</head>
<body><h1>CSS Text</h1>
<div class="text1">
This is a paragraph with a smaller line-height.<br>
This is a paragraph with a smaller line-height.<br>
</div>
<div class="text2">
<bdo dir="rtl">
This is a paragraph with a smaller line-height.<br>
This is a paragraph with a smaller line-height.<br>
</bdo>
</div></body>
</html>
Word Spacing ระยะห่างระหว่างคำ
การมีช่องว่างระหว่างคำทำให้ อ่านง่ายขึ้น แบ่งคำได้ชัดเจน ซึ่งขึ้นอยู่กับค่าที่กำหนดไป ถ้าค่าที่กำหนดมีค่ามาก ระยะห่างก็จะมีมาก ถ้าค่าที่กำหนดมีค่าติดลบ คำแต่ละคำก็จะชิดกัน [word-spacing: ………;] มาดูกันเน้อ
<!DOCTYPE html>
<html>
<head>
<style>
div.text1 {
color: deeppink; //สีของข้อความ
text-transform: capitalize; //อักษรตัวแรกเป็นตัวใหญ่
line-height: 0.7; //ความห่างระหว่างบรรทัดอยู่ที่ 0.7
word-spacing: -5px; //ระยะห่างระหว่างคำ -5px}
div.text2 {
color: rgb(10, 75, 64); //สีของข้อความ
text-transform: capitalize; //อักษรตัวแรกเป็นตัวใหญ่
line-height: 1.8; //ความห่างระหว่างบรรทัดอยู่ที่ 1.8
direction: rtl; //แปลงตัวอักษรจากขวามาซ้าย
word-spacing: 20px; //ระยะห่างระหว่างคำ 20px
}
</style>
</head>
<body><h1>CSS Text</h1>
<div class="text1">
This is a paragraph with a smaller line-height.<br>
This is a paragraph with a smaller line-height.<br>
</div>
<div class="text2">
<bdo dir="rtl">
This is a paragraph with a smaller line-height.<br>
This is a paragraph with a smaller line-height.<br>
</bdo>
</div></body>
</html>
Text Shadow เงาของข้อความ
เงาของข้อความจะเป็นตัวที่สะท้อนจากข้อความจริง เราปรับแต่งให้เป็นสีได้ตามใจอยากได้ ได้เลย กำหนดให้เงาเลื่อนไปด้านขวา และกำหนดให้เงาเลื่อนขึ้นไปด้านบน [ text-shadow: moveRight moveUp color; ]
<!DOCTYPE html>
<html>
<head>
<style>
h1{
text-shadow: 3px 2px rgb(90, 222, 245); //กำหนดเงาข้อความ
}div {
color: deeppink; //สีของข้อความ
text-transform: capitalize; //อักษรตัวแรกเป็นตัวใหญ่
line-height: 1.5; //ความห่างระหว่างบรรทัดอยู่ที่ 1.5
word-spacing: 3px; //ระยะห่างระหว่างคำ 20px
}
</style>
</head>
<body><h1>CSS Text</h1>
<div>
This is a paragraph with a smaller line-height.<br>
This is a paragraph with a smaller line-height.<br>
</div>
</body>
</html>
CSS Text จะเกี่ยวกับการตกแต่งข้อความ ยังไงลองทำดูเราสามารถเอาทุกอย่างที่ได้ลองทำแต่ละตัว มาประยุกต์ใช้ร่วมกันได้หมดเลย แล้วเราจะได้ข้อความที่สวยสมใจอยากของตัวเอง บ๊ะบายยยย . ไอง่วงแล้ว ตาจิปิดแล้ว
