Moncy Services: CSS - Text Formatting #1

การกำหนดรูปแบบการแสดงผลและรูปภาพบนเวบเพจที่เหมาะสมจะเป็นส่วนหนึ่งที่ช่วยดึงดูดความสนใจของผู้เยี่ยมชมได้เป็นอย่างดี

รูปแบบข้อความ

ข้อความ (Text) เป็นทรัพยากรที่สำคัญอย่างหนึ่ง เพื่อใช้บอกรายละเอียดของเนื้อหาและรูปภาพที่นำเสนอ

1. การเลือกแบบอักษร

การเลือกแบบอักษรแต่ละประเภทมาใช้ในเวบ ขึ้นอยู่กับเนื้อหา การจัดวางองค์ประกอบ การปรับแต่งอัตราส่วน และการจัดสมดุลในเพจ โดยทั่วไปแบ่งได้ 5 กลุ่มดังตาราง

กลุ่มแบบอักษร	ชื่อแบบอักษรในกลุ่ม
Serif	Time New Roman, Georgia, Baskerville, Hoefler Text
Sans-Serif	Arial, Helvetica, Verdana, Geneva, Tahoma, Trebuchet MS, Century Gothic
Monosospaced and fun	Courirer New, Lucida Console, Copperplate Light, Marker Felt
Cursive	Comic Sans, Zapf Chancery, Zapfino
Fantasy	Desdemona, Playbill, Herculanum

การกำหนดอักษรใน CSS ทำได้โดยกำหนดค่า Property "font-family" มีรูปแบบดังนี้ => font-family: value1, value2;

โดย value1 หมายถึง แบบอักษรที่ต้องการเลือกใช้และจะถูกเลือกเป็นลำดับแรก

value2 หมายถึง แบบอักษรที่จะถูกเลือกใช้ในอันดับถัดไป หากบราวเซอร์ไม่รองรับอันดับก่อนหน้า

ตย. สร้างไฟล์ "TypeographyFont.css" เพื่อกำหนดแบบอักษร

h1 {font-family: Arial;}

h2 {font-family: monospace;}

h3 {font-family: "Comic Sans MS", cursive;}

สร้างไฟล์ "TypeographyFont.html"

<body>

<h1>เลือกชนิดตัวอักษรแบบ Arail</h1>

<h2>เลือกชนิดตัวอักษรแบบ Monospace</h2>

<h3>เลือกชนิดตัวอักษรแบบ "Comic Sans MS", cursive</h3>

</body>

เพิ่มคำสั่งเพื่อเรียกใช้ CSS จากไฟล์ "TypeographyFont.css" ในแท็ก <head> ของไฟล์ "TypeographyFont.html" ดังนี้

2. การเพิ่มสีสันให้กับข้อความ

เพื่อดึงดูดผู้ที่เข้ามาเยี่ยมชมเวบไซต์ โดยมีสีมาตรฐานที่สามารถแสดงผลค่าสีได้ถูกต้องเหมือนกันทุกบราวเซอร์จะมี 16 สี ด้วยกัน

1) การกำหนดสีข้อความแบบเลขฐาน 16

เลขฐาน 16 ประกอบด้วยตัวเลข 10 ตัว และตัวอักษรอีก 6 คือ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F มีการใช้งานอยู่ 2 แบบ คือ เลข 3 หลักกับเลข 6 หลัก

ตารางสีแบบเลขฐาน 16 หลัก

ชื่อของสี	เลขฐาน 16	ชื่อของสี	เลขฐาน 16
Black	#000000	Green	#008000
Silver	#c0c0c0	Lime	#00ff00
Gray	#808080	Olive	#808000
White	#ffffff	Yellow	#ffff00
Maroon	#800000	Navy	#000080
Red	#ff0000	Blue	#0000ff
Purple	#800080	Teal	#008080
Fuchsia	#ff00ff	Aqua	#00ffff

2) การกำหนดสีข้อความแบบใช้ฟังก์ชั่น RGB

การกำหนดค่าสีในโหมด RGB มี 2 รูปแบบคือ รูปแบบเปอร์เซ็นต์ 0-100% ความเข้มของสีเรียงจากน้อยไปมาก เช่น (100%, 0%, 0%) คือ แดงเข้ม (0%, 100%, 0%) คือ เขียวเข้ม (0%, 0%, 100%) คือ น้ำเงินเข้ม เป็นต้น และแบบ Digitla 8 bit หรือเลข 0-255 เช่น (255, 255, 255) คือ ขาว (0, 0, 0) คือ ดำเป็นต้น

ตารางสีแบบเปอร์เซ็นต์

ชื่อของสี	เปอร์เซ็นต์	ชื่อของสี	เปอร์เซ็นต์
Black	0%, 0%, 0%	Green	0%, 100%, 0%
Silver	90%, 91%, 98%	Lime	49%, 99%, 0%
Gray	75%, 75%, 75%	Olive	50%, 50%, 0%
White	100%, 100%, 100%	Yellow	100%, 100%, 0%
Maroon	50%, 0%, 0%	Navy	50%, 0%, 0%
Red	100%, 0%, 0%	Blue	0%, 0%, 100%
Purple	50%, 0%, 50%	Teal	0%, 50%, 50%
Fuchsia	100%, 0%, 100%	Aqua	0%, 100%, 100%

ตารางสีแบบ Digital 8 bit

ชื่อของสี	Digital 8 bit	ชื่อของสี	Digital 8 bit
Black	0, 0, 0	Green	0, 255, 0
Silver	230, 232, 250	Lime	124. 252, 0
Gray	192, 192, 192	Olive	128, 128, 0
White	255, 255, 255	Yellow	255, 255, 0
Maroon	128, 0, 0	Navy	0, 0, 128
Red	255, 0, 0	Blue	0, 0, 255
Purple	128, 0, 128	Teal	0, 128, 128
Fuchsia	255, 0, 255	Aqua	0, 255, 255

การกำหนดสีข้อความใน CSS ทำได้โดยกำหนดค่าใน Property "color" มีรูปแบบดังนี้ => color: value; โดย

color หมายถึง Property หรือคำสั่งที่ใช้กำหนดสี

value หมายถึง รูปแบบและค่าสีที่เลือกใช้

ตย. สร้างไฟล์ "ColorText.css" เพื่อกำหนดสีข้อความ

span#red {

color: #ff0000; /* กำหนดสีแบบเลขฐาน 16 */

}

span#green {

color: rgb(0,255,0); /* กำหนดสีแบบ Digital 8 bit */

}

span#blue {

color: rgb(0%, 0%, 100%); /* กำหนดแบบเปอร์เซ็นต์ */

}

สร้างไฟล์ "ColorText.html"

<body>

<h2>ทดสอบข้อความ<span id = “red”>สีแดง</span></h2>

<h2>ทดสอบข้อความ<span id = “green”>สีเขียว</span></h2>

<h2>ทดสอบข้อความ<span id = “blue”>สีฟ้า</span></h2>

</body>

เพิ่มคำสั่งเพื่อเรียกใช้ CSS จากไฟล์ “ColorText.css” ในแท็ก <head> ของไฟล์ “ColorText.html” ดังนี้

วันพฤหัสบดีที่ 22 มีนาคม พ.ศ. 2555

CSS - Text Formatting #1

ไม่มีความคิดเห็น:

แสดงความคิดเห็น