CSS Text

Text ในที่นี้หมายถึง อะไรก็ตามที่มีบนแป้นพิมพ์นั่นเอง ยกตัวอย่าง text ตัวอักษร สัญลักษณ์ เครื่องหมายต่างๆ เหล่านี้ล้วนเป็น text 

ในเนื้อหาส่วนนี้เราจะมาพูดถึงเรื่องของ Text และคุณสมบัติที่สามารถเพิ่มให้กับ Text ได้ ซึ่งหลักๆแล้วประกอบไปด้วย 

  1. Color สีข้อความ
  2. Alignment ตำแหน่งของ ข้อความ
  3. Decoration ตกแต่งข้อความด้วยเส้นลายนอน (ส่วนใหญ่ใช้เพื่อลบเส้นใต้ลิงค์)
  4. Transformation การแปลงข้อความ
  5. Spacing การเว้นวรรคข้อความ
  6. Shadow เงาข้อความ

 

1.Color Text

การกำหนดคุณสมบัติสีตัวหนังสือนั้นสามารถทำได้โดยเพิ่ม color จากนั้นตามด้วย ค่าของสี 

ตัวอย่างที่ 1.1

<html>
 <head>
  <style>
   h2{
   	color:lightblue;
   }
   p{
   	color:red;
   }
   p#p2{
   	color:green;
   }
   p#p3{
   	color:blue;
   }
   p#p4{
   	color:grey;
   }
  </style>
 </head>
 <body>
  <h2>ตัวอย่าง Color Text</h2>
  <p>Content 1</p>
  <p id="p2">Content 2</p>
  <p id="p3">Content 3</p>
  <p id="p4">Content 4</p>
 </body>
</html>

ไฟล์ที่ 1.1 color_text.html

 

2.Alignment

การกำหนดคุณสมบัติตำแหน่งนั้นสามารถทำได้โดยเพิ่ม text-align ตามด้วยค่าตำแหน่งที่ต้องการ

ตัวอย่างที่ 2.1

<html>
 <head>
  <style>
   h2{
   	color:lightblue;
    text-align:center;
   }
   p{
   	color:red;
    border:1px dotted black;
    padding:10px;
    text-align: justify;
   }
   p#p2{
   	color:green;
   }
   p#p3{
   	color:blue;
    text-align:right;
   }
   p#p4{
   	color:grey;
    text-align:center;
   }
  </style>
 </head>
 <body>
  <h2>ตัวอย่าง Alignment Text</h2>
  
  <p>Text ในที่นี้หมายถึง อะไรก็ตามที่มีบนแป้นพิมพ์นั่นเอง ยกตัวอย่าง text ตัวอักษร สัญลักษณ์ เครื่องหมายต่างๆ เหล่านี้ล้วนเป็น text 

ในเนื้อหาส่วนนี้เราจะมาพูดถึงเรื่องของ Text และคุณสมบัติที่สามารถเพิ่มให้กับ Text ได้ ซึ่งหลักๆแล้วประกอบไปด้วย 

Color สีตัวหนังสือ Alignment ตำแหน่งของ text Decoration Transformation Spacing Shadow</p>
  <p id="p2">Content 2</p>
  <p id="p3">Content 3</p>
  <p id="p4">Text ในที่นี้หมายถึง อะไรก็ตามที่มีบนแป้นพิมพ์นั่นเอง ยกตัวอย่าง text ตัวอักษร สัญลักษณ์ เครื่องหมายต่างๆ เหล่านี้ล้วนเป็น text 

ในเนื้อหาส่วนนี้เราจะมาพูดถึงเรื่องของ Text และคุณสมบัติที่สามารถเพิ่มให้กับ Text ได้ ซึ่งหลักๆแล้วประกอบไปด้วย 

Color สีตัวหนังสือ Alignment ตำแหน่งของ text Decoration Transformation Spacing Shadow</p>
 </body>
</html>

ไฟล์ที่ 2 align_text.html

จากไฟล์ที่ 2 สามารถอธิบายได้ว่าเรามีการจัดตำแหน่งตัวหนังสือออกเป็น 3 รูปแบบดังนี้

  1. justify จัดตำแหน่งของคำและประโยคให้ชิดซ้ายขวา ตามความเหมาะสม
  2. center จัดตำแหน่งกึ่งกลาง
  3. right จัดตำแหน่งไปที่ด้านขวาสุด

 

3.Decoration

text-decoration ใช้ในการตกแต่งตัวหนังสือ ซึ่งโดยทั่วไปนิยมใช้เพื่อลบเส้นใต้ลิงค์

ตัวอย่างที่ 3.1

<html>
 <head>
  <style>
   h2{
   	color:lightblue;
    text-align:center;
    text-decoration:none;
   }
   p{
   	color:red;
    border:1px dotted black;
    padding:10px;
    text-align: justify;
   }
   p#p2{
   	color:green;
    text-decoration: line-through;
   }
   p#p3{
   	color:blue;
    text-align:right;
    text-decoration: underline;
   }
   p#p4{
   	color:grey;
    text-align:center;
    text-decoration:overline;
   }
  </style>
 </head>
 <body>
  <h2>ตัวอย่าง Alignment Text</h2>
  
  <p>Content 1</p>
  <p id="p2">Content 2</p>
  <p id="p3">Content 3</p>
  <p id="p4">Content 4</p>
 </body>
</html>

ไฟล์ที่ 3 decoration_text.html

 

4.Transformation

การแปลงข้อความใช้ text-transform ตามด้วยค่าของคุณสมบัติ

ตัวอย่างที่ 4.1 

<html>
 <head>
  <style>
   h2{
   	color:lightblue;
    text-align:center;
    text-decoration:none;
   }
   p{
   	color:red;
    border:1px dotted black;
    padding:10px;
    text-align: justify;
   }
   p#p2{
   	color:green;
    text-decoration: line-through;
    text-transform:uppercase;
   }
   p#p3{
   	color:blue;
    text-align:right;
    text-decoration: underline;
    text-transform:lowercase;
   }
   p#p4{
   	color:grey;
    text-align:center;
    text-decoration:overline;
    text-transform:capitalize;
   }
  </style>
 </head>
 <body>
  <h2>ตัวอย่าง Alignment Text</h2>
  
  <p>Content 1</p>
  <p id="p2">Content 2</p>
  <p id="p3">Content 3</p>
  <p id="p4">Content 4 ok mai kub</p>
 </body>
</html>

ไฟล์ที่ 4 transform_text.html

ในบรรทัดที่ 18 กำหนดตัวหนังสือให้เป็นตัวพิมพ์ใหญ่ทั้งหมด

ในบรรทัดที่ 24 กำหนดตัวหนังสือเป็นตัวพิมพ์เล็กทั้งหมด

ใบบรรทัดที่ 30 กำหนดตัวหนังสือขึ้นต้นคำด้วยตัวพิมพ์ใหญ่

 

5.Spacing

ตัวอย่างที่ 5.1 

<html>
 <head>
  <style>
   h2{
   	color:lightblue;
    text-align:center;
    text-decoration:none;
   }
   p{
   	color:red;
    border:1px dotted black;
    padding:10px;
    text-align: justify;
   }
   p#p2{
   	color:green;
    text-decoration: line-through;
    text-transform:uppercase;
    text-indent:40px;
   }
   p#p3{
   	color:blue;
    text-align:right;
    text-decoration: underline;
    text-transform:lowercase;
    letter-spacing:4px;
   }
   p#p4{
   	color:grey;
    text-align:center;
    text-decoration:overline;
    text-transform:capitalize;
    word-spacing:50px;
   }
  </style>
 </head>
 <body>
  <h2>ตัวอย่าง Alignment Text</h2>
  
  <p>Content 1</p>
  <p id="p2">ย่อหน้า Content 2 (40 พิกเซล)</p>
  <p id="p3">ระยะห่างระหว่างตัวอักษร Content 3</p>
  <p id="p4">ระยะห่างระหว่างคำ Content 4 ok mai kub</p>
 </body>
</html>

ไฟล์ที่ 5 spacing_text.html

ไฟล์ที่ 5 สามารถอธิบายได้หลายอย่างเพราะ การเว้นวรรคข้อความสามารถทำได้หลากหลาย ยกตัวอย่างเช่น การย่อหน้า การกำหนดระยะห่างระหว่างอัก หรือการกำหนดระยะห่างระหว่างข้อความ เป็นต้น

ในบรรทัดที่ 19 text-indent ใช้ในการย่อหน้าเนื้อหา ซึ่งจากไฟล์ทำการย่อหน้าไป 40 พิกเซล

ในบรรทัดที่ 26  letter-spacing ใช้ในการกำหนดระยะห่างของตัวอักษร

ในบรรทัดที่ 33 word-spacing ใช้ในการกำหนดระยะห่างของคำ

 

6.Shadow

ตัวอย่างที่ 6.1

<html>
 <head>
  <style>
   h2{
   	color:lightblue;
    text-align:center;
    text-decoration:none;
    text-shadow:2px 1px 4px black;
   }
   p{
   	color:red;
    border:1px dotted black;
    padding:10px;
    text-align: justify;
   }
   p#p2{
   	color:green;
    text-decoration: line-through;
    text-transform:uppercase;
    text-indent:40px;
   }
   p#p3{
   	color:blue;
    text-align:right;
    text-decoration: underline;
    text-transform:lowercase;
    letter-spacing:4px;
   }
   p#p4{
   	color:grey;
    text-align:center;
    text-decoration:overline;
    text-transform:capitalize;
    word-spacing:50px;
   }
  </style>
 </head>
 <body>
  <h2>ตัวอย่าง Alignment Text</h2>
  
  <p>Content 1</p>
  <p id="p2">ย่อหน้า Content 2 (40 พิกเซล)</p>
  <p id="p3">ระยะห่างระหว่างตัวอักษร Content 3</p>
  <p id="p4">ระยะห่างระหว่างคำ Content 4 ok mai kub</p>
 </body>
</html>

ไฟล์ที่ 6 shadow_text.html

ในบรรทัดที่ 8 ของไฟล์ที่ 6 เพิ่มคุณสมบัติให้ element <h2> มีเงาสีดำด้วย text-shadow:2px 1px 4px black;

หากคุณพบคำที่สะกดผิด เว้นวรรคไม่ถูกต้อง ฯ โปรดแจ้งให้เราทราบ โดยลากคลุม (highlight) ข้อความนั้น แล้วกด Ctrl + Enter

ไม่สามารถคัดลอกเนื้อหานี้

Spelling error report

The following text will be sent to our editors: