Pseudo-element

เป็น selector กลุ่มที่น่าสนใจที่จัดรูปแบบการแสดงผลโดยขึ้นกับสถานะ หรือเงื่อนไข เช่น เฉพาะอักษรตัวแรกใน <p> เท่านั้นที่เป็นตัวอักษรสีแดงตัวใหญ่ เป็นต้น 

selector:pseudo-element {property: value}

selector.class:pseudo-element {property: value}

Pseudo-element	Purpose
:first-letter	กำหนด style ให้ตัวอักษรตัวแรกของข้อความ
:first-line	กำหนด style ให้กับข้อความบรรทัดแรก
:before	Inserts some content before the content of an element
:after	Inserts some content after the content of an element

---

Pseudo-classes

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

selector:pseudo-class {property: value}

selector.css-class:pseudo-class {property: value}

Pseudo-class	Purpose
:link	กำหนด style ให้กับ link ปกติที่ยังไม่เคยถูก click
:visited	กำหนด style ให้กับ link ที่เคยถูกคลิกแล้ว
:hover	กำหนด style ให้กับ link เมื่อเลื่อนเมาส์ไปอยู่เหนือ link
:active	กำหนด style ให้กับ link ขณะถูกคลิก
:focus	กำหนด style ให้กับ element ขณะถูก focus
:first-child	กำหนด style ให้กับ element ที่เป็น first child ของ element อื่นๆ
:lang	Allows the author to specify a language to use in a specified element

---

Anchor Pseudo-classes

link ที่มีสถานะ active, visited, unvisited, หรือเมื่อนำเมาส์วางบน link เราสามารถกำหนดรูปแบบให้แตกต่างกันได้

Example

a:link {color: #FF0000} /* unvisited link สีแดง*/
a:visited {color: #00FF00} /* visited link สีเขียว*/
a:hover {color: #FF00FF} /* mouse over link สีชมพู */
a:active {color: #0000FF} /* selected link สีน้ำเงิน*/

<a href="css_chapter24.html">Chapter24</a>
<a href="css_chapter25.html">Chapter25</a>

Output

Chapter24 Chapter25

หรือ จะเขียน Pseudo-classes กับ CSS Classes ก็ได้ 
ถ้าต้องการระบุให้เฉพาะบาง link เท่านั้นที่แสดงผลต่างจะ link อื่น เขียนได้ดังนี้ 

a.special:hover {color: #FF0000; background-color:#CCFF99}
/* mouse over link สีแดง พื้นเขียว */

<a class="special" href="css_chapter22.html">Chapter22</a>
<a class="special" href="css_chapter23.html">Chapter23</a>
<a href="css_chapter24.html">Chapter24</a>
<a href="css_chapter25.html">Chapter25</a>

Output

Chapter22 Chapter23 Chapter24 Chapter25

การจัด Layout ด้วย CSS (Div)

แบ่งเป็น 4 แบบ คือ

1. Fixed Layout 
จะกำหนดขนาดความกว้าง และตำแหน่งของส่วนต่างๆ เป็น pixel ทำให้กำหนดขนาด และตำแหน่งของส่วนต่างๆ ได้ตามต้องการ ไม่ผิดเพี้ยนไปตามขนาดหน้าจอ และเมื่อย่อขยายหน้าต่างเว็บเบราเซอร์ (IE, Firefox) แล้ว ตำแหน่งของส่วนต่างๆในหน้าเว็บจะยังคงเดิม ถ้าเราย่อขนาดเบราเซอร์ลงจะเกิดเป็น scrollbar เพื่อเลื่อนดูเนื้อหาที่มองไม่เห็น แต่มีข้อเสียคือไม่สามารถใช้พื้นที่หน้าจอได้อย่างเต็มที่

เนื่องจากผู้ใช้แต่ละคนมีการกำหนดความละเอียดของหน้าจอแตกต่างกันไป เช่น 800x600, 1024x780 (มีผู้ใช้มากที่สุด), 1280x800, 1280x960, 1280x1024 pixel

เว็บส่วนใหญ่จะออกแบบเพื่อรองรับความละเอียดหน้าจอที่ 800x600 เป็นหลัก โดยกำหนดความกว้างของเนื้อหาอยู่ที่ 780 pixel และจะจัดวางเนื้อหาอยู่กึ่งกลางหน้าจอ ทำให้ ผู้ใช้งานที่ความละเอียดหน้าจอ 800x600 จะเห็นหน้าเว็บเพจเต็มพอดี ส่วนผู้ที่ใช้ความละเอียดหน้าจอ 1024x780 จะเห็นเนื้อหาอยู่กึ่งกลางหน้าจอ พื้นที่ด้านข้างที่เหลือจะเป็นพื้นหลังที่เป็นสีหรือรูปภาพ

แต่ถ้าเราออกแบบให้ผู้ที่ใช้ความละเอียดหน้าจอ 1024x780 มองเห็นหน้าเว็บเต็มพอดี เมื่อผู้ที่ใช้ความละเอียดหน้าจอ 800x600 ดูหน้าเว็บ หน้าเว็บจะเกินหน้าจอ เกิดเป็น scrollbar แนวนอน ต้องเลื่อนไปทางขวาจึงจะมองเนื้อหาทั้งหมดได้ แต่ปัจจุบัน (2009) ส่วนใหญ่มากกว่า 60% แล้วผู้ใช้จะใช้ความละเอียดหน้าจอที่ 1024x780

2. Liquid Layout
จะกำหนดขนาดความกว้างของส่วนต่างๆ เป็นเปอร์เซ็นต์ เมื่อเราย่อหรือขยายขนาดของเว็บเบราเซอร์ ขนาดของส่วนต่างๆ จะย่อขยายตาม

ข้อดี คือ ทำให้ได้ใช้พื้นที่ในหน้าจอได้อย่างมีประสิทธิภาพ และทำให้แสดงผลบนอุปกรณ์อื่นๆ เช่น มือถือ ได้ดี

ข้อเสีย คือ การจัดวางองค์ประกอบต่างๆ นั้นทำได้ค่อนข้างยาก เพราะขนาดไม่แน่นอน

3. Elastic Layout
จะกำหนดขนาดของส่วนต่าง ๆ เป็น em ทำให้ส่วนต่างๆ ย่อหรือขยาย ตามการกำหนดค่า Text size ของเบราเซอร์

ข้อดี คือ เมื่อเพิ่มหรือลดขนาดของตัวอักษรแล้ว ยังสามารถคงรูปแบบการจัดวางส่วนต่างๆ ไว้ได้อย่างดี

ข้อเสีย คือ การจัดทำยุ่งยาก

4. Hybrid Layout 
เป็นการใช้แบบต่างๆ มาผสมกัน เช่น Sidebar ด้านข้าง ทั้ง 2 ด้านเป็น Elastic Layout ส่วนเนื้อหาเป็น Liquid Layout เป็นต้น

เมื่อเข้าใจเรื่องการจัดวาง Layout แบบต่างๆ แล้ว ทีนี้มาดูการเขียน code กันต่อค่ะ วิธีการไม่ยากแค่เพียงใช้โปรแกรม Dreamweaver เท่านั้น เวลาที่เรา New เอกสารใหม่ขึ้นมา จะมีให้เราเลือกว่าอยากจะได้ Layout แบบไหน จะแบ่งกี่คอลัมน์ ต้องการส่วน Header และ Footer หรือไม่ และเลือกได้ว่าจะให้ส่วน style sheet ฝังอยู่ในหน้าเอกสารนั้นเลย (Add to Head) หรือว่าแยกเป็นอีกไฟล์ต่างหาก (Create New File) หรือจะให้ใส่ style sheet รวมไปในไฟล์ style sheet ที่เรามีอยู่แล้ว (Link to Existing File) ก็ได้ค่ะ

Layout

ในหน้าเว็บเพจหนึ่งประกอบไปด้วยส่วนหัวเว็บ (Page Header), ส่วนเนื้อหา และการเชื่อมโยง (Page Body),  และส่วนท้าย (Page Footer)   การจัดสรรพื้นที่ของหน้าเว็บเพจเพื่อแสดงส่วนประกอบเหล่านี้ ทำได้หลายรูปแบบ เช่น แบ่งแบบอิสระ แบ่งแบบ 2 คอลัมน์ และ 3 คอลัมน์   ตามที่ได้พูดถึงในเรื่องการออกแบบเว็บไซต์ (ถ้าจำไม่ได้คลิกที่นี่เพื่ออ่าน) 

ในการลงมือเขียนเว็บเพจจริง   การจัดรูปหน้าเว็บ (Layout) สามารถใช้ Table หรือ ใช้ Div  ในการจัดวางส่วนประกอบของหน้าเว็บ

แต่การใช้ <table> ในการวาง Layout หน้าเว็บเพจ ออกจะผิดวัตถุประสงค์ในการใช้งานของ <table> อยู่บ้าง เนื่องจากที่จริง <table> นั้นใช้ในการแสดงข้อมูลในรูปตาราง

ปัจจุบันเว็บไซต์ต่างๆ เปลี่ยนจากการใช้ Table จัดวาง Layout ให้หน้าเ็ว็บเพจ มาเป็นแบบ Tableless โดยใช้ <div> และใช้ CSS ในการจัดตำแหน่ง ขนาด และสี ให้กับ tag <div> แทน เพราะมีข้อดีกว่าการใช้ Table

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

การใช้ Div ยัง ทำให้สามารถเปลี่ยนแปลง CSS ได้ง่ายกว่า และไม่เยิ่นเย้อเหมือน Table

นอกจากนี้ยังเพิ่มความสามารถในการเข้าถึงข้อมูลให้กับคนพิการทางสายตา ซึ่งจะอาศัยโปรแกรม Screen Readers อ่านเนื้อหาในเว็บให้ฟัง การใช้ Table ซ้อน Table อาจทำให้ Screen Readers อ่านข้อความผิดพลาดได้ แต่หากใช้ CSS เป็นตัวกำหนดรูปแบบ และ กำหนดเนื้อหาตัวหนังสือใน HTML เมื่อถอดตัว CSS ออกจาก HTML เอกสารก็จะแสดงผลไม่ต่างกับ Microsoft Word ที่อ่านง่ายขึ้น และถูกต้องยิ่งขึ้น

Media Types

ในการกำหนดการแสดงผลหน้าตาเว็บเพจ บนสื่อประเภทต่างๆ เราสามารถกำหนด style ให้แตกต่างกันได้ เช่น ตอนที่เราเห็นบนหน้าจอ (screen) กับตอนที่สั่งพิมพ์ออกกระดาษ (print) ให้แสดงผลไม่เหมือนกัน

แล้วประเภทของสื่อมีอะไรบ้าง ...

Media Type

• all - ใช้ในอุปกรณ์ทุกชนิด
• aural - แสดงผลออกทางระบบช่วยอ่านออกเสียง
• braille - แสดงผลออกทางเครื่องช่วยอ่านสำหรับคนตาบอด
• embossed - แสดงผลออกทางเครื่องพิมพ์สำหรับคนตาบอด
• handheld - แสดงผลออกทางจอภาพของเครื่องคอมพิวเตอร์ชนิดพกพา (handheld) ซึ่งมีขนาดเล็ก ไม่สามารถแสดงสีได้ (monochrome) และมีประสิทธิภาพในการรับส่งข้อมูลต่ำ
• print - แสดงผลออกทางเครื่องพิมพ์
• projection - แสดงผลออกทางจอภาพที่มีความต่างสี(contrast) และความสว่าง(brightness) ต่ำ เช่น จอภาพ LCD, การแสดงผลผ่านเครื่อง projector
• screen - แสดงผลออกทางจอภาพของเครื่องคอมพิวเตอร์
• tty - แสดงผลออกทางเทอร์มินัลชนิดตัวอักษรเท่านั้น เช่น โปรแกรม Lynx, เครื่องโทรพิมพ์
• tv - แสดงผลออกทางจอภาพของเครื่องโทรทัศน์

Mouse cursor

การกำหนด style ใ้ห้กับ Mouse cursor หากคุณใช้ browser Firefox ลักษณะของ Cursor ที่เห็นจะไม่เหมือนกับของ IE (ลองเอาเมาส์เลื่อนที่ค่า value ต่างๆ ดูค่ะ)

Property	Value	Cursor	IE	FF
cursor	default		4+	2+
	crosshair		4+	2+
	hand		4+
	pointer		4+	2+
	move		4+	2+
	text		4+	2+
	wait		4+	2+
	help		4+	2+
	n-resize		4+	2+
	ne-resize		4+	2+
	e-resize		4+	2+
	se-resize		4+	2+
	s-resize		4+	2+
	sw-resize		4+	2+
	w-resize		4+	2+
	nw-resize		4+	2+
	progress		6+	2+
	not-allowed		6+	2+
	no-drop		6+	2+
	vertical-text		6+	2+
	all-scroll		6+	2+
	col-resize		6+	2+
	row-resize		6+	2+
	url(yourcursor.cur)		6+	2+

Scroll bar

การกำหนด style ใ้ห้กับ Scroll bar ใช้งานได้เฉพาะ IE5.5+ ไม่สามารถใช้ได้กับ Firefox

Property	Value
scrollbar-face-color	color	สีแถบที่เลื่อน
scrollbar-highlight-color	color	สีขอบด้านบน และด้านซ้าย ด้านใน
scrollbar-shadow-color	color	สีขอบด้านล่าง และด้านขวา ด้านใน
scrollbar-3dlight-color	color	สีขอบด้านบน และด้านซ้าย ด้านนอก
scrollbar-darkshadow-color	color	สีขอบด้านล่าง และด้านขวา ด้านนอก
scrollbar-arrow-color	color	สีลูกศร
scrollbar-track-color	color	สีพื้นด้านล่าง