เพิ่ม font สำรอง

ถ้าเรากำหนด font ที่เว็บเราใช้นั้น คนที่เปิดเว็บเราจะสามารถมองได้ต่อเมื่อเค้ามี font ดังกล่าวตามที่เรากำหนดติดตั้งในเครื่องของผู้เปิดเว็บแล้วเท่านั้น แต่มันไม่เป็นอย่างนั้นเสมอไป ดังนั้นเราจึงจำเป็นที่ต้องระบุ font สำรองในกรณีที่ font แรกไม่มีเอาไว้ด้วย

ถ้าต้องการให้สามารถแสดงผลได้สวยงามทั้งใน MAC และ Windows เราก็จะต้องตรวจสอบให้ดี ว่าแต่ละค่ายใช้ชื่อ font ว่าอะไรบ้าง เพื่อที่จะได้เอาไว้ระบบใน CSS ของเรา ซึ่งจะระบุเอาไว้ทั้งสองชื่อ สำหรับแต่ละ OS ในคราวเดียวกันเลยก็ได้ไม่เสียหาย และเราก็อาจจะระบุ font สำหรับ OS อื่นๆได้อีกเผื่อว่าใน OS ที่เราใช้นั้นไม่มี

การกำหนด font สำรอง
1.หลังจากที่พิมพ์ font-family: name ตามบทความก่อนหน้านี้แล้ว ให้พิมพ์ , name2 โดยที่ name2 เป็น font สำรอง โดยคั่นแต่ละชื่อ font ด้วยลูกน้ำ
2.ทวนข้อที่ 1 อีกที ถ้าใส่ font อื่นๆ

เพิ่มเติม
- เราสามารถกำหนด font ที่รองรับ แต่ละภาษาได้ใน font-family เดียวกัน (เช่นว่า สำหรับ ภาษาญี่ปุ่น, อังกฤษ, ไทย)
- เราสามารถใช้ชื่อ font เหล่านี้ได้ เช่น serif, sans-serif, cursive, fantasy และ monospace

เปลี่ยน font ที่ใช้ในการแสดงผล

เป็นสิ่งที่จะได้ใช้บ่อยมาก (ถ้าเป็น font อังกฤษนะ) เพราะว่าเพื่อต้องการสร้างความแตกต่างระหว่างตัวหนังสือในแต่ละจุดเช่น header, body

การเปลี่ยน font ที่ใช้
หลังจากที่เราได้กำหนด selector ใน style sheet พิมพ์ font-family: name โดยที่ name คือชื่อของ font

h2, h3 {font-family: “Comic Sans MS”}
p {font-family: “MS Sans Serif”}
สิ่งเพิ่มเติมที่ 10.1 CSS ที่ใช้สำหรับการเปลี่ยน font

เพิ่มเติม
- ถ้าชื่อ font มีหลายพยางค์(ที่ต้องเคาะวรรค) จะต้องครอบด้วยเครื่องหมายคำพูด
- ถ้าชื่อ font ประกอบด้วยตัวอักษรที่ไม่ใช่ ASCII เราจะต้องประกาศ encoding ของ style sheet ก่อนด้วย
- ในขณะที่เราต้องการใช้ font ที่เรากำหนดไว้ คนที่เปิดเว็บเรานั้น จะต้องมี font ดังกล่าวอยู่ในเครื่องด้วย
- เราสามารถ กำหนด font ที่ใช้ ขนาด font และความสูงของบรรทัดได้ในคราวเดียว โดยใช้ การกำหนดค่าของ font
- font-family เป็นแบบสืบทอดกันไปได้

บทที่ 10 จัดรูปแบบการแสดงผลโดยใช้ style sheet

จากที่เราได้กล่าวมาในบทความเรื่อยๆเมื่อลทที่ผ่านๆมา ไม่ว่าจะเป็นในส่วนของ XHTML หรือ HTML ที่เราเอาไปใช้จัดการกับตัวหนังสือต่างๆนั้น จะเห็นได้ว่ามันยังมีข้อจำกัดต่างๆอยู่อีกมากมายที่อาจจะทำให้ไม่ได้รูปแบบดังใจ้เรา แต่ว่า CSS จะทำให้ได้อย่างที่ใจเราคิด

CSS นั้น สามารถเปลี่ยนขนาดของตัวหนังสือ font ที่ใช้? ความหนา ความสูงของบรรทัด สีพื้นหลัง สีตัวหนังสือ ขนาดของช่วงว่าง การจัดตำแหน่งทิศทาง ขีดเส้นใต้ ขีดเส้นด้านบน ขีดเส้นทับ กระพริบ แปลงให้เป็นตัวใหญ่ แปลงให้เป็นตัวเล็ก? นอกจากนี้เรายังสามารถกำหนดรูปแบบให้กับหน้าใดๆของเว็บก็ได้ ในบทนี้เราจะมาพูดถึงรายละเอียดกัน

โดยในบทนี้เราจะพูดถึง property ที่เราจะได้ใช้กันบ่อยๆ กับการจัดการตัวหนังสือ แต่ก็ไม่ได้หมายความว่าจะเอาไปใช้กับวัตถุที่ไม่ใช่ตัวหนังสือไม่ได้

Wednesday, October 1st, 2008 at 06:00

การผสมรูปแบบของ selector

เราสามารถผสมรูปแบบของ selector ในแบบต่างๆเข้ากันได้ จากเนื้อหาที่ได้กล่าวมาก่อนหน้านี้แล้ว

วิธีการผสมรูปแบบของ selector
1.กำหนด context ที่เราต้องการกำหนดรูปแบบให้ขึ้นมา โดยอิงจาก element ที่เราต้องการให้มีผล
2.ใส่ชื่อ element จากนั้นใส่เครื่องหมาย colon
3.จากนั้นใส่ pseudo-class เพื่อให้เกิดผลตามที่เราต้องการ
4.จากนั้นกำหนด style ตามที่เราต้องการ

div.works p em:first-letter {color: red;}
สิ่งเพิ่มเติมที่ 9.35 เป็นการผสม rule เข้าด้วยกัน เพื่อกำหนดการเปลี่ยนแปลงของรูปแบบและตำแหน่ง โดย div.works p เป็นแบบการเรียงลำดับ em คือชื่อ และ : first-letter เป็นแบบ pseudo class นั่นเอง

เพิ่มเติม
- เราสามารถข้ามขั้นตอนใดก็ได้ถ้าต้องการ

กำหนดรูปแบบให้แบบเป็นกลุ่ม

เราสามารถกำหนดรูปแบบใดรูปแบบหนึ่ง ให้มากกว่า 1 element ได้ในคราวเดียว โดยเราจะเอาไปประยุกต์ใช้กับ element ใดๆก็ได้

<h2>หัวข้อที่ 1</h2>
<p>เนื้อหาที่ 1</p>
<h3>หัวข้อที่ 2</h3>
<p>เนื้อหาที่ 2</p>
<h3>หัวทข้อที่ 3</h3>
<p>เนื้อหาที่ 3 </p>
สิ่งเพิ่มเติมที่ 9.32 โค้ดสำหรับทดสอบการเปลี่ยนแปลงรูปในแบบเป็นกลุ่ม ซึ่งในที่นี้คือ h2 และ h3

การกำหนดรูปแบบให้กับทั้งกลุ่ม
1. พิมพ์ selector1 โดยที่ selector1 เป็นชื่อของ element ที่จะกำหนดรูปแบบให้
2.พิมพ์ , (เครื่องหมายลูกน้ำ)
3.พิมพ์ selector2 โดยที่ selector2 เป็นชื่อของ element ที่จะกำหนดรูปแบบให้
4. ทำขั้นตอนที่สองและสามอีกถ้าต้องการ

h2, h3 {color:red;}
สิ่งเพิ่มเติมที่ 9.33 CSS style เพื่อการกำหนดรูปแบบให้ทั้ง h1 และ h2 ในคราวดียวกัน


สิ่งเพิ่มเติมที่ 9.34 เฉพาะตำแหน่งที่เป็น h2 และ h3 ก็จะมีรูปแบบที่เหมือนกัน

เพิ่มเติม
- การทำแบบนี้เป็นลักษณะที่ทำให้สั้นขึ้น เช่นว่า h1, h2 {color: red} ซึ่งจะทำให้ได้ผลที่เหมือนกับ h1 {color: red} และ h2 {color: red}
- เราสามารถจัดกลุ่มของ selector ได้ ตัวอย่างเช่น h1, div.bworks p:first-letter