กำหนดรูปแบบโดยอาศัยค่าที่ใส่ให้

เราสามารถกำหนดรูปแบบให้กับ element โดยใช้ ค่า attributeได้

<div id=”bdiv”>
<p>ย่อหน้าที่ 1 ประกอบด้วยเนื้อหาจำนวนมากมาก</p>
<p>ย่อหน้าที่ 2 ประกอบด้วยเนื้อหาจำนวนเล็กน้อย</p>
<div class=”bwork”>
<h2>หัวข้อที่ 2.1 </h2>
<p>ย่อหน้าย่อยๆที่ 1</p>
</div>
<div class=”bwork”>
<h2>หัวข้อที่ 2.2 </h2>
<p>ย่อหน้าย่อยๆที่ 2</p>
</div>
</div>
สิ่งเพิ่มเติมที่ 9.29 โค้ดเพื่อใช้ทดสอบ ในการเปลี่ยนรูปแบบของ class ทั้งหมด

การกำหนดรูปแบบให้กับ element โดยอาศัยค่าที่ใส่

1. ถ้าต้องการ ให้พิมพ์ element โดยที่ element เป็น selector สำหรับ element
2. พิมพ์ [attribute โดยที่ attribute เป็นชื่อของ attribute ของ element ที่เราเลือกใช้
3. ถ้าต้องการ พิมพ์ ="value" ถ้าต้องการกำหนดค่าให้กับ element ที่เลือก
4. พิมพ์ ]

div[class] {color:red;}
สิ่งเพิ่มเติมที่ 9.30 โค้ด CSS ที่ใช้แสดงผลกับ div ของ class


สิ่งเพิ่มเติมที่ 9.31จะเห็นว่า ส่วนที่มี div class เท่านั้น ที่จะได้รับผลกระทบ
เพิ่มเติม
- การเลือกใช้โดยอาศัยค่าที่ใส่นี้ สามารถใช้ได้บน browser ทั่วไปได้

ใช้งาน link element กับสถานะที่เกี่ยวข้อง

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

a:link {color:red;}
a:visited {color:orange;}
a:focus {color:purple;}
a:hover {color:green;}
a:active {color:blue;}
สิ่งเพิ่มเติมที่ 9.22 โค้ด ที่มีลิ้งค์ element ปรากฏอยู่ใน p element เหมือนกับการเขียนลิ้งค์ตามปรกติ

<p>ย่อหน้าที่ 1 ประกอบด้วยเนื้อหาจำนวนมากมาก</p>
<p>ย่อหน้าที่ 2 ประกอบด้วย<a href=”http://meewebfree.com”>ลิ้งค์</a>ส่วนหนึ่ง</p>
<div id=”bwork”>
<h2>หัวข้อที่ 2 </h2>
</div>
สิ่งเพิ่มเติมที่ 9.23 โค้ดที่จะใช้สำหรับทดสอบ link ในสถานะต่างๆ


สิ่งเพิ่มเติมที่ 9.24 เมื่อแสดงหน้าเว็บออกมา ลิ้งค์จะปรากฏเป็นสีแดง


สิ่งเพิ่มเติมที่ 9.25 เมื่อนำเม้าส์ไปวางบนลิ้งค์จะปรากฏเป็นสีเขียว


สิ่งเพิ่มเติมที่ 9.26 เมื่อเล่น tab มา active ที่ลิ้งค์จะปรากฏเป็นสีม่วง


สิ่งเพิ่มเติมที่ 9.27 เมื่อกดที่ลิ้งค์ จะทำให้สีขณะที่กด เปลี่ยนเป็นสีน้ำเงิน


สิ่งเพิ่มเติมที่ 9.28 เมื่อลิ้งค์ดังกล่าวเคยถูกกดไปแล้ว จะทำให้ลิ้งค์เปลี่ยนเป็นสีส้ม

การกำหนดรูปแบบให้กับสถานะต่างๆของลิ้งค์
1. พิมพ์ a โดยa ในที่นี้คือชื่อ ของ tag link นั่นเอง
2. พิมพ์ : (เครื่องหมาย colon)
3. พิมพ์ link เพื่อกำหนดรูปแบบให้กับลิ้งค์ใดๆที่ยังไม่เคยถูกกด
หรือ พิมพ์ visited เพื่อกำหนดรูปแบบให้กับลิ้งค์ที่ถูก click แล้ว
หรือ พิมพ์ focus เพื่อกำหนดรูปแบบให้กับลิ้งค์เมื่อเลื่อน cursor จาก keyboard มาทับ
หรือ พิมพ์ hover เพื่อกำหนดรูปแบบให้กับลิ้งค์เมื่อนำเม้าส์ไปวาง
หรือ พิมพ์ active เพื่อกำหนดรูปแบบให้กับลิ้งค์เมื่อลิ้งค์นั้นเคยถูกคลิกไปแล้ว

เพิ่มเติม
- ใน browser ทั่วๆไป เราสามารถใช้ pseudo-classes ได้ (class ที่ตัวหนังสือเกิดการเปลี่ยนรูปแบบได้ไม่หยุดนิ่งคงที่ เช่นเกิดจากการย่อหน้าเว็บ หรือขนาด browser ที่เปลี่ยนไป) กับ link a tag
- ถ้าสถานะของลิ้งค์ เกิดขึ้นพร้อมๆกัน ในเวลาเดียวกัน สิ่งที่จะแสดงออกมาจะเรียงตามดำกับความสำคัญดังนี้ link, visited, focus, hover , active (LVFHA)

เลือกแสดงผลบางส่วนของ element

ในหลายครั้ง เราสามารถใช้เทคนิคพิเศษ เพื่อให้ได้ผลลัพธ์ที่แปลกๆด้วย เช่นเราจะให้บรรทัดแรกเท่านั้นที่มีสีแดงเป็นต้น? ไม่ว่าจะย่อหน้าหรือขยายหน้าก็ตาม ก็จะมีแต่เพียงบรรทัดแรกเท่านั้น ที่ตัวอักษรเปลี่ยนสีไป… แปลกแต่จริง

เทคนิคการทำให้แสดงผลแค่บางส่วนของ element(โดยในที่นี้เราจะให้มีผลเฉพาะบรรทัดแรกเท่านั้น)
1. พิมพ์ tag โดยที่ tag คือ selector เพื่อที่จะเลือกว่าจะให้มีผลต่อ element ไหน
2. พิมพ์ : (เครื่องหมาย colon)
3. พิมพ์ first-line เพื่อทำให้มีผลเฉพาะ บรรทัดแรกเท่านั้น ตาม element ที่เราเลือกเอาไว้ในข้อที่ 1

p:first-line {color:red;}
สิ่งเพิ่มเติมที่ 9.18 selector ที่ทำให้บรรทัดแรกของ p element นั้นมีสีแดง


สิ่งเพิ่มเติมที่ 9.19 บรรทัดแรกเท่านั้นที่มีสีแดง ไม่ว่าจะยืดหรือหดหน้าเว็บอย่างไรก็ตาม

การทำให้มีผลต่อเฉพาะตัวหนังสือตัวแรก
1. พิมพ์ tag โดยที่ tag เป็น selector เพื่อที่เราต้องการให้มีผลสำหรับตัวหนังสือตัวแรก
2. พิมพ์ : (เครื่องหมาย colon)
3. พิมพ์ first-letter เพื่อทำให้ตัวหนังสือตัวแรกของ element ในข้อที่ 1 เป็นตัวใหญ่

p:first-letter {color:red;}
สิ่งเพิ่มเติมที่ 9.20 selector ที่ทำให้ตัวหนังสือตัวแรก มีสีแดง


สิ่งเพิ่มเติมที่ 9.21 เฉพาะตัวหนังสือแรกเท่านั้นที่จะเป็นสีแดง

เพิ่มเติม
- selector first-letter และ selector first-line? นั้น เราเรียกว่า psudo-element ดังนั้นเราอาจจะไม่สามารถกำหนดการแสดงผลที่มีการระบุเฉพาะเจาะจงได้ เพราะว่าการแสดงผลที่ได้มันจะขึ้นกับหลายปัจจัยเช่นขนาดหน้าจอผู้ใช้ ชนิดของ browser แต่อย่างไรก็ตามเราก็อาจจะใช้ span ช่วยงานได้เช่นกัน เพียงแต่ว่าจะไม่สามารถแปรสภาพเปลี่ยนไปตามปัจจัยต่างๆที่เกิดขึ้นได้
- browser หลักๆ(รวมไปถึง internet explorer ตั้งแต่ version 6)ก็รองรับการแสดงผลของ pseudo-element ทั้ง first-line และ first-letter
- สำหรับ css property ที่สามารถนำมาใช้ได้กับ first-letter pseudo-element ก็คือ font, color, background, text-decoration,vertical-align (แต่ว่า first-letter ไม่ได้เป็นแบบที่จัดเรียงได้นะครับ), text-transform, line-height, margin,padding,border, float และ clear ซึ่งรายละเอียดจะกล่าวอีกทีในภายหลัง
- คุณสามารถใช้งานผสมกันได้ระหว่าง first-letter หรือ first-line pseudo-elements ด้วย เช่น ถ้าเราต้องการให้ตัวอักษรตัวแรกของ p element ใน bwork เป็นตัวใหญ่เราก็จะใช้ว่า div.works p:first-letter

กำหนด selector โดย ลำดับ

ใน CSS เราสามารถกำหนดตำแหน่งการใช้ element ได้โดยการอาศัยลำดับที่ไล่เรียงกันมา

<div id=”bdiv”>
<h2>หัวข้อที่ 1</h2>
<p>ย่อหน้าที่ 1</p>
<p>ย่อหน้าที่ 2</p>
<div id=”bwork”>
<h2>หัวข้อที่ 2 </h2>
<p>เนื้อหาส่วนที่ 2</p>
</div>
</div>
สิ่งเพิ่มเติมที่ 9.12 เมื่อเราใช้ การเรียงลำดับคำสั่งเพื่อจัดรูปแบบ โดยอาศัยความสัมพันธ์กันระหว่าง element โดยในที่นี้?? p element ก็จะได้รับผลมาจาก div ที่ชื่อ bdiv และ p element ที่อยู่ใน div? ที่ชื่อ bwork ด้วยเช่นกัน

การเลือกใช้ selector โดยอาศัยการเรียงลำดับ
1.พิมพ์? element ลำดับสูงสุดที่เราต้องการให้มีผลพร้อมทั้งชื่อของ element นั้นด้วย
2.เคาะ space bar 1ที
3.ถ้าต้องการสามารถพิมพ์ ข้อ 1 และ 2 ซ้ำได้อีกเพื่อให้ element อื่นๆมีผลด้วย
4.พิมพ์ element ลำดับล่างสุดที่เราต้องการให้มีผลจริงๆ กับ element นั้นๆ

div#bdiv p { color: red;}
สิ่งเพิ่มเติมที่ 9.13 การเขียน div#bdiv ให้เป็น element ลำดับที่สูงที่สุดที่เราต้องการให้มีผลเฉพาะใน div ที่ชื่อ bdiv เท่านั้น โดยที่ จะมีผลต่อ p element ที่ปรากฏภายใต้ bdiv เท่านั้น


สิ่งเพิ่มเติมที่ 9.14 เราจึงจะเห็นได้ว่า ทุก p element ที่อยู่ภายใต้ div ที่ชื่อ bdiv นั้น จะปรากฏเป็นสีแดง รวมทั้งที่อยู่ใน div ที่มี class bwork ด้วย ทั้งนี้เพราะว่า bwork เป็น child ของ bdiv อีกทีนึงนั่นเอง

เพิ่มเติม
- selector ที่เรียกใช้งานจากชื่อของ element ที่สูงสุด มีชื่อเรียกว่า descendant selector
- อย่าจำ div#bdiv เอาไปใช้นะครับ เวลาเอาใช้ใช้จริงก็ขอให้เข้าใจว่ามันคืออะไรแน่ จากตัวอย่าง div#bdiv นั้นหมายความว่าเป็นส่วนของ div ที่มี id ที่ชื่อ bdiv นั่นเอง และ div#bdiv p หมายความว่า p element ที่ปรากฏภายใต้ div ที่ id bdiv นั่นเอง

การเลือก element โดยอาศัยการลำดับ (parent , child)
1. พิมพ์ parent โดยที่ parent เป็นชื่อของ element
2. พิมพ์ > (เครื่องหมายมากกว่า)
3.จะทำข้อที่ 1,2 ซ้ำอีกทีก็ได้ถ้าต้องการ
4. พิมพ์ child โดยที่ child หรือ element ที่มีปรากฏอยู่ภายใต้ parent element

div#bdiv > p { color: red;}
สิ่งเพิ่มเติมที่ 9.15 อย่างนี้จะหมายความว่า จะให้มีผลต่อเฉพาะ tag p ที่ปรากฏภายใต้ div ที่ชื่อ bdiv เท่านั้น โดยหาก? p element ที่ปรากฏภายใต้ element อื่น ที่อยู่ย่อยใน div bdiv อีกก็จะไม่มีการเปลี่ยนแปลงใดๆ

เพิ่มเติม
- selector ที่ทำงานในแบบ child , parent เราเรียกว่า child selector
- internet explorer 5.5 และ 6 สำหรับ windows ไม่สามารถใช้งาน child selector ได้ แต่ว่า internet explorer 7 สามารถทำงานได้


สิ่งเพิ่มเติมที่ 9.16 จะแสดงสีเฉพาะ p element ที่เป็น child ของ bdiv เท่านั้น ส่วน p element ที่อยู่ใน bwork จะไม่แสดงสีออกมา

วิธีกำหนด element เพื่อจัดรูปแบบของ element แรกเท่านั้น
1. พิมพ์ parent โดยที่ parent คือตัว selector ที่เราจะเอามาเป็นหลัก
2. พิมพ์ :first-child

div#bdiv p:first-child { color: red;}
สิ่งเพิ่มเติมที่ 9.17 การแสดงผล ที่จะมีผลต่อ element แรกเท่านั้น

กำหนด selector โดย ID หรือ Class

ถ้าเราได้กำหนด element ใดๆเอาไว้ในรูปแบบ id หรือ class แล้วนั้น เราก็จะสามารถเลือกเจาะจง กำหนดรูปแบบที่เฉพาะตัวให้กับ id หรือ class นั้นๆได้ โดยที่ id หรือ class อื่นจะไม่ได้รับผลกระทบใดๆเลย

<body>
<div id=”cc1″>
<h2>หัวข้อที่ 1</h2>
<p>เราก็จะถือว่านี้คือย่อหน้าปรกติ</p>
</div>
<div id=”cc2″>
<h2>หัวข้อที่ 2 </h2>
<p>เนื้อหาส่วนที่ 2</p>
</div>
</body>
สิ่งเพิ่มเติมที่ 9.9 โค้ด ที่มีการแบ่ง id ออกเป็นสอง id แต่เนื้อหา มีในลักณะที่คล้ายกัน เราจะเอาไปกำหนด id ให้ต่างกันเพื่อนดูความแต่ต่างเมื่อเรียกใช้งาน

การกำหนดรูปแบบให้ id ใดๆโดยเฉพาะเจาะจง
1.พิมพ์ #
2.ไม่ต้องเคาะวรรคใดๆ ให้พิมพ์ชื่อ id ลงไปได้ทันที โดยที่ id จะต้องไม่ซ้ำกัน เพราะว่ามาตรฐานกำหนดว่า id ใดๆจะต้องมีได้เพียง 1 เดียวในแต่ละหน้า เท่านั้น

div#cc1 {color: red;}
สิ่งเพิ่มเติมที่ 9.10 รูปแบบนี้คือการกำหนดให้ id ชื่อ cc1 มีสีแดง

การกำหนดรูปแบบให้ class ใดๆ โดยเฉพาะเจาะจง
1.พิมพ์ .
2.ไม่ต้องเคาะวรรคใดๆ ให้พิมพ์ชื่อ class ลงไปได้ทันที โดยที่ class จะต้องไม่ซ้ำกัน เพราะว่ามาตรฐานกำหนดว่า class ใดๆจะต้องมีได้เพียง 1 เดียวในแต่ละหน้า เท่านั้น

เพิ่มเติม
- เราสามารถใช้ class และ id เพื่อการกำหนดรูปแบบเพียงแค่จุดเดียว เช่น .news { color: red;} ก็จะมีผลต่อเฉพาะจุดที่เรียกใช้ class ที่ชื่อ news แล้วเท่านั้น แต่ขณะที่ h1.news {color: red; } จะทำให้ h1 element ที่มี class ที่ชื่อ news นั้น จะได้รับผลการเปลี่ยนแปลงนี้


สิ่งเพิ่มเติมที่ 9.11 จะเห็นว่าเฉพาะ id cc1 เท่านั้น ที่รูปแบบเปลี่ยนไปตามที่เราได้เขียน style เอาไว้