CSS : การตกแต่งข้อความ “Formatting Text”

CSS : Cascading Style Sheets ส่วนที่เอาไว้ตกแต่งเอกสาร

ภาพจาก : https://www.seoclerk.com/html-css-programming/543622/Covert-PSD-to-HTML-from-professional-Web-Designer

การจัดข้อความ ให้มีลักษณะอย่างที่เราต้องการ เช่น ชิดซ้าย ชิดขวา และระยะห่างระหว่างตัวอักษร ระหว่างคำ ซึ่ง Property ที่ใช้มีดังนี้

1. letter-spacing : กำหนดระยะห่างระหว่างตัวอักษร
2. word-spacing : กำหนดระยะห่างระหว่างคำ
3. text-indent : เป็นการย่อหน้าหรือเว้นว่างหน้าข้อความ
4. text-align : จัดให้ชิดซ้าย ขวา หรือวางตรงกลางข้อความ
5. text-decoration : ตกแต่งให้มีขีดเส้นใต้ เหนือ หรือตรงกลางข้อความ
6. text-transform : Capitalized Text แปลงให้เป็นตัวพิมพ์เล็ก หรือตัวพิมพ์ใหญ่
7. white-space : ควบคุมลักษณะการพิมพ์ตัวอักษร
เวลาใช้งานกับไฟล์ .CSS 
รูปแบบที่เรียกเป็น class="  " จึงเติม . ก่อนชื่อ class เช่น .text{  }
รูปแบบที่เรียกเป็น id="  " จึงเติม # ก่อนชื่อ id  เช่น #text{  }

มาเริ่มกันเลยเนอะ !!

1.letter-spacing : กำหนดระยะห่างระหว่างตัวอักษร หากค่าตัวเลขเป็นจำนวนเต็มบวก คือ ตัวอักษรจะห่างกัน ยิ่งตัวเลขจำนวนมากเท่าไหร่ยิ่งจะห่างเท่านั้น “เหมือนคนเรานี่แหล่ะ ถ้าไม่มั่นคงจริง” และเป็นค่าตัวเลขที่ติดลบ คือ ตัวอักษรจะขยับเข้ามาชิดกัน ถ้าติดลบมากๆ ยิ่งจะใกล้ชิดกันมาก

.HTML ;
<div>
   <h3 class="lspacing-5"> letter-spacing "-5px" </h3>
   <h3 class="lspacing0"> letter-spacing "0px" </h3>
   <h3 class="lspacing5"> letter-spacing "5px" </h3>
</div>
.CSS ;
.lspacing-5{  
   letter-spacing: -5px;  //ตัวเลขติดลบมาก ยิ่งทำให้ตัวอักษรชิดกัน
}
.lspacing0{  
   letter-spacing: 0px;  //ปกติ
}
.lspacing5{  
   letter-spacing: 5px;  //ตัวเลขเต็มบวกมาก ยิ่งทำให้ตัวอักษรห่างกัน
}

Property : letter-spacing

2.word-spacing : กำหนดระยะห่างระหว่างคำ หรือว่าช่องว่าง มีลักษณะคล้ายกับ letter-spacing คือขึ้นอยู่กับค่าตัวเลขที่เติมเข้าไป อยากห่างมาใส่ตัวเลขค่ามากๆ ไม่อยากห่างใส่ตัวเลขค่าน้อย หรือติดลบไปเลย

.HTML ;
<div>
   <h3 class="wspacing-20"> word-spacing "-20px" </h3>
   <h3 class="wspacing0"> word-spacing "0px" </h3> 
   <h3 class="wspacing20"> word-spacing "20px" </h3>
</div>
.CSS ;
.wspacing-20{  
   word-spacing: -20px;  //ตัวเลขติดลบมาก ยิ่งทำระหว่างคำชิดกัน
}
.wspacing0{  
   word-spacing: 0px;  //ระหว่างคำปกติ
}
.wspacing20{  
   word-spacing: 20px;  //ตัวเลขเต็มบวกมาก ยิ่งทำระหว่างห่างกัน
}

Property : word-spacing

3.text-indent : เป็นการย่อหน้าหรือเว้นว่างหน้าข้อความ ด้วยค่าของตัวเลขที่จะเป็นจำนวนเต็มบวก หรือติดลบ ค่าบวกคือย่อหน้าไปทางขวามือ ค่าลบคือ ยื่นออกทางซ้ายมือ หรือ % ได้จากตัวเลขของความกว้าง Container เช่น มีความกว้าง 800px ต้องการ 10% จะได้ 80px

.HTML ;
<div>
   <h5 class="indent1">
การย่อหน้าหรือเว้นว่างหน้าข้อความ ด้วยค่าของตัวเลขที่จะเป็นจำนวนเต็มบวก หรือติดลบ
ค่าบวกคือย่อหน้าไปทางขวามือ ค่าลบคือ ยื่นออกทางซ้ายมือ หรือ % ได้จากตัวเลขของความกว้าง Container
   </h5>
   <h5 class="indent2">
การย่อหน้าหรือเว้นว่างหน้าข้อความ ด้วยค่าของตัวเลขที่จะเป็นจำนวนเต็มบวก หรือติดลบ
ค่าบวกคือย่อหน้าไปทางขวามือ ค่าลบคือ ยื่นออกทางซ้ายมือ หรือ % ได้จากตัวเลขของความกว้าง Container
   </h5>
   <h5 class="indent3">
การย่อหน้าหรือเว้นว่างหน้าข้อความ ด้วยค่าของตัวเลขที่จะเป็นจำนวนเต็มบวก หรือติดลบ
ค่าบวกคือย่อหน้าไปทางขวามือ ค่าลบคือ ยื่นออกทางซ้ายมือ หรือ % ได้จากตัวเลขของความกว้าง Container
   </h5>
   <h5 class="indent4">
การย่อหน้าหรือเว้นว่างหน้าข้อความ ด้วยค่าของตัวเลขที่จะเป็นจำนวนเต็มบวก หรือติดลบ
ค่าบวกคือย่อหน้าไปทางขวามือ ค่าลบคือ ยื่นออกทางซ้ายมือ หรือ % ได้จากตัวเลขของความกว้าง Container
   </h5>
</div>
.CSS ;
.indent1{  
   text-indent: -30px;  //ทำให้บรรทัดแรกหลุดออกไปด้านนอกจนมองไม่เห็น
}
.indent2{  
   text-indent: 30px;  //บรรทัดแรกย่อหน้าเข้ามาตามจำนวนค่าที่เรากำหนด
}
.indent3{  
   text-indent: 30%;  //บรรทัดแรกย่อหน้าเข้ามาตามอัตราส่วนเปอร์เซ็นที่เรากำหนด
}
.indent4{  
   text-indent: -30%;  //ทำให้บรรทัดแรกหลุดออกไปด้านนอกตามอัตราส่วนเปอร์เซ็นที่เรากำหนด
}

Property : text-indent

4.text-align : จัดให้ชิดซ้าย ขวา หรือวางตรงกลางข้อความ ใช้ค่าเฉพาะคือ left , right, center , justify มีค่า Default คือ left

justify คือจัดให้ทั้งซ้ายและขวา ตรงข้ามกันหมด โดยเพิ่มช่องว่างระหว่างคำเพื่อให้ทั้งสองด้านตรงกันหมด

.HTML ;
<div>
   <span>text-align: left</span>
   <h5 class="align1">
text-align : จัดให้ชิดซ้าย ขวา หรือวางตรงกลางข้อความ
ใช้ค่าเฉพาะคือ left , right, center , justify มีค่า Default คือ left
justify คือจัดให้ทั้งซ้ายและขวา ตรงข้ามกันหมด โดยเพิ่มช่องว่างระหว่างคำเพื่อให้ทั้งสองด้านตรงกันหมด
   </h5>
   <span>text-align: right</span>
   <h5 class="align2">
text-align : จัดให้ชิดซ้าย ขวา หรือวางตรงกลางข้อความ
ใช้ค่าเฉพาะคือ left , right, center , justify มีค่า Default คือ left
justify คือจัดให้ทั้งซ้ายและขวา ตรงข้ามกันหมด โดยเพิ่มช่องว่างระหว่างคำเพื่อให้ทั้งสองด้านตรงกันหมด
   </h5>
   <span>text-align: center</span>
   <h5 class="align3">
text-align : จัดให้ชิดซ้าย ขวา หรือวางตรงกลางข้อความ
ใช้ค่าเฉพาะคือ left , right, center , justify มีค่า Default คือ left
justify คือจัดให้ทั้งซ้ายและขวา ตรงข้ามกันหมด โดยเพิ่มช่องว่างระหว่างคำเพื่อให้ทั้งสองด้านตรงกันหมด
   </h5>
   <span>text-align: justify</span>
   <h5 class="align4">
text-align : จัดให้ชิดซ้าย ขวา หรือวางตรงกลางข้อความ
ใช้ค่าเฉพาะคือ left , right, center , justify มีค่า Default คือ left
justify คือจัดให้ทั้งซ้ายและขวา ตรงข้ามกันหมด โดยเพิ่มช่องว่างระหว่างคำเพื่อให้ทั้งสองด้านตรงกันหมด
   </h5>
</div>
.CSS ;
.align1{  
   text-align: left;  //ข้อความชิดซ้าย
}
.align2{  
   text-align: right;  //ข้อความชิดขวา
}
.align3{  
   text-align: center;  //ข้อความตรงกลาง
}
.align4{  
   text-align: justify;  //ข้อความจะทำตรงกันข้าม
}

5.text-decoration : ตกแต่งให้มีขีดเส้นใต้ เหนือ หรือตรงกลางข้อความ หรือกระพริบ โดยการใช้ Property, none, underline, overline, line-through, blink

.HTML ;
<div>
   <span>text-decoration: line-through</span>
   <h5 class="decoration1">
text-decoration : ตกแต่งให้มีขีดเส้นใต้ เหนือ หรือตรงกลางข้อความ
   </h5>
   <span>text-decoration: overline</span>
   <h5 class="decoration2">
text-decoration : ตกแต่งให้มีขีดเส้นใต้ เหนือ หรือตรงกลางข้อความ
   </h5>
   <span>text-decoration: underline</span>
   <h5 class="decoration3">
text-decoration : ตกแต่งให้มีขีดเส้นใต้ เหนือ หรือตรงกลางข้อความ
   </h5>
   <span>text-decoration: none</span>
   <h5 class="decoration4">
text-decoration : ตกแต่งให้มีขีดเส้นใต้ เหนือ หรือตรงกลางข้อความ
   </h5>
</div>
.CSS ;
.decoration1{  
   text-decoration: line-through;  //ขีดเส้นข้อความตรงกลาง
}
.decoration2{  
   text-decoration: overline;  //ขีดเส้นข้อความด้านบน
}
.decoration3{  
   text-decoration: underline;  //ขีดเส้นข้อความด้านล่าง
}
.decoration4{  
   text-decoration: none;  //ปกติ ไม่มีขีดเส้นอะไรทั้งนั้น
}

Property : text-decoration

6.text-transform : Capitalized Text แปลงให้เป็นตัวพิมพ์เล็ก หรือตัวพิมพ์ใหญ่ อาจจะแปลงทั้งข้อความ หรือเฉพาะตัวอักษรตัวแรกก็ได้

.HTML ;
<div>
   <span>text-transform: capitalize</span>
   <h5 class="transform1">
text-transform : Capitalized Text แปลงให้เป็นตัวพิมพ์เล็ก หรือตัวพิมพ์ใหญ่
   </h5>
   <span>text-transform: uppercase</span>
   <h5 class="transform2">
text-transform : Capitalized Text แปลงให้เป็นตัวพิมพ์เล็ก หรือตัวพิมพ์ใหญ่
   </h5>
   <span>text-transform: lowercase</span>
   <h5 class="transform3">
text-transform : Capitalized Text แปลงให้เป็นตัวพิมพ์เล็ก หรือตัวพิมพ์ใหญ่
   </h5>
</div>
.CSS ;
.transform1{  
   text-transform: capitalize;  //ตัวอักษรตัวแรกจะเป็นตัวใหญ่
}
.transform2{  
   text-transform: uppercase;  //ตัวอักษรจะเป็นตัวใหญ่ทั้งหมด
}
.transform3{  
   text-transform: lowercase;  //ตัวอักษรจะเป็นตัวเล็กทั้งหมด
}

Property : text-transform

7.white-space : ควบคุมลักษณะการพิมพ์ตัวอักษร ในการตัดข้อความโดยใช้ normal, pre, nowrap

pre : การคงทุกอย่างไว้อย่างเดิม เช่น ช่องว่างระหว่างบรรทัด ข้อความที่มีผู้เขียนเป็นหลายบรรทัด แสดงออกมาคงเดิม

normal : จะตัดทุกสิ่งทิ้งไป และจัดให้ใหม่อยู่ภายในกรอบ

nowrap : จะไม่มีการจัดบรรทัด แต่จะเอามารวมเป็นบรรทัดเดียวทั้งหมด

.HTML ;
<div>
   <span>white-space: pre</span>
   <h5 class="space1">
white-space : ควบคุมลักษณะการพิมพ์ตัวอักษร ในการตัดข้อความโดยใช้ normal, pre, nowrap
   </h5>
   <span>white-space: normal</span>
   <h5 class="space2">
white-space : ควบคุมลักษณะการพิมพ์ตัวอักษร ในการตัดข้อความโดยใช้ normal, pre, nowrap
   </h5>
   <span>white-space: nowrap</span>
   <h5 class="space3">
white-space : ควบคุมลักษณะการพิมพ์ตัวอักษร ในการตัดข้อความโดยใช้ normal, pre, nowrap
   </h5>
</div>
.CSS ;
.space1{  
   white-space: pre;  //จะคงทุกอย่างไว้อย่างเดิม และเหมือนตัดส่วนที่เกินออกไป
}
.space2{
   white-space: normal;  //จะจัดตัวอักษรทั้งหมดให้อยู่ในกรอบ
}
.space3{
   white-space: nowrap;  //ตัวอักษรจะอยู่บรรทัดเดียวกันทั้งหมด
}

Property : white-space

การตกแต่งอื่นๆ

line-height การกำหนดช่องว่างระหว่างบรรทัด ขึ้นอยู่กับขนาดตัวอักษร และมีมาตรฐาน คือ 120% ของขนาดตัวอักษรที่ใช้ในตอนนั้น หากต้องการให้ระยะห่างระหว่างบรรทัดมากขึ้น ใช้ตัวเลขที่มากขึ้น เช่น 200% หรืออาจจะบอกด้วยขนาด เช่น 1.5 em

.HTML ;
<div>
   <div class="div1">
      <h3> line-height </h3>
การกำหนดช่องว่างระหว่างบรรทัด ขึ้นอยู่กับขนาดตัวอักษร และมีมาตรฐาน คือ 120%
ของขนาดตัวอักษรที่ใช้ในตอนนั้น หากต้องการให้ระยะห่างระหว่างบรรทัดมากขึ้น ใช้ตัวเลขที่มากขึ้น
   </div>
   <div class="div2">
      <h5>
การกำหนดช่องว่างระหว่างบรรทัด ขึ้นอยู่กับขนาดตัวอักษร และมีมาตรฐาน คือ 120%
ของขนาดตัวอักษรที่ใช้ในตอนนั้น หากต้องการให้ระยะห่างระหว่างบรรทัดมากขึ้น ใช้ตัวเลขที่มากขึ้น
      </h5>
   </div>
</div>
.CSS ;
.div1{  //ตัวเอียง หนา
   font: italic small-caps bold 1.5em/100% Times;
}
.div2{  //ตัวเอียง หนา
   font: italic small-caps bold 6.5em/200% Times;
   color: red;
}
h3 {  //หนา ขนาดตัวอักษร รูปแบบตัวอักษร
   font: bold 40px/.94 Arial;
}
h5 {  //หนา ขนาดตัวอักษร รูปแบบตัวอักษร
   font: bold 40px Arial;
}

การตกแต่งอื่นๆ

first-line และ first-letter การทำตัวอักษรตัวแรก หรือบรรทัดแรกเป็นตัวใหญ่ เราใช้ Pseudo Element

first-line : บรรทัดแรก . first-letter ตัวอักษรตัวแรก

.HTML ;
<div id="wrapper">
   <h4> first-letter</h4>
   <div class="div1">
First-line และ first letter การทำตัวอักษรตัวแรก,
หรือบรรทัดแรกเป็นตัวใหญ่ เราใช้ Pseudo Element
   </div>
<h4>first-line</h4>
   <div class="div2">
First-line และ first letter การทำตัวอักษรตัวแรก,
หรือบรรทัดแรกเป็นตัวใหญ่ เราใช้ Pseudo Element
   </div>
</div>
 
.CSS ;
#wrapper{
   width: 400px;  //ความกว้างของกรอบ
   margin: auto;  //ความห่างของขอบ
   background:orchid;  //สีของพื้นหลัง
   border: 1px dashed;  //ขนาดของเส้น รูปแบบของเส้น
}
.div1:first-letter {
   font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;  //รูปแบบของตัวอักษร
   font-size: 2em;  //ขนาดตัวอักษร
   color: blue;  //สีของตัวอักษร
}
.div2:first-line {
   font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;  //รูปแบบของตัวอักษร
   white-space: normal;  //การจัดตัวอักษรทั้งหมดให้อยู่ในกรอบ
   font-size: 2em;  //ขนาดตัวอักษร
}
h4 {  //Header (Header Bolder)ที่ h4
   font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;  //รูปแบบของตัวอักษร
   color: brown; //สีของตัวอักษร
}

Property : first-line AND first-letter

จบแล้ววว !!

หวังว่าจะเป็นประโยชน์ในการใช้งานตกแต่งข้อความ (Formatting Text) ในแบบต่างๆ ให้ได้ดั่งเอกสาร Microsoft Word ของเราได้เลย ผลลัพธ์ที่ได้ออกมาไม่ต่างกันเท่าไหร่ คือเปลี่ยนจากบะหมี่กึ่งสำเร็จรูป มาทำเส้น น้ำซุปเองทุกขั้นตอน

ขอบคุณหนังสือ สร้างสรรค์ ปั้นแต่งเว็บไซต์ให้สวยด้วย CSS “กุลวดี โภคสวัสดิ์”