Text Styles

Text Color, Size, Weight ...

• color: ***; สีข้อความ
  สามารถกำหนดได้ทั้งชื่อสีและรหัสสี
  ตัวย่าง

  <span style="color:red">ข้อความสีแดง</span><br>
  <span style="color:#0000FF">ข้อความสีน้ำเงิน</span><br>
  <span style="color:rgb(0,255,0)">ข้อความสีเขียว</span>

  ผลลัพธ์
  
  ข้อความสีแดง
  ข้อความสีน้ำเงิน
  ข้อความสีเขียว
  
  

  ---

• font-size: ***; ขนาดข้อความ
  xx-small(เล็กสุด), x-small, small, medium, large, x-large, xx-large(ใหญ่สุด)
  ตัวย่าง

  <span style="font-size:xx-large">ข้อความขนาด xx-large</span><br>
  <span style="font-size:medium">ข้อความขนาด medium</span><br>
  <span style="font-size:xx-small">ข้อความขนาด xx-small</span>

  ผลลัพธ์
  
  ข้อความขนาด xx-large
  ข้อความขนาด medium
  ข้อความขนาด xx-small
  
  
  กำหนดในรูปแบบ smaller(เล็กกว่าปกติ), larger(ใหญ่กว่าปกติ)
  ตัวย่าง

  <span style="font-size:smaller">ข้อความขนาด smaller</span><br>
  <span style="font-size:larger">ข้อความขนาด larger</span>

  ผลลัพธ์
  
  ข้อความขนาด smaller
  ข้อความขนาด larger
  
  
  กำหนดเป็น % ของข้อความปกติ
  ตัวย่าง

  <span style="font-size:60%">ข้อความขนาด 60%</span><br>
  <span style="font-size:100%">ข้อความขนาด 100%</span><br>
  <span style="font-size:150%">ข้อความขนาด 150%</span>

  ผลลัพธ์
  
  ข้อความขนาด 60%
  ข้อความขนาด 100%
  ข้อความขนาด 150%
  
  
  กำหนดเป็นหน่วย em
  ตัวย่าง

  <span style="font-size:0.6em">ข้อความขนาด 0.6em</span><br>
  <span style="font-size:1em">ข้อความขนาด 1em</span><br>
  <span style="font-size:1.5em">ข้อความขนาด 1.5em</span>

  ผลลัพธ์
  
  ข้อความขนาด 0.6em
  ข้อความขนาด 1em
  ข้อความขนาด 1.5em
  
  
  กำหนดเป็นหน่วย px (pixel)
  ตัวย่าง

  <span style="font-size:11px">ข้อความขนาด 11px</span><br>
  <span style="font-size:16px">ข้อความขนาด 16px</span><br>
  <span style="font-size:22px">ข้อความขนาด 22px</span>

  ผลลัพธ์
  
  ข้อความขนาด 11px
  ข้อความขนาด 16px
  ข้อความขนาด 22px
  
  

  ---

• font-weight: ***; ความหนา
  เป็นการตั้งค่าความหนาของข้อความ กำหนดค่าเป็น normal, bold, lighter, bolder เช่น
  ตัวย่าง

  <span style="font-weight:normal">ข้อความปกติ</span><br>
  <span style="font-weight:bold">ข้อความหนา</span><br>
  <span style="font-weight:lighter">ข้อความบางกว่าปกติ</span><br>
  <span style="font-bolder">ข้อความหนากว่าปกติ</span>

  ผลลัพธ์
  
  ข้อความปกติ
  ข้อความหนา
  ข้อความบางกว่าปกติ
  ข้อความหนากว่าปกติ
  
  
  กำหนดค่าเป็นตัวเลข 100, 200, ... ถึง 900 เช่น
  ตัวย่าง

  <span style="font-weight:100">ข้อความหนา 100</span><br>
  <span style="font-weight:500">ข้อความหนา 500</span><br>
  <span style="font-weight:900">ข้อความหนา 900</span>

  ผลลัพธ์
  
  ข้อความหนา 100
  ข้อความหนา 500
  ข้อความหนา 900
  
  

  ---

• font-style: ***; font style
  เป็นการปรับลักษณะการเอียงของข้อความ
  ตัวย่าง

  <span style="font-style:normal">ข้อความปกติ</span><br><span style="font-style:italic">ข้อความเอียง</span>

  ผลลัพธ์
  
  ข้อความปกติ
  ข้อความเอียง
  
  

  ---

• font-family: ***; font family
  สำหรับกำหนดรูปแบบ Font
  ตัวย่าง

  <span style="font-family: 'Times New Roman'">Times New Roman</span><br>
  <span style="font-family: fantasy">Fantasy</span><br>
  <span style="font-family: Century">Fantasy</span>

  ผลลัพธ์
  
  Times New Roman
  Fantasy
  Fantasy
  
  

  ---

• font-variant: small-caps; small-caps font
  สำหรับกำหนดรูปแบบข้อความภาษาอังกฤษให้เป็นตัวพิมพ์ใหญ่ทั้งหมด แต่ขนาดอักษรจะมีขนาดเล็กเท่าตัวพิมพ์เล็ก
  ตัวย่าง

  <span style="font-variant: small-caps">phpmysql.info</span>

  ผลลัพธ์
  
  phpmysql.info
  
  

  ---

Text Decoration, Transform ...

• text-decoration: ***; text decoration
  กำหนดการขีดเส้นของข้อความ
  ตัวย่าง

  <span style="text-decoration:underline">underline</span>
  <span style="text-decoration:overline">overline</span>
  <span style="text-decoration:underline overline">underline overline</span>
  <span style="text-decoration:line-through">line-through</span>
  <span style="text-decoration:line-none">none</span>

  ผลลัพธ์
  
  underline overline underline overline line-through none
  
  

  ---

• text-transform: ***; controls the case of letters
  สำหรับปรับข้อความให้อยู่ในรูปแบบพิมพ์เล็กหรือพิมพ์ใหญ่
  capitalize ปรับอักษรตัวแรกให้เป็นตัวใหญ่
  uppercase ปรับอักษรทุกตัวให้เป็นตัวใหญ่
  lowercase ปรับอักษรทุกตัวให้เป็นตัวเล็ก
  none ไม่มีการปรับใดๆ
  ตัวย่าง

  <span style="text-transform: capitalize">capitalize</span><br>
  <span style="text-transform: uppercase">uPpErCaSe</span><br>
  <span style="text-transform: lowercase">LoWeRcAsE</span><br>
  <span style="text-transform">NoNe</span>

  ผลลัพธ์
  
  capitalize
  uPpErCaSe
  LoWeRcAsE
  NoNe
  
  

  ---

• zoom: ***; sets the zoom level
  none ไม่มีการปรับใดๆ
  ตัวย่าง

  <span style="zoom: 0.5">zoom 0.5</span><br>
  <span style="zoom: 1">zoom 1</span><br>
  <span style="zoom: 2">zoom 2</span><br>
  <span style="text-zoom: 70%">zoom 70%</span><br>
  <span style="zoom: 200%">zoom 200%</span>

  ผลลัพธ์
  
  zoom 0.5
  zoom 1
  zoom 2
  zoom 70%
  zoom 200%
  
  

  ---

Alignment, Spacing ...

• text-align: ***; horizontal text alignment
  สำหรับกำหนดตำแหน่งข้อความ
  ตัวย่าง

  <div style="text-align: left">Left</div><br>
  <div style="text-align: center">Center</div><br>
  <div style="text-align: right">Right</div>

  ผลลัพธ์
  
  Left

  
  

  Center

  
  

  Right
  
  

  ---

• line-height: ***; line height of text
  สำหรับกำหนดความสูงของแถวข้อความ
  ตัวย่าง

  <div style="line-height: 50%">phpmysql.info<br>
  phpmysql.info<br>
  phpmysql.info</div>

  ผลลัพธ์
  
  phpmysql.info
  phpmysql.info
  phpmysql.info
  
  

  <div style="line-height: 300%">phpmysql.info<br>
  phpmysql.info<br>
  phpmysql.info</div>

  ผลลัพธ์
  
  phpmysql.info
  phpmysql.info
  phpmysql.info
  
  

  ---

• letter-spacing: ***; spacing between letters
  ตัวย่าง

  <div style="letter-spacing: 0.2em">phpmysql.info phpmysql.info phpmysql.info phpmysql.info phpmysql.info phpmysql.info phpmysql.info phpmysql.info</div><br>
  <div style="letter-spacing: 0.5em">phpmysql.info phpmysql.info phpmysql.info phpmysql.info phpmysql.info phpmysql.info phpmysql.info</div>

  ผลลัพธ์
  
  phpmysql.info phpmysql.info phpmysql.info phpmysql.info phpmysql.info phpmysql.info phpmysql.info phpmysql.info

  
  

  phpmysql.info phpmysql.info phpmysql.info phpmysql.info phpmysql.info phpmysql.info phpmysql.info
  
  

  ---

• word-spacing: ***; spacing between words
  ตัวย่าง

  <div style="word-spacing: 0.5em">phpmysql.info phpmysql.info phpmysql.info phpmysql.info phpmysql.info phpmysql.info</div><br>
  <div style="word-spacing: 1.5em">phpmysql.info phpmysql.info phpmysql.info phpmysql.info phpmysql.info phpmysql.info phpmysql.info</div>

  ผลลัพธ์
  
  phpmysql.info phpmysql.info phpmysql.info phpmysql.info phpmysql.info phpmysql.info

  
  

  phpmysql.info phpmysql.info phpmysql.info phpmysql.info phpmysql.info phpmysql.info phpmysql.info
  
  

  ---

• vertical-align: ***; superscript and subscript text
  สำหรับจัดข้อความให้เป็นตัวยกหรือตัวห้อย
  ตัวย่าง

  cm<span style="vertical-align: super">2</span><br>
  H<span style="vertical-align: sub">2</span>O

  ผลลัพธ์
  
  cm2
  H2O