การใช้ CSS จัดรูปแบบเอกสารให้สวยงาม
CSS มีกลุ่มของคุณสมบัติ (Property) เฉพาะที่ใช้ในการตกแต่งข้อความ (Text) ต่าง ๆ ช่วยให้เราสามารถตกแต่งข้อความทั้งหมดได้อย่างสะดวกรวดเร็ว เช่น เลือกฟอนต์ หรือตัวอักษรที่ต้องการใช้งาน กำหนดขนาดตัวอักษร จัดให้ชัดซ้าย ขวา หรือทำตัวหนา บาง ปรับระยะห่างระหว่างบรรทัด เป็นต้น สิ่งเหล่านี้ัช่วยให้หน้าเว็บมีความสวยงาม เป็นระเบียบ เป็นรูปแบบเดียวกันได้ด้วยการตกแต่งอันเดียวกัน ทำให้เห็นแต่ละกลุ่มได้ชัดเจนขึ้น สะดวกในการอ่านและสื่อความหมายได้ง่ายขึ้น การใช้งาน CSS ร่วมกับการใช้แท็กคำสั่ง HTML จะใช้รูปแบบ Inline , Header หรือ แบบ External ก็ได้ ตามลักษณะและวัตถุประสงค์การใช้งานของผู้สร้างเว็บ ส่วนเรื่องการกำหนด Declaration จะใช้วิธีการเดียวกัน ดังเช่นภาพต่อไปนี้
หรือแบบการกำหนดหลายคุณสมบัติ หลายค่า ใน Selector เดียวกัน
Text Property ของฟอนต์
- font-family การระบุฟอนต์เพื่อใช้งานโดยเฉพาะ ตัวอย่างเช่น font-family : AngsanaUPC; เป็นต้น
- font-size กำหนดขนาดตัวอักษร ซึ่งสามารถกำหนดโดยการระบุค่าตัวเลขและหน่วยวัดต่อท้าย เช่น font-size : 14px; และอีกรูปแบบคือการระบุข้อความซึ่งเป็นค่ามาตรฐานลงไป เช่น font-size : xx-large เป็นต้น
- font-weight กำหนดตัวอักษรให้หนาขึ้น หรือบางลง โดยสามารถระบุค่าเป็นตัวเลขหลักเต็มร้อย จาก 100 - 900 ได้ หรือระบุค่าเป็นข้อความมาตรฐานคือ normal,bold, bolde,lighter ตัวอย่างเช่น font-weight : 300; หรือ font-weight : bold; เป็นต้น
- color เป็นการกำหนดสีให้กับตัวอักษร โดยใช้ค่าสีได้ทั้งแบบระบุชื่อสีมาตรฐาน เช่น color : blue; การระบุค่าสีโดยใช้เลขฐาน 16 เช่น color : #cc3366; หรือจะระบุในรูปแบบสี RGBs ก็ได้ เช่น color : rgb(0,255,255); เป็นต้น
- font เป็นการนำค่าจากหลาย ๆ คุณสมบัติมาใช้รวมกัน เช่น font : 16px #663399 bold; จะถือว่าได้กำหนดค่าของขนาดตัวอักษร สีตัวอักษร และลักษณะของตัวอักษรไปพร้อม ๆ กันได้เลบ
Formatting Text การตกแต่งและจัดตำแหน่งการแสดงข้อความ
- text-align การจัดข้อความให้ชิดด้าน ซ้าย ขวา กลาง ซึ่งมีคำเฉพาะที่ใช้ระบุค่า คือ right , left, center , justify ตัวอย่างเช่น text-align : center; เป็นการจัดข้อความให้อยู่กึ่งกลาง เป็นต้น
- text-decoration เป็นการตกแต่งข้อความให้มีการขีดเส้นที่ใต้ กลาง หรือ บนข้อความ หรือกระพริบ (รองรับเพียงบางเบราว์เซอร์) โดยมีคำเฉพาะที่ใช้ในการระบุค่า คือ none , underline, overline ,line-through , blink ตัวอย่างเช่น text-decoration : none; เป็นการกำหนดให้ไม่มีการขีดเส้นใต้ข้อความ นิยมนำไปใช้กับการกำหนดคุณสมบัติของ ลิงค์ (Link)
- line-height เป็นการกำหนดช่องว่างระหว่างบรรทัด โดยจะขึ้นอยู่กับขนาดตัวอักษร และมีมาตรฐานคือ 120% ของขนาดตัวอักษรที่ใช้ขณะนั้น หากต้องการให้ระยะห่างระหว่างบรรทัดเพิ่มมากขึ้น ก็ใช้ตัวเลขที่มากขึ้น เช่น 200% หรืออาจจะระบุเป็นขนาดตัวเลขพร้อมหน่วยวัดก็ได้ เช่น 1.5em เป็นต้น
- word-spacing การกำหนดระยะห่างระหว่างคำ มีลักษณะคลายกับระยะห่างระหว่างตัวอักษร ค่าที่ระบุเป็นได้ทั้งเลขบวก และลบ โดยค่าบวกจะทำให้ห่างออก ส่วนค่าลบจะทำให้ชิดเข้า