ส่วนนี้เป็นเนื้อหาต่อจาก Selector #1 ค่ะ ซึ่งเนื้อหา Selector มีทั้งหมด 8 ข้อ ครั้งนี้มาต่อข้อ 5-8 กันค่ะ...
5. การจัดรูปแบบแท็กที่ซ้อนอยู่ภายในแท็ก
Descendent Selecter คือการรวมเอา
Tag
Selecter, Class Selecter และ ID
Selecter เข้าด้วยกัน
เพื่อให้กำหนดสไตล์ได้ง่ายและมีความถูกต้องมากขึ้น
1)
Descendent Selecter ใช้กำหนดสไตล์ของแท็กที่ตามกับแท็กอื่นๆ
บนเวบเพจ และช่วนให้เข้าใจการทำงานองแท็กชนิดอื่นๆ ด้วย
โครงสร้างของ HTML
ช่วยให้นักพัฒนาเวบสามารถนำ CSS ใช้กับ HTML ได้ตามความสัมพันธ์ของ Element ใดๆ บนเวบได้ โดยความสัมพันธ์ระหว่าง Elenent
แบ่งออกเป็น 5 กลุ่ม คือ...
1.1) Ancestor คือแท็กต้นกำเนิดที่ครอบแท็ก
HTML
อื่นๆ ไว้ เช่น <html> เป็น Ancestor ของแท็กอื่นๆ และ <body> เป็น Ancestor ของแท็กที่อยู่ภายใต้ของแท็กมันเอง เป็นต้น
1.2) Descendent คือแท็กที่มีการสืบทอด
เช่น <body>
เป็น Descendent ของ <html> เป็นต้น
1.3) Parent คือแท็กพ่อ/แม่ของแท็กอื่นๆ ซึ่งเชื่อมโยงได้โดยตรง เช่น <html>
เป็น Parent ของ <head> และ <body> และ <p> เป็น Parent ของ <strong>
1.4) Child คือแท็กลูกที่อยู่ในแท็กอื่นๆ
เช่น <h1>
และ <p> เป็น Child ของ <body>
1.5) Sibling คือแท็กพี่น้อง
แท็กนี้จะเชื่อมโยงไปยัง Parent เดียวกัน เช่น <head> และ <body> เป็น Sibling
2) การสร้าง Descendent
Selector เป็นการนำแนวคิดของ HTML
Family Tree มาใช้กำหนดสไตล์ให้ดับแท็กต่างๆ
เพื่อให้สามารถแสดงผลตามความสัมพันธ์ของแท็กในลักษณะสืบทอดตั้งแต่ 2 ลำดับขึ้นไปอย่างถูกต้อง ซึ่งแต่ละ Selector
จะกำหนดแบบ ID Selector หรือ Tag Selector ก็ได้
Descendent Selector จะกำหนดสไตล์ให้กับ
Element
ในลักษณะเครือข่ายคือ ต่างก็มีความสัมพันธ์ต่อกัน
โดยให้มีรูปแบบเดียวกับ Ancestor และ Descendent และพัฒนาเวบไม่ควรเขียน Descendent Selector แบบย่อ เพราะอาจส่งผลให้คำสั่งของ Descendent
Selector ไม่สามารถควบคุมการแสดงผลสไตล์ที่มีการ
Override
Class ได้อย่างมีประสิทธิภาพ
6. Pseudo-Class และ Pseudo-Element
1)
สไตล์สำหรับจัดรูปแบบลิงค์ มี 4 สถานะดังนี้
1.1) a:link เป็นการกำหนดสไตล์ให้กับลิงค์ที่ยังไม่ถูกคลิก
1.2) a:visited เป็นการกำหนดสไตล์ให้กับลิงค์ที่ถูกคลิกแล้ว
โดยบราวเซอร์จะเก็บประวัติการคลิกไว้
1.3)
a:hover เป็นการเปลี่ยนแปลงสไตล์ของลิงค์เมื่อเลื่อนเมาส์ไปอยู่เหนือลิงค์จะมี
Rollover
Effect แสดงขึ้นมาทันที
1.4) a:active เป็นการกำหนดสไตล์ลิงค์ที่กำลังคลิก
รวมถึงกรณีผู้ชมคลิกปุ่มเมาส์ก่อนแสดงผลเชื่อมโยงดังกล่าว
2) สไตล์สำหรับจัดรูปแบบพารากราฟ มี 2 ลักษณะ คือ
2.1) :first-letter ใช้สร้าง
Drop
Cap ให้กับตัวอักษรตัวแรกของข้อความ เป็นการสร้างความโดดเด่นในพารากราฟ
โดยตัวอักษรจะมีขนาดใหญ่กว่าปกติหรือเป็นตัวหนา
2.2) :first-line ใช้กำหนดสไตล์ให้กับข้อความบรรทัดแรกของพารากราฟให้มีสไตล์แตกต่างจากส่วนอื่นๆ
และจะแสดงผลเมื่อเลื่อนเมาส์ไปวางบนข้อความ ซึ่งช่วยให้มีสีสันน่าอ่านมากขึ้น
3)
Pseudo-Class และ Pseudo-Element
เพิ่มเติม เพื่อช่วยเพิ่มประสิทธิภาพการทำงานของ Selector
เพื่อสนับสนุนบราวเซอร์รุ่นใหม่ ดังนี้
:before ช่วยเพิ่มองค์ประกอบต่างๆ ให้ Element
เช่น แทตก "Hot Tip" ไว้หน้าพารากราฟ
ตย.
=> p.tip:before{content:"Hot Tip";}
เรียกใช้ =>
Class ".tip" (<p class="tip">)
ผลที่ได้ =>
Hot Tip การใช้งาน Pseudo-Element
"before"
:after มีลักษณะคล้าย :before แต่ :after จะใช้เพิ่มข้อความในสาวนท้ายข้อความในพารากราฟ
:first-child จะจัดรูปแบบให้กับแท็ก child ตัวแรกแสดงผลต่างจากแท็ก child ตัวอื่นๆ
ตย.
=> li:first-child {font-weight:bold;}
อย่างไรก็ดี
ความสัมพันธ์ใน HTML ระหว่าง Parent กับ Child
สามารถเปลี่ยนแปลงได้เมื่อมีการแก้ไข
ดังนั้นจึงยากที่จะคาดเดา :first-child Selector ได้
:focus เป็นความสามารถหนึ่งของ Selector ที่ใช้โต้ตอบกับผู้ชมเวบ เช่น มีการเปลี่ยนสีให้กับ Background
ของ TextBox เมื่อมีการพิมพ์ข้อความลงในTextBox เป็นต้น และมีความสามารถในการทำงานเช่นเดียวกับ :hover
แต่ :focus จะใช้งานเมื่อผู้ชมเวบดำเนินงานกับ Element
ที่ต้องการบนเวบ
ในอนาคต IE6, 9E7 จะไม่สนับสนุนการทำงาน :focus Selector แต่จะใช้ความสามารถของ Visual Interest หรือ Highlight ให้กับฟิลด์ต่างๆ บนฟอร์มแทน
7. Advanced
Selector
ใช้ Selector ของ CSS2 เป็นพื้นฐานในการทำงาน ที่ใช้ควบคุมสไตล์บนเวบ แบ่งออกได้ 3 กลุ่มดังนี้
1)
Child Selector ใช้กับสไตล์ Selector
ที่มีความสัมพันธ์ในลักษณะโครงสร้างแบบต้นไม้ ตั้งแต่ 2 ลำดับชั้นขึ้นไป แต่ละ Selector จะกำหนดสไตล์ด้วยวิธี ID, Class หรือ Tag ก็ได้ โดย Selector นี้จะระบุ Child ของ Parent โดนใช้สัญลักษณ์ Angle Bracket (>) คั่นระหว่าง Parent กับ Child เช่น body > h1 หมายความว่า <h1> เป็น Child ของ <body>
2)
Adjacent Sibling Selector ใช้กำหนดสไตล์รวม
Selector
2 ประเภทเข้าด้วยกัน โดย Selector
ทั้ง 2 นี้มีความสัมพันธ์นะหว่าง Child กับ Parent และมช้เครื่องหมาย Plus (+) ในการรวม Selector ของ Element ที่เป็น Sibling ต่อกัน
3)
Attribute Selector ใช้อธิบายรูปภาพบนเวบ
หากใช้ Attribute
Selector บน HTML
จะสามารถเรียกใช้ แอททริบิวต์ "title"
ของ <img> เพื่อระบุคำอธิบายรูปภาพได้โดยตรง แอททริบิวต์ "title"
เป็นเทคนิคที่ใช้เพิ่ม "tooltip" หรือ "Pop-up Message เพื่อสร้างความเชื่อมโยงให้กับรูปภาพบนเวบกับระบบการค้นหาของ
Search
Engine โดย Attribute
Selector สามารถเปลี่ยนจากการกำหนด
Property
มาใช้แอททริบิวต์ "title" ของแท็กได้ดังนี้ img[title] หมายถึง img เป็นการอ้างอิงชื่อแท็ก title เป็นชื่อแอททริบิวต์ ซึ่งจะอยู่ในเครื่องหมาย Bracket
[ ]
นอกจากนี้
เรายังสามารถใช้ Attribute Selector ใน HTML ได้อย่างไม่จำกัด และยังสามารถเขียนร่วมกับ Class Selector ได้อีกด้วย เช่น .photo[title] คือทุกๆ Element เรียกใช้สไตล์ของ Class ".photo" และแอททริบิวต์ "title" ของ HTML
นอกจากนี้
ยังสามารถกำหนดสไตล์พร้อมกับแอททริบิวต์ให้กับ Element ได้โดยตรงอีกด้วย เช่นการกำหนดสีสไตล์ของตัวอักษร
และแอททริบิวต์ "href" ให้กับ Selector "a" (หรือแท็ก <a>) พร้อมกำหนดค่า URL ให้กับแอททริบิวต์ ดังนี้ a[href="http://www.ktpbook.com"]{color:red;
font-weight:bold;}
นอกจากนี้ ยังสามารถใช้ Elememt
ต่างๆ บนฟอร์มได้แก่ Check Box, Text Box และ Submit Button ซึ่ง Element เหล่านี้เกิดจากการกำหนดประเภทของ Element
ให้กับแท็ก <input> ใน HTML ซึ่งจะแสดงผลและการทำงานที่แตกต่างกัน เช่น
Text Box => <input type="text"> จะเป็น Input[type="text"]
ใช้เป็นคำขึ้นต้นหรือ begin
with จะใช้เครื่องหมาย ^ กำหนดคำขึ้นต้นให้กับข้อความ เช่น
กำหนดคำขึ้นของลิงค์ =>
"http://" จะเป็น a[href^="http://"]
หรือถ้าต้องการให้ครอบคลุมการทำงานของ
Secure
Connection บนมาตรฐาน SSL
ให้เขียนในรูปแบบ Group Selector คือ a[href^="http://"],
a[href^="https://"]
ใช้เป็นคำลงท้าย หรือ end
with จะใช้เครื่องหมาย $ กำหนดคำลงท้ายข้อความ เช่น ต้องการกำหนดนามสกุลของไฟล์เป็น .pdf
ให้กับแท็ก <a href
="download_instruction.pdf"> จะเป็น a[href$=".pdf"] หรือกำหนดเต็มรูปแบบได้ดังนี้
a[href$=".pdf"] {
background-img:
url(doc_icon.png) no-repeat;
padding-left:15px;
};
ค้นหาคำที่อยู่ในข้อความ
หรือ Contain
เช่นต้องการหาคำว่า "headshot" ของไฟล์รูปภาพ จะเป็น img[src*="headshot"]
วิธีนี้จะช่วยให้ค้นหาคำได้ง่าย
8. Style
Inheritance
1) Inheritance เป็นขบวนการสืบทอด Property
ที่ใช้กำหนดสไตล์จาก Element หนึ่งไปยังอีก Element ใดๆที่มีความสัมพันธ์กันตามลำดับชั้น หลักการคือ
สืบทอดเพื่อกำจัดความซ้ำซ้อนของสไตล์ และมี Property 2 ประเภทที่สามารถสืบทอดได้ทันคือ Property
ของ Text และ Font ข้อดีของการสืบทอดสไตล์คือ
1.1) ลดความซ้ำซ้อนของสไตล์
และพื้นที่การจัดเก็บ
1.2) พจที่มีโครงสร้างกัน (Ambiguous)
สามารถสืบทอดสไตล์ได้
โดยสไตล์ที่สืบทอดจะมาคอบควบคุมการแสดงผลให้กับเพจที่ซ้ำซ้อนได้
1.3) ประหยัดเวลาในการสร้างสไตล์
ตย.
"StyleInheritance.css"
#stuff {
padding: 20px;
border: 1px solid #03F;
}
#stuff h1 {
color:#C00;
}
"StyleInheritance.html"
<div
id="stuff">
<h1>การสืบทอดสไตล์ของ CSS</h1>
</div>
2) การปรับปรุงสไตล์ชีทให้มีประสิทธิภาพด้วย
Inheritance
เช่น ต้องการให้ข้อความมีรูปแบบตัวอักษรเดียวกันทั้งเพจ
ให้ใช้ Tag
Selector เพื่อกำหนดรูปแบบตัวอักษรให้กับ
<body>
หรือสร้าง Class Selector และนำไปใช้งานกับ <body> โดยกำหนดสไตล์ ดังนี้ {font-family: Arial,
Helvetica, sans-serif; }
ตย.
"DivInheritance.css"
#stylediv {
padding: 20px;
background-color:
#FCF;
border: dashed #C06;
color: #03C;
}
"DivInheritance.html"
<div
id="stylediv">
<h1>กำหนดสไตล์ให้กับส่วนของ Footer บนเวบเพจ</h1>
<p>เสนอความคิดเห็นได้ที่ e-mail : moncyit@gmail.com
1423 ถ.พระราม 4 คลองเตย กรุงเทพฯ 10110 mobile : 089-3013717
</p>
3) ข้อจำกัดของ Inheritance
มีดังนี้
- ไม่สามารถสืบทอดสไตล์ที่ใช้กำหนดตำแหน่งของ
Element
บนเวบได้ เช่น Margin, Background, Color และ Border ของ Element
- เวบบราวเซอร์สามารถสืบทอดสไตล์ที่ใช้แสดงผลได้จำกัด
โดยสไตล์ที่สืบทอดได้ เช่น หัวข้อเรื่อง มีรูปแบบตัวอักษรที่ใหญ่ หนา และ
ลิงค์สีน้ำเงิน เป็นต้น
- เกิดความขัดแย้งระหว่างสไตล์ที่กำหนด
Property
ของ CSS ให้กับ Element ที่สืบทอดกันมา
ไม่มีความคิดเห็น:
แสดงความคิดเห็น