Moncy Services: มีนาคม 2012

วันพุธที่ 28 มีนาคม พ.ศ. 2555

CSS - Text Formatting #2

การเปลี่ยนแปลงของขนาดตัวอักษร

เป็นเรื่องที่ต้องจัดการ และวางแผนให้ดีตั้งแต่ขั้นตอนแรกองการออกแบบเวบไซต์ ทั้งนี้การใช้ขนาดตัวอักษรที่เหมาะสมจะทำให้การจัดรูปแบบเนื้อหาดูน่าสนใจ

1) การใช้หน่วย Pixel

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

การปรับเปลี่ยนตัวอักษรทำได้โดยกำหนดค่าใน Property “font-size” มีรูปแบบดังนี้ => font-size: valuepx; โดย

font-size หมายถึง Property หรือคำสั่งที่ใช้กำหนดขนาดตัวอักษร

value หมายถึง ค่าขนาดของตัวอักษร

px หมายถึง หน่วยของขนาดตัวอักษร

ตย. span#pixel {

font-size: 12px; /* กำหนดขนาดตัวอักษรหน่วยเป็น pixel */

}

2) การใช้หน่วย Keyword. Percentage และ Ems

a. Keyword

ใน CSS จะมี Keyword อยู่ 7 ค่า คือ xx-small, x-small, small, medium, large, x-large และ xx-large

ตารางเปรียบเทียบขนาดตัวอักษรที่ใช้ Keyword กับหน่วยเป็น Pixel

Keyword	Pixel
xx-small	9px
x-small	10px
small	13px
medium	16px
large	18px
x-large	24px
xx-large	32px

การกำหนดขนาดข้อความใน Property “font-size” โดยกำหนดหน่วยเป็น Keyword

span#keyword {

font-size: large; /* กำหนดขนาดัวอักษรหน่วยเป็น Keyword */

}

b. Percentage

100% มีค่าเท่ากับ 16px โดยทั่วไปจะนำไปใช้ร่วมกับหน่วยอื่น ๆ เพื่อกำหนดเป็นค่าเริ่มต้น

การกำหนดขนาดตัวอักษรใน Property “font-size” เป็น Percentage

span#percent {

font-size: 20% /* กำหนดขนาดตัวอักษรหน่วยเป็น Percentage */

}

c. Ems

เป็นหน่วยที่กำหนดขึ้นเพื่อแก้ไขข้อจำกัดของหน่วย Pixel โดย 1em มีค่าเท่ากับ 100% หรือ 16 Pixel

การกำหนดขนาดตัวอักษรใน Property “font-size” เป็น Ems

span#em {

font-size: 2 em; /* กำหนดขนาดตัวอักษรหน่วยเป็น Ems */

}

ตย. การกำหนดขนาดตัวอักษรในรูปแบบต่าง ๆ

สร้างไฟล์ CSS ชื่อ “FontSize.css” เพื่อกำหนดขนาดตัวอักษรในรูปแบบต่างๆ

span#pixel {

font-size: 12px;

}

span#keyword {

font-size: large;

}

span#em {

font-size: 2em;

}

สร้างไฟล์ HTML ชื่อ “FontSize.html”

<body>

<p><span id=”pixel”>ข้อความนี้ปรับขนาดข้อความโดยใช้หน่วย Pixel</span></p>

<p><span id=”keyword”>ข้อความนี้ปรับขนาดข้อความโดยใช้หน่วย Keyword</span></p>

<p><span id=”percent”>ข้อความนี้ปรับขนาดข้อความโดยใช้หน่วย Percentage</span></p>

<p><span id=”em”>ข้อความนี้ปรับขนาดข้อความโดยใช้หน่วย Em</span></p>

</body>

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

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

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” ดังนี้