วันพุธที่ 29 กุมภาพันธ์ พ.ศ. 2555

CSS - การใช้ Multiple Style #1


วันนี้มาเรียนรู้การใช้ 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 ไปให้กับแท็กโดยตรง

เขียนโดย ที่ ไม่มีความคิดเห็น:

วันพุธที่ 22 กุมภาพันธ์ พ.ศ. 2555

CSS - Selector #2


ส่วนนี้เป็นเนื้อหาต่อจาก 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 ที่สืบทอดกันมา
เขียนโดย ที่ ไม่มีความคิดเห็น:
สมัครสมาชิก: บทความ (Atom)