ข้อความ Text การจัดการเกี่ยวกับขนาดและรูปร่างของข้อความ

เราสามารถที่จะจัดการกับขนาดและรูปร่างของตัวอักษรได้ด้วย 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

body{
	font-family:Tahoma, "microsoft Sans Serif", Verdana; 
}

 

 

font-size

เป็นการกำหนดขนาดตัวอักษร หากข้อความนั้นๆ เป็นหัวข้อ ไม่ใช่ paragraph ควรใช้แท็ก <h1> <h2>..
แทน ตัวอย่างการกำหนดขนาดตัวอักษรด้วย font-size

body{
	font-size:12px;
}

font-weight

เป็นการกำหนดความหนาของตัวอักษร โดยทั่วไปจะใช้แค่ bold หรือ normal
ตัวอย่างการกำหนดความหนาของตัวอักษร

body{
	font-weight:bold;
}

font-style

โดยทั่วไปจะใช้เป็นการกำหนดตัวอักษรให้เป็นตัวเอียงหรือไม่
คือเป็น Italic หรือ normal
ตัวอย่าง

body{
	font-style:italic;
}

text-decoration

โดยทั่วไปจะเป็นการกำหนดให้มีการขีดเส้นใต้ข้อความหรือไม่ นอกจากนี้ยังมีค่าอื่นอืก
ดังต่อไปนี้

text-decoration:overline; เป็นการกำหนดให้มีเส้นอยู่เหนือข้อความ
text-decoration:line-through; เป็นการกำหนดให้มีเส้นลากผ่านข้อความ
text-decoration:underline; เป็นการกำหนดให้มีเส้นอยู่ใต้ข้อความ
text-decoration:none; เป็นการกำหนดไม่ใ้ห้มีเส้นใต้ข้อความ

ตัวอย่างการใช้งาน

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; ไ่ม่กำหนดใดๆ

ตัวอย่างการใข้งาน

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 เป็นการกำหนดการเยื้องของข้อความในบรรทัดแรก

ตัวอย่างการใช้งาน

 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