การใช้งานคำสั่ง CSS : Line – Height เป็นอย่างไร

19 สิงหาคม 2559 18:17 น.

การใช้งานคำสั่ง CSS : Line Height เป็นอย่างไร

           อย่าพึ่งเอาสมองเข้าเรื่องน่าปวดหัวในทันทีมาเล่นกับอารัมภบทกันเสียก่อน CSS มันมีหลายคำสั่งแนะบางทีกว่าเราจะเข้าใจและจำได้ในทุกคำสั่งสมองทำงานหนักมาก แทบบ้า อ้วกออกมาก็เป็นโค้ด CSS พูดออกมายังเป็น CSS เลย อาการหนักขนาดนั้นแหละ ยังไม่หมดเท่านี้เรายังต้องเข้าใจ HTML CODE ด้วย เพราะมันทำงานร่วมกัน เว็บไซต์ออกมาสวยงามน่าชม น่าคลิกก็อยู่ที่ 2 อย่างนี้แหละ แต่ก็ต้องบวกเข้ากับฝีมือการออกแบบของทางโปรแกรมเมอร์ด้วยเช่นกันว่าจะมีศิลป์ในการออกแบบมากแค่ไหน เข้าเรื่องกันดีกว่า

คำสั่ง CSS : Line Height  คืออะไร ?

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

 

ในการกำหนดค่าของระยะห่างแบบเป็นตัวเลขก็เช่น  1.2,  1.4, 5.4 อะไรทำนองนี้อยากได้เท่าไรก็กำหนดลงไปเลย และค่าที่เป็นตัวเลขตามที่เรากำหนดลงไปนี่เองมันจะไปทำการคูณกับตัวอักษรในหน้าเว็บเพื่อให้ได้ Line Height   เช่น ตัวอย่างข้อควาอักษรนั้นมีขนาดที่  16 px แล้วเราก็กำหนด Line Height  1.5 มันก็แปลว่า Line Height   ของตัวนี้เป็น 16x1.5 =  24 Px นั่นเอง 

การกำหนดค่าแบบง่าย ๆ อีกวิธีก็คือการเขียนเลขหน่วยเป็น Px และ ตัวเลขค่าเลยก็ได้ เช่น 16 px, 1.5 อะไรประมาณนี้  ต่อมาในการกำหนดแบบเป็นเปอร์เซ็น % กันบ้าง ก็ง่าย ๆ อยากได้กี่เปอร์เซ็นก็เขียนลงไปเช่น  90 % 100% 120 % 150 % 200 % เป็นต้น เช่นเดิมเปอร์เซ็นนี้เราก็นำไปคูณกับขนาดตัวอักษรเหมือนเดิมแล้วจะได้ค่าทีเรากำหนดที่แท้จริงออกมา

 

อาจจะยากสักหน่อยสำหรับการทำความเข้าใจคำสั่ง CSS : Line – Height   เพราะว่าเป็นการใช้งานที่ค่อนข้างวุ่นวายกับตัวเลข  แต่ว่าหากพยายามทำความเข้าใจจริง ๆ เกี่ยวกับวิธีการใช้งานคำสั่งก็ง่ายนิดเดียวเพราะว่าเป็นการกำหนดค่าแค่ 3 แบบเท่านั้นเอง เวลาใช้งานเขียนเว็บไซต์เราก็เลือกแค่แบบใดแบบหนึ่งไปใช้งานตามที่เราถนัดเท่านี้เว็บไซต์ก็จะออกมาสวยงามตามที่เราต้องการได้แล้ว 

02-138-3515-6