CSS - ข้อความ

บทนี้สอนวิธีจัดการข้อความโดยใช้คุณสมบัติ CSS คุณสามารถตั้งค่าคุณสมบัติข้อความต่อไปนี้ขององค์ประกอบ -

color คุณสมบัติถูกใช้เพื่อกำหนดสีของข้อความ
direction คุณสมบัติถูกใช้เพื่อกำหนดทิศทางของข้อความ
letter-spacing คุณสมบัติถูกใช้เพื่อเพิ่มหรือลบช่องว่างระหว่างตัวอักษรที่ประกอบเป็นคำ
word-spacing คุณสมบัติใช้เพื่อเพิ่มหรือลบช่องว่างระหว่างคำของประโยค
text-indent คุณสมบัติถูกใช้เพื่อเยื้องข้อความของย่อหน้า
text-align คุณสมบัติถูกใช้เพื่อจัดแนวข้อความของเอกสาร
text-decoration คุณสมบัติถูกใช้เพื่อขีดเส้นใต้ขีดทับและขีดทับข้อความ
text-transform คุณสมบัติใช้เพื่อทำให้ข้อความเป็นตัวพิมพ์ใหญ่หรือแปลงข้อความเป็นตัวอักษรตัวพิมพ์ใหญ่หรือตัวพิมพ์เล็ก
white-space คุณสมบัติถูกใช้เพื่อควบคุมการไหลและการจัดรูปแบบของข้อความ
text-shadow คุณสมบัติถูกใช้เพื่อตั้งค่าเงาของข้อความรอบ ๆ ข้อความ

ตั้งค่าสีข้อความ

ตัวอย่างต่อไปนี้สาธิตวิธีการตั้งค่าสีข้อความ ค่าที่เป็นไปได้อาจเป็นชื่อสีใดก็ได้ในรูปแบบที่ถูกต้อง

<html>
   <head>
   </head>

   <body>
      <p style = "color:red;">
         This text will be written in red.
      </p>
   </body>
</html>

มันจะให้ผลลัพธ์ดังต่อไปนี้ -

ตั้งค่าทิศทางข้อความ

ตัวอย่างต่อไปนี้สาธิตวิธีกำหนดทิศทางของข้อความ ค่าที่เป็นไปได้ltr หรือ RTL

<html>
   <head>
   </head>

   <body>
      <p style = "direction:rtl;">
         This text will be rendered from right to left
      </p>
   </body>
</html>

มันจะให้ผลลัพธ์ดังต่อไปนี้ -

ตั้งค่าช่องว่างระหว่างอักขระ

ตัวอย่างต่อไปนี้สาธิตวิธีการตั้งค่าช่องว่างระหว่างอักขระ ค่าที่เป็นไปได้คือค่าปกติหรือตัวเลขที่ระบุช่องว่าง .

<html>
   <head>
   </head>

   <body>
      <p style = "letter-spacing:5px;">
         This text is having space between letters.
      </p>
   </body>
</html>

มันจะให้ผลลัพธ์ดังต่อไปนี้ -

กำหนดช่องว่างระหว่างคำ

ตัวอย่างต่อไปนี้สาธิตวิธีกำหนดช่องว่างระหว่างคำ ค่าที่เป็นไปได้ปกติหรือพื้นที่จำนวนที่ระบุ

<html>
   <head>
   </head>

   <body>
      <p style = "word-spacing:5px;">
         This text is having space between words.
      </p>
   </body>
</html>

สิ่งนี้จะให้ผลลัพธ์ดังต่อไปนี้ -

ตั้งค่าการเยื้องข้อความ

ตัวอย่างต่อไปนี้สาธิตวิธีการเยื้องบรรทัดแรกของย่อหน้า ค่าที่เป็นไปได้% หรือตัวเลขที่ระบุพื้นที่เยื้อง

<html>
   <head>
   </head>

   <body>
      <p style = "text-indent:1cm;">
         This text will have first line indented by 1cm and this line will remain at 
         its actual position this is done by CSS text-indent property.
      </p>
   </body>
</html>

มันจะให้ผลลัพธ์ดังต่อไปนี้ -

ตั้งค่าการจัดแนวข้อความ

ตัวอย่างต่อไปนี้สาธิตวิธีการจัดแนวข้อความ ค่าที่เป็นไปได้ทางซ้ายขวากลาง, ปรับ

<html>
   <head>
   </head>

   <body>
      <p style = "text-align:right;">
         This will be right aligned.
      </p>
      
      <p style = "text-align:center;">
         This will be center aligned.
      </p>
      
      <p style = "text-align:left;">
         This will be left aligned.
      </p>
   </body>
</html>

สิ่งนี้จะให้ผลลัพธ์ดังต่อไปนี้ -

การตกแต่งข้อความ

ตัวอย่างต่อไปนี้แสดงให้เห็นถึงวิธีการตกแต่งข้อความ ค่าที่เป็นไปได้ไม่มีขีดเส้นใต้ overline สายผ่านกระพริบตา

<html>
   <head>
   </head>

   <body>
      <p style = "text-decoration:underline;">
         This will be underlined
      </p>
      
      <p style = "text-decoration:line-through;">
         This will be striked through.
      </p>
      
      <p style = "text-decoration:overline;">
         This will have a over line.
      </p>
      
      <p style = "text-decoration:blink;">
         This text will have blinking effect
      </p>
   </body>
</html>

สิ่งนี้จะให้ผลลัพธ์ดังต่อไปนี้ -

ตั้งค่าตัวพิมพ์ข้อความ

ตัวอย่างต่อไปนี้สาธิตวิธีการตั้งค่ากรณีสำหรับข้อความ ค่าที่เป็นไปได้ไม่มีประโยชน์, พิมพ์ใหญ่พิมพ์เล็ก

<html>
   <head>
   </head>

   <body>
      <p style = "text-transform:capitalize;">
         This will be capitalized
      </p>
      
      <p style = "text-transform:uppercase;">
         This will be in uppercase
      </p>
      
      <p style = "text-transform:lowercase;">
         This will be in lowercase
      </p>
   </body>
</html>

สิ่งนี้จะให้ผลลัพธ์ดังต่อไปนี้ -

ตั้งค่าช่องว่างระหว่างข้อความ

ตัวอย่างต่อไปนี้แสดงให้เห็นถึงวิธีการจัดการช่องว่างภายในองค์ประกอบ ค่าที่เป็นไปได้คือปกติก่อนตอนนี้

<html>
   <head>
   </head>

   <body>
      <p style = "white-space:pre;">
         This text has a line break and the white-space pre setting 
         tells the browser to honor it just like the HTML pre tag.
      </p>
   </body>
</html>

สิ่งนี้จะให้ผลลัพธ์ดังต่อไปนี้ -

ตั้งเงาข้อความ

ตัวอย่างต่อไปนี้สาธิตวิธีการตั้งค่าเงารอบข้อความ บางเบราว์เซอร์อาจไม่รองรับ

<html>
   <head>
   </head>

   <body>
      <p style = "text-shadow:4px 4px 8px blue;">
         If your browser supports the CSS text-shadow property, 
         this text will have a  blue shadow.
      </p>
   </body>
</html>

มันจะให้ผลลัพธ์ดังต่อไปนี้ -