เราสามารถที่จะจัดการกับขนาดและรูปร่างของตัวอักษรได้ด้วย property ต่างๆ ต่อไปนี้
font-family
เป็นการกำหนดลักษณะของตัวอักษรที่ต้องการใช้ โดยปกติจะใช้ตัวอักษรที่มีอยู่ในเครื่องของผู้ใช้งาน
และส่วนใหญ่จะหลีกเลี่ยงการเลือกใช้ตัวอักษรที่ไม่แน่ชัด
ในการกำหนดค่าตัวอักษรใน font-family ค่าที่นิยมใช้ได้แ่ก่ arial, verdana และ times new roman
หากเป็นภาษาไทยก็จะใช้พวก Tahoma, "microsoft Sans Serif" และ Verdana ปกติจะมีการเลือกใช้
font มากกว่า 1 font โดยทำการแยกแต่ละ font ด้วยเครื่องหมาย commas ซึ่งการใช้ font หลายตัวก็เพื่อ
ป้องกันปัญหาในกรณีบางเครื่องไม่มี font ตัวแรก ก็จะมีการไปดึงเอา font ตัวที่ 2 หรือ ที่ 3 หรือตัวถัดไปมาใช้
หากกรณีชื่อ font นั้นยาว หรือมีช่องว่าง เช่น microsoft Sans Serif ก็ต้องทำการครอบด้วยเครื่องหมาย " "
quotation marks จะได้เป็น "microsoft Sans Serif" เป็นต้น
ตัวอย่างการกำหนด font-family
1 2 3 | body{ font-family:Tahoma, "microsoft Sans Serif", Verdana; } |
font-size
เป็นการกำหนดขนาดตัวอักษร หากข้อความนั้นๆ เป็นหัวข้อ ไม่ใช่ paragraph ควรใช้แท็ก <h1> <h2>..
แทน ตัวอย่างการกำหนดขนาดตัวอักษรด้วย font-size
1 2 3 | body{ font-size:12px;} |
font-weight
เป็นการกำหนดความหนาของตัวอักษร โดยทั่วไปจะใช้แค่ bold หรือ normal
ตัวอย่างการกำหนดความหนาของตัวอักษร
1 2 3 | body{ font-weight:bold;} |
font-style
โดยทั่วไปจะใช้เป็นการกำหนดตัวอักษรให้เป็นตัวเอียงหรือไม่
คือเป็น Italic หรือ normal
ตัวอย่าง
1 2 3 | body{ font-style:italic;} |
text-decoration
โดยทั่วไปจะเป็นการกำหนดให้มีการขีดเส้นใต้ข้อความหรือไม่ นอกจากนี้ยังมีค่าอื่นอืก
ดังต่อไปนี้
text-decoration:overline; เป็นการกำหนดให้มีเส้นอยู่เหนือข้อความ
text-decoration:line-through; เป็นการกำหนดให้มีเส้นลากผ่านข้อความ
text-decoration:underline; เป็นการกำหนดให้มีเส้นอยู่ใต้ข้อความ
text-decoration:none; เป็นการกำหนดไม่ใ้ห้มีเส้นใต้ข้อความ
ตัวอย่างการใช้งาน
1 2 3 4 5 6 7 8 9 10 11 12 | body{ text-decoration:overline; }p{ text-decoration:line-through; }a{ text-decoration:underline; }span{ text-decoration:none; } |
text-transform
เป็นการกำหนดลักษณะตัวเล็ก ตัวใหญ่ ให้กับตัวอักษร
text-transform:capitalize; กำหนดให้ตัวแรกทุกๆ ตัวของแต่ละคำเป็นตัวใหญ่
text-transform:uppercase; กำหนดให้ทุกๆ ตัวเป็นตัวใหญ่
text-transform:lowercase; กำหนดให้ทุกๆ ตัวเป็นตัวเล็ก
text-transform:none; ไ่ม่กำหนดใดๆ
ตัวอย่างการใข้งาน
1 2 3 4 5 6 7 8 9 10 11 12 | body{ text-transform:capitalize;}p{ text-transform:uppercase; }a{ text-transform:lowercase; }span{ text-transform:none;} |
Text spacing
การกำหนดช่องว่างของข้อความ property ชื่อ letter-spacing หรือ word-spacing
จะให้กำหนดช่องว่างระหว่างตัวอักษร หรือช่องว่างระหว่างคำตามลำดับ จะกำหนดเป็นตัวเลยหรือ
normal ก็ได้
line-height จะใช้กำหนดความสูงของ element เ่ข่นแท็ก <p> โดยไม่ต้องทำการกำหนด
ขนาดตัวอักษรในแท็ก <p> โดยค่าที่กำหนดจะเป็นตัวเลขหรือ normal ก็ได้
text-align เป็นกำหนดการจัดข้อความ สามารถกำหนดเป็น left,center,right หรือ justify ก็ได้
text-indent เป็นการกำหนดการเยื้องของข้อความในบรรทัดแรก
ตัวอย่างการใช้งาน
1 2 3 4 5 6 7 | p{ letter-spacing:10px; word-spacing:10px; line-height:10px; text-align:center; text-indent:10px;} |
เนื้อหาที่เี่กี่ยวข้อง
- การใช้งาน CSS - ศึกษาิวิธีการนำ CSS ไปใช้กับ HTML
- สิ่งที่เรียกว่า Selects, Properties , and Values - สิ่งที่เป็นองค์ประกอบของ CSS
- สี Colours - การใช้งานสี
- ข้อความ Text - การจัดการเกี่ยวกับขนาดและรูปร่างของข้อความ
- Margins and Padding - การจัดการพื้นที่ระหว่างสิ่งต่างๆ
- Borders - การจัดการเกี่ยวกับขอบ
- รวมส่วนประกอบต่างข้างบนเป็น CSS
