วันนี้มาเรียนรู้การใช้ Multiple Style กันค่ะ ... แบบว่าช่วงนี้จะขยันอ่านหนังสือมากกว่าแกะโค้ด PHP อ่ะนะ ...
การใช้งาน Multiple
Style
สไตล์เป็นกลุ่มคำสั่งของ
CSS ที่ใช้กำหนด Property
ให้กับสไตล์ของ Element มีเวบบราวเซอร์เป็นตัวกำหนดการแสดงผล การกำหนด Multiple Style ให้กับ Element
เดียวกัน อาจทำให้เกิดความขัดแย้งระหว่างสไตล์ คือ
การสืบทอด Property
เดียวกันจาก Multiple Ancestor ซึ่งการใช้สไตล์มี 4
วิธี
1. การรวบรวม Inheritance Style
การสืบทอดสไตล์ช่วย Element
ที่มีความสัมพันธ์กันมีสไตล์เหมือนกันได้
และยังสามารถนำสไตล์คล้ายกันรวมเข้าก้วยกันได้โดยรวบรวม Inheritance Style สำรองไว้ เพื่อใช้กำหนดสไตล์ให้กับ Element ให้เหลือเพียงหนึ่ง Element
ที่สามารถสืบทอด Property จาก Ancestor
อื่นๆ ได้ เช่น กำหนด "font-family" ให้กับ <body>,
"font-size" ให้กับ <p>,
"font-color" ให้กับ <a> จะแสดงผลภายในพารากราฟที่มีการสืบทอดสไตล์ของตัวอักษรจาก <body> ขนาดตัวอักษรจาก <p>
นอกจากนี้ยังสามารถสืบทอดสไตล์แบบผามผสานหรือ Hybrid Style เช่น กำหนด 3
สไตล์ โดยสไตล์ที่ 1 กำหนดให้ <body> สไตล์ที่ 2
กำหนดให้ <p> และสไตล์ที่ 3 กำหนดให้ <strong>
เขียนคำสั่งเพื่อกำหนดสไตล์ได้ดังนี้
body {
font-family: Verdana, Arial, Helvetica,
sans-serif;
}
p {
color: #F30;
}
strong {
font-size: 24px;
}
2. การสืบทอดสไตล์ที่ใกล้ที่สุด
คือ ถ้าสไตล์ที่สืบทอดกันมามีความขัดแย้งกับสไตล์ที่กำหนดให้กับแท็กโดยตรง
แท็กดังกล่าวสามารถสืบทอดสไตล์จาก Ancestor ที่อยู่ใกล้ที่สุดแทนได้ เช่น กำหนดสีข้อความให้กับ <table> ส่งผลให้กับ <td>
ภายใน <table> นอกจากนี้ยังสืบทอดไปยังแท็กที่อยู่ภายใน
<td>ได้อีกด้วย
3. การประยุกต์ใช้สไตล์ที่ได้รับโดยตรง
วิธีนี้เป็น Logical
Conclusion คือพิจารณาสไตล์ที่ได้รับโดยตรงตามโครงสร้าง CSS Family Tree เช่น กำหนดสีให้ตัวอักษรให้กับ <body>, <p> และ <strong>
โดย <p> มีการกำหนดสไตล์มากกว่า <body> ทำให้ <strong>
ที่อยู่ใน <p> มีสไตล์มากกว่า <body>
ซึ่ง <storng> จะ Overridding Property
จากทั้ง <p> และ <body> ทำให้สไตล์ที่สืบทอดมาขัดแย้งกัน และส่งผลให้ Property ที่นำมาใช้ไม่สามารถสืบทอดไปยังแท็กอื่นๆ ได้
4. การกำหนดหลายสไตล์ในแท็กเดียว
แม้การสืบทอดสไตล์เป็นวิธีหนึ่งที่แท็กสามารถแสดงผลสไตล์แบบ Multiple Style ได้ แต่ความเป็นจริงแล้วการนำ Multiple Style มาใช้กับแท็กโดยตรงเป็นไปได้ยาก เพราะการนำ Multiple Style มาใช้งานกับ Element
ต่างๆ บนเวบเพจขึ้นอยู่กับประเภทและลำดับของสไตล์
โดยเวบบราวเซอร์สามารถแสดงผลสไตล์มากกว่าหนึ่งที่มีการนำมาใช้งานกับแท็กเดียวกัน
ดังนี้
-
กำหนด Tag และ Class Selector ให้กับแท็ก เช่น กำหนดสไตล์ด้วย Tag Selector ให้กับ <h2>
และกำหนด Class Selector ชื่อ ".leadHeadline"
และให้ <h2> ในHTML เรียกใช้สไตล์ที่กำหนด คือ <h2 class="leadHeadline"> ผลคือ <h2>
สามารถแสดงผลตามสไตล์ของ Tag และ Class
Selector ได้
- กำหนด Group
Selector เพื่อกำหนดสไตล์ที่มีชื่อเดียวกันให้สามารถนำไปใช้งานบนเวบที่เรียกใช้สไตล์ชีตมากกว่าหนึ่งได้
เช่น กำหนดสไตล์ชื่อ ".leadHeadline",
".secondaryHeadline", ".newsHeadline" และสร้าง Class
Selector ชื่อ ".leadHeadline" ในสไตล์ชีตเดียวกัน โดย Selector ทั้ง 2 สไตล์จะมีหลักเกณฑ์ที่ใช้กำหนดกับ Element กับ Class
Selector ชื่อ ".leadHeadline"
- กำหนด Class
Selector กับ ID Selectorให้กับแท็ก เช่น
กำหนด ID Selector ชื่อ "#banner"
และกำหนด Class Seletor ชื่อ "#news" ให้ <div>
ในเอกสาร HTML เรียกใช้สไตล์ดังนี้ <div
id="banner" class="news"> ผลคือ Property
จากทั้ง 2 Selector จะถูกนำมาใช้กับ <div>
- รวมสไตล์ชีตมากกว่าหนึ่งไว้ในสไตล์เดียว แล้วจึงนำมาใช้งานกับเวบเพจ
โดยสไตล์ที่มีชื่อเดียวกันสามารถนำไปรวมอยู่ใน External Style Sheet ด้วยคำสั่ง @import หรือ link และ Internal Style Sheet ได้
- กำหนด Descendent
Selector เพื่อกำหนดสไตล์ที่ซับซ้อนภายในแท็กเดียวกัน เช่น <div> เรียกใช้สไตล์ "mainContent"
ดังนี้ <div id="mainContent">
การกำหนดสไตล์
CSS ได้จัดเตรียมกลุ่มค่าพื้นฐานของสไตล์ที่ช่วยให้เวบบราวเซอร์เรียงลำดับ
Property
ที่ขัดแย้งกันให้สามารถแสดงผลได้อย่างถูกต้อง โดยพิจารณาจากชื่อ
Property
ที่ใช้ระบุสไตล์ แต่ถ้าชื่อไม่ชัดเจน CSSได้กำหนดสูตร (Formula)
ที่ใช้กำหนดสไตล์พร้อมระบุค่าพื้นฐานของ Selector ต่างๆ ไว้ และเวบบราวเซอร์จะแสดงผลตามค่าพื้นฐานของสไตล์แต่ละประเภทดังนี้
|
Selector
|
ค่าพื้นฐาน (Point)
|
|
Tag Selector
|
1
|
|
Class Selector
|
10
|
|
ID Selector
|
100
|
|
Inline Style
|
1,000
|
จากตารางนี้
เวบบราวเซอร์จะเลือกแสดงผลที่มีค่าพื้นฐานมากที่สุดก่อน
Descendent Selector เป็นการนำ Selector
หลายประเภทเข้าด้วยกัน เช่น #content p. หรือ h2
strong เป็นต้น โดยเวบบราวเซอร์จะใช้วิธีเปรียบเทียบบิตของแต่ละ Selector ที่ซับซ้อนมากขึ้น โดย Descendent Selector จะรวมค่าทั้งหมดของ Selector
แต่ละประเภทดังตารางนี้
|
Selector
|
ID
|
Class
|
Tag
|
Total
|
|
P
|
0
|
0
|
1
|
1
|
|
.byline
|
0
|
1
|
0
|
10
|
|
p.byline
|
0
|
1
|
1
|
11
|
|
#banner
|
1
|
0
|
0
|
100
|
|
#banner p
|
1
|
0
|
1
|
101
|
|
#banner .byline
|
1
|
1
|
0
|
110
|
|
a:link
|
0
|
1
|
1
|
11
|
|
p:first-line
|
0
|
0
|
2
|
2
|
|
h2 strong
|
0
|
0
|
2
|
2
|
|
#wrapper #content .byline a:hover
|
2
|
2
|
1
|
221
|
จากตารางจะเห็นว่า ID Selector มีค่ามากที่สุด คือ 100
ดังนั้น Property ทั้งหมดจะถูก Override ไปให้กับแท็กโดยตรง
ไม่มีความคิดเห็น:
แสดงความคิดเห็น