เลือกแสดงผลบางส่วนของ 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

No comments yet.
You must be logged in to post a comment.