อาจารย์ณัฐภทั ร แก้วรัตนภทั ร์ หนา้ ท:่ี 1 สาขาวิชาสารสนเทศศาสตร์ แขนงวิชาระบบสารสนเทศเพือ่ การจดั การ มหาวิทยาลัยราชภัฏสวนสนุ ันทา เรอ่ื ง ตัวเลือกสาหรบั การกาหนดสไตล์ SELECTOR IN CASCADING STYLE SHEET: CSS Selector คือ ตัวเลือกสาหรับการกาหนดไสตล์ โดย Selector เปน็ การ Selector น้ันมีหลากหลายแบบ โดยสามารถจาแนกเปน็ 6 ประเภท เลือก element ทีส่ อดคล้องกบั เง่ือนไข เพือ่ แสดงผลตามที่ Selector น้ันๆ ใหญ่ๆ คอื กาหนดไว้เฉพาะน่ันเอง โดย Selector มีโครงสร้างดงั นี้ 1. ตวั เลือกอเนกประสงค์ (Universal Selector) Selector { 2. ตวั เลือกชนดิ อีลิเมนท์ (Element Selector) Property: Value; 3. ตวั เลือกชนดิ ไอดี (ID Selector) 4. ตัวเลือกชนดิ คลาส (Class Selector) } 5. ตัวเลือกชนดิ แอต็ ทรบิ ิวท์ (Attribute Selector) 6. ตัวเลือกเทยี ม (Pseudo-Selector) โดยที่ Selector คือ ชื่อของตวั เลือกสาหรับการกาหนดสไตล์ Property คือ คุณสมบตั ิที่ต้องการกาหนดการแสดงผล Value คือ ค่าของคุณสมบตั ิ (Property) เครื่องหมาย { } คือ ขอบเขตของ Selector นั้นๆ เครือ่ งหมาย : คือ การกาหนดค่าของ Property เครื่องหมาย ; คือ การจบการกาหนดค่าของ Property ชดุ ของ Property: Value; เรียกว่า Declaration Nutthapat Kaewrattanapat [email protected]
อาจารย์ณัฐภทั ร แกว้ รัตนภทั ร์ หนา้ ท:่ี 2 สาขาวิชาสารสนเทศศาสตร์ แขนงวิชาระบบสารสนเทศเพือ่ การจัดการ มหาวิทยาลัยราชภฏั สวนสุนันทา 1. ตวั เลือกอเนกประสงค์ (Universal Selector) ตัวอย่างที่ 1 *{ <!DOCTYPE html> Property: Value; <html> <head> } <style> *{ โดยที่ เครือ่ งหมาย * (Asterisk) คือ การกาหนดให้ทกุ ๆ HTML background-color: yellow; border: 1px solid black; Element แสดงผลตามที่กาหนดไว้ใน { } } </style> การใชต้ วั เลือกอเนกประสงค์ (Universal Selector) นั้น จะทาให้ท้ังเว็บเพจ </head> มีลักษณะการแสดงผลเหมือนกันท้ังเว็บ ดงั ตัวอย่างที่ 1 <body> <h1>Information Science</h1> <div class=\"intro\"> <p>Nutthapat Kaewrattanapat</p> <p>Lecturer Member</p> </div> <p>email:[email protected]</p> </body> </html> จะเห็นได้ว่า ทุกๆ element ไม่ว่าจะเป็น <body> <h1> <div> <p> จะมี การถูกกาหนดการแสดงผลคือ พืน้ หลังสเี หลือง มเี ส้นขอบขนาด 1px เส้น ทึบ และมีสดี า Nutthapat Kaewrattanapat [email protected]
อาจารยณ์ ฐั ภทั ร แกว้ รตั นภทั ร์ หนา้ ท:่ี 3 สาขาวิชาสารสนเทศศาสตร์ แขนงวิชาระบบสารสนเทศเพือ่ การจดั การ มหาวิทยาลัยราชภัฏสวนสุนันทา การใช้ตัวเลือกอเนกประสงค์ (Universal Selector) ช่วยการกาหนดเว็บ ตวั อย่างที่ 2 เพจโดยรวมเท่านั้น ดังนั้น หากต้องการกาหนดการแสดงผลเฉพาะบาง Element ให้มีความแตกต่างไปจากการกาหนดโดยตัวเลือกอเนกประสงค์ <!DOCTYPE html> กส็ ามารถกระทาได้ ดังตวั อย่างที่ 2 <html> <head> <style> *{ background-color: yellow; border: 1px solid black; } p{ background-color: green; border: 0px; color: white; } div { border: 0px; } </style> </head> <body> <h1>Information Science</h1> <div class=\"intro\"> <p>Nutthapat Kaewrattanapat</p> <p>Lecturer Member</p> </div> <p>email:[email protected]</p> </body> </html> Nutthapat Kaewrattanapat [email protected]
อาจารยณ์ ฐั ภทั ร แกว้ รัตนภทั ร์ หนา้ ท:่ี 4 สาขาวิชาสารสนเทศศาสตร์ แขนงวิชาระบบสารสนเทศเพือ่ การจดั การ มหาวิทยาลยั ราชภฏั สวนสุนนั ทา 2. ตวั เลือกชนดิ อีลิเมนท์ (Element Selector) 2.1 ตวั เลือกชนดิ อีลิเมนท์เดีย่ ว (Element) คือ การ ElementName { Property: Value; กาหนดการแสดงผลเฉพาะบาง HTML Tag Element } Element { ตวั เลือกชนดิ อีลิเมนท์ (Element Selector) ช่วยใหส้ ามารถกาหนดการ Property: Value; แสดงผลเฉพาะบาง HTML Tag Element ได้ โดยตวั เลือกชนดิ อีลิเมนท์มี ข้อกาหนดหลายลักษณะ ดังน้ี } 2.1 element ตัวอย่างที่ 3 2.2 element,element 2.3 element element <!DOCTYPE html> 2.4 element>element <html> 2.5 element+element <head> 2.6 element1~element2 <style> p{ background-color: blue; color: white; } </style> </head> <body> <h1>Information Science</h1> <div> <p>Mr.Nutthapat Kaewrattanapat</p> <p>I am work for Suan Sunandha Rajabhat University</p> </div> <p>email: [email protected]</p> </body> </html> Nutthapat Kaewrattanapat [email protected]
อาจารย์ณัฐภทั ร แกว้ รตั นภัทร์ หนา้ ท:่ี 5 สาขาวิชาสารสนเทศศาสตร์ แขนงวิชาระบบสารสนเทศเพื่อการจดั การ มหาวิทยาลยั ราชภฏั สวนสุนันทา ตัวอยา่ งที่ 4 2.2 ตัวเลือกชนดิ หลายอีลิเมนท์ (Element,Element) คือ <!DOCTYPE html> การกาหนดการแสดงผลของ Element ที่กาหนด ใหม้ ีลักษณะเหมอื นกัน <html> โดยสามารถระบุชือ่ Element มากกว่า 1 ชื่อได้ โดยคั่นระหว่างชอ่ื <head> Element ด้วยเครื่องหมาย , <style> h1,p { Element1,Element2,ElementN { Property: Value; background-color: #129988; color: white; } } </style> </head> <body> <h1>Information Science</h1> <p>Mr.Nutthapat Kaewrattanapat</p> <p>I am work for Suan Sunandha Rajabhat University</p> <p>email: [email protected]</p> <div>Thank for visiting my web site. </div> </body> </html> สังเกตได้ว่าการแสดงผลพ้ืนหลงั ของ Element นั้นมีผลเฉพาะ Tag <h1> และ <p> เท่านั้น โดยไม่มีผลต่อ <div> Nutthapat Kaewrattanapat [email protected]
อาจารย์ณัฐภทั ร แก้วรตั นภทั ร์ หนา้ ท:่ี 6 สาขาวิชาสารสนเทศศาสตร์ แขนงวิชาระบบสารสนเทศเพื่อการจัดการ ตัวอย่างที่ 5 มีการกาหนด Element Name ทั้งหมด 3 Elements คือ <h1> <p> และ <h3> ซึง่ คณุ สมบัติจะส่งผลตอ่ Element ที่ระบุเท่าน้ัน โดยไม่ มหาวิทยาลยั ราชภัฏสวนสนุ นั ทา ส่งผลตอ่ <div> แตอ่ ย่างใด ตวั อยา่ งที่ 5 <!DOCTYPE html> <html> <head> <style> h1,p,h3 { background-color: #555599; color: white; } </style> </head> <body> <h1>Information Science</h1> <p>Mr.Nutthapat Kaewrattanapat</p> <p>I am work for Suan Sunandha Rajabhat University</p> <p>email: [email protected]</p> <div>Thank for visiting my web site. </div> <h3>Copyright ©</h3> </body> </html> Nutthapat Kaewrattanapat [email protected]
อาจารยณ์ ัฐภทั ร แก้วรตั นภัทร์ หนา้ ท:่ี 7 สาขาวิชาสารสนเทศศาสตร์ แขนงวิชาระบบสารสนเทศเพือ่ การจัดการ มหาวิทยาลัยราชภัฏสวนสุนนั ทา 2.3 ตัวเลือกชนดิ สืบทอดใหอ้ ีลิเมนท์ภายใน (Descendant ตัวอย่างที่ 6 Selector) คือ การกาหนดการแสดงผลของ Element ทีอ่ ยู่ภายใต้ <!DOCTYPE html> <html> Element ทีก่ าหนด <head> <style> ElementParent1 ElementParentN ElementTarget { Property: Value; ol li{ background-color: #22A9A9; } color: black; border: 1px dashed black; ตัวอย่างเช่น มีการกาหนด ol li { } จะหมายความว่า จะมีการแสดงผลที่ Element li ทีอ่ ยู่ภายใต้ ol เท่านั้น } </style> </head> <body> <ol> <li>Kanchanaburi</li> <li>Bangkok</li> <li>Phuket</li> </ol> <ul> <li>Thailand</li> <li>United Kingdom</li> <li>Japan</li> </ul> </body> </html> Nutthapat Kaewrattanapat [email protected]
อาจารย์ณฐั ภัทร แกว้ รัตนภทั ร์ หนา้ ท:่ี 8 สาขาวิชาสารสนเทศศาสตร์ แขนงวิชาระบบสารสนเทศเพื่อการจัดการ มหาวิทยาลัยราชภัฏสวนสุนันทา ตัวอยา่ งที่ 7 จากตัวอย่างที่ 7 สังเกตได้ว่าผลที่ได้จะกระทบต่อ Tag <h3> ที่เป็น Element ภายใต้ <ol> เท่าน้ัน แต่ <h3> ที่อยู่ภายใต้ <ul> จะไม่ได้รับ <!DOCTYPE html> ผลกระทบ <html> <head> <style> ol h3{ background-color: #22A9A9; color: black; border: 1px dashed black; } </style> </head> <body> <ol> <li>Kanchanaburi <h3>Click Here!</h3> </li> <li>Bangkok</li> <li>Phuket</li> </ol> <ul> <li>Thailand <h3>Click Here!</h3> </li> <li>United Kingdom</li> <li>Japan</li> </ul> </body> </html> Nutthapat Kaewrattanapat [email protected]
อาจารยณ์ ฐั ภัทร แก้วรัตนภทั ร์ หนา้ ท:่ี 9 สาขาวิชาสารสนเทศศาสตร์ แขนงวิชาระบบสารสนเทศเพือ่ การจัดการ มหาวิทยาลยั ราชภัฏสวนสนุ นั ทา ตวั อย่างที่ 8 2.4 ตัวเลือกชนดิ สืบทอดให้อีลิเมนทภ์ ายในแบบเรยี งลาดบั <!DOCTYPE html> (Sub Selector) คือ การกาหนดการแสดงผลของ Element ที่อยู่ภายใต้ <html> Element ทีก่ าหนด โดยจะต้องเรียงลาดับตามทีก่ าหนดไว้เท่านนั้ <head> <style> ElementParent > ElementTarget { li>h3 { Property: Value; background-color: #22A9A9; } color: black; border: 1px dashed black; } </style> </head> <body> <ol> <li>Kanchanaburi <h3>Click Here!</h3> </li> <li>Bangkok <h5>Click Here!</h5> </li> <li>Phuket <h5>Click Here!</h5> </li> </ol> <ul> <li>Thailand <h3>Click Here!</h3> </li> <li>United Kingdom <h5>Click Here!</h5> </li> <li>Japan <h5>Click Here!</h5> </li> </ul> </body> </html> แตห่ ากกาหนด ol>h3 { } จะไม่เกิดการแสดงผลใดๆ เน่ืองจากจะต้องมี การเรียงลาดบั ที่ระบเุ ท่าน้ัน Nutthapat Kaewrattanapat [email protected]
อาจารยณ์ ฐั ภัทร แก้วรตั นภทั ร์ หนา้ ท:่ี 10 สาขาวิชาสารสนเทศศาสตร์ แขนงวิชาระบบสารสนเทศเพือ่ การจัดการ จากตัวอย่างที่ 9 สังเกตได้ว่า <h3> ทีอ่ ยู่ตดิ กบั <li> ไม่ได้รับผลกระทบ จากการกาหนด Sequential Selector เนื่องจากมีการกาหนดลาดบั คอื มหาวิทยาลยั ราชภฏั สวนสุนันทา ol>li>div>h3 จงึ สง่ ผลต่อ <h3> ทีอ่ ยู่ภายใน <div> เทา่ น้ัน ตวั อยา่ งที่ 9 <!DOCTYPE html> <html> <head> <style> ol>li>div>h3{ background-color: #22A9A9; color: black; border: 1px dashed black; } </style> </head> <body> <ol> <li>Kanchanaburi <h3>Click Here!</h3> <div> <h3>West of Thailand </h3></div> </li> <li>Bangkok <h3>Click Here!</h3> </li> <li>Phuket <h3>Click Here!</h3> </li> </ol> </body> </html> Nutthapat Kaewrattanapat [email protected]
อาจารยณ์ ฐั ภัทร แกว้ รัตนภทั ร์ หนา้ ท:่ี 11 สาขาวิชาสารสนเทศศาสตร์ แขนงวิชาระบบสารสนเทศเพือ่ การจัดการ มหาวิทยาลัยราชภฏั สวนสุนนั ทา ตัวอยา่ งที่ 10 2.5 ตัวเลือกชนดิ สืบทอดใหอ้ ีลิเมนท์แบบเรยี งลาดบั <!DOCTYPE html> (Sequential Selector) คือ การกาหนดการแสดงผลของ Element ที่ <html> เรียงตาม Element ทีก่ าหนดไว้เท่านั้น <head> <style> ElementFirst + ElementTarget { Property: Value; ol+p+ol{ background-color: #22A9A9; } color: black; border: 1px dashed black; ตวั อย่างเช่น มีการกาหนด body>h1 { } จะหมายความว่า จะมีการ แสดงผลที่ Element h1 ทีอ่ ยู่ถดั จาก body เท่านั้น } </style> </head> <body> <p>Thailand</p> <ol> <li>Kanchanaburi</li> <li>Bangkok</li> </ol> <p>United Kingdom</p> <ol> <li>London</li> <li>Bath</li> </ol> </body> </html> Nutthapat Kaewrattanapat [email protected]
อาจารย์ณฐั ภัทร แก้วรัตนภทั ร์ หนา้ ท:่ี 12 สาขาวิชาสารสนเทศศาสตร์ แขนงวิชาระบบสารสนเทศเพือ่ การจดั การ มหาวิทยาลัยราชภฏั สวนสุนนั ทา border: 1px dashed black; } 2.6 ตัวเลือกชนดิ สืบทอดให้อีลิเมนท์ถดั ไปท้งั หมด (Preceded Selector) </style> </head> ElementPreceded ~ ElementTarget { <body> Property: Value; <p>Thailand</p> } <ol> ตัวอย่างเช่น มีการกาหนด div ~ h1 { } จะหมายความว่า จะมีการ <li>Kanchanaburi</li> แสดงผลที่ Element h1 ทุกๆ ตวั ที่อยู่ถดั จาก div เท่าน้ัน <li>Bangkok</li> </ol> <p>United Kingdom</p> <ol> <li>London</li> <li>Bath</li> </ol> </body> </html> ตวั อยา่ งที่ 11 <!DOCTYPE html> <html> <head> <style> p ~ ol{ background-color: #22A9A9; color: black; Nutthapat Kaewrattanapat [email protected]
อาจารยณ์ ัฐภัทร แก้วรัตนภทั ร์ หนา้ ท:่ี 13 สาขาวิชาสารสนเทศศาสตร์ แขนงวิชาระบบสารสนเทศเพือ่ การจัดการ มหาวิทยาลัยราชภฏั สวนสุนันทา 3. ตวั เลือกชนดิ คลาส (Class Selector) .ClassName { Property: Value; } ตัวเลือ กชนิ ดคลาส (Class Selector) เ หมาะสาหรั บ การกาหน ด ลักษณะเฉพาะใหแ้ ก่ Element โดยสามารถเรียกใช้คุณลักษณะของ Class ได้บ่อยครั้งเท่าทีต่ อ้ งการ ตวั อยา่ งที่ 12 <!DOCTYPE html> <html> <head> <style> .photoframe{ border: 3px dashed red; } </style> </head> <body> <img src=\"apple.png\" width=\"200px\" class=\"photoframe\"> </body> </html> Nutthapat Kaewrattanapat [email protected]
อาจารย์ณฐั ภัทร แก้วรัตนภทั ร์ หนา้ ท:่ี 14 สาขาวิชาสารสนเทศศาสตร์ แขนงวิชาระบบสารสนเทศเพือ่ การจดั การ มหาวิทยาลัยราชภัฏสวนสนุ ันทา Class Selector เปรียบเสมือน หน่วยของการกาหนดการแสดงผลหนึ่งๆ และ ตัวเลือกแบบ Class นั้นมีความพิเศษอยู่ที่ สามารถเลือกคลาส ได้ มากกว่า 1 คลาสเพื่อกาหนดรูปแบบได้หลากหลายลกั ษณะ ดังตวั อย่าง ตัวอยา่ งที่ 13 ดังนนั้ จะเหน็ ได้ว่า คลาสที่สร้างข้นึ นั้น นาไปใช้กบั Tag ใดๆ ก็ได้ และ อาจจะนาหลายๆ คลาสมาประกอบเข้าด้วยกนั เพื่อการแสดงผลตาม <!DOCTYPE html> ต้องการได้ <html> <head> <style> .photoframe{ border: 3px dashed red; } .fruit{ border-bottom: 5px solid cornflowerblue; } </style> </head> <body> <img src=\"apple.png\" width=\"200px\" class=\"photoframe fruit\"> </body> </html> Nutthapat Kaewrattanapat [email protected]
อาจารย์ณัฐภทั ร แก้วรัตนภัทร์ หนา้ ท:่ี 15 สาขาวิชาสารสนเทศศาสตร์ แขนงวิชาระบบสารสนเทศเพือ่ การจัดการ มหาวิทยาลัยราชภฏั สวนสุนนั ทา 4. ตวั เลือกชนดิ ไอดี (ID Selector) ตวั อยา่ งที่ 14 #ID { <!DOCTYPE html> Property: Value; <html> <head> } <style> #like{ ตัวเลือกชนดิ ไอดี (ID Selector) คือ การกาหนดชื่อ Selector เฉพาะ ส่งผล ให้ Element ที่มกี ารกาหนด Attribute ID ที่มชี ือ่ ตรงกนั กับ ID Selector background-color: #58D3F7; แสดงผลตามไสตล์ทีถ่ กู กาหนดไว้ ซึง่ การใช้ ID Selector เหมาะสาหรับ } การระบเุ พียง 1 ครั้ง ภายในเว็บเพจเท่านั้น เนือ่ งจาก ID ใน HTML เป็นการ #dislike{ ระบชุ ือ่ เฉพาะสาหรบั การเรียก Element นั้นๆ ดังน้ัน หากมีการระบุ ID ซ้า เหมอื นกับ Class Selector จะทาให้มปี ัญหาในการโปรแกรมภาษาอื่นๆ ได้ background-color: #FA5858; เชน่ Java Script หรอื MediaQuery เปน็ ต้น ตัวอย่างการใชต้ วั เลือกชนดิ ไอ } ดีแสดงในตวั อย่างที่ 14 </style> </head> <body> <p>Marine Life</p> <ol> <li id='like'>Fish</li> <li>Squid</li> </ol> <p>Poultry</p> <ol> <li id='dislike'> Bird </li> <li>Chicken</li> </ol> </body> </html> Nutthapat Kaewrattanapat [email protected]
อาจารย์ณัฐภัทร แกว้ รัตนภัทร์ หนา้ ท:่ี 16 สาขาวิชาสารสนเทศศาสตร์ แขนงวิชาระบบสารสนเทศเพือ่ การจัดการ มหาวิทยาลัยราชภัฏสวนสุนนั ทา จากภาพ จะเหน็ ได้ว่า แอปเปิล้ ลกู ทีส่ องนั้น มีกรอบสีแดง เนือ่ งจากมีการ กาหนด attribute ชือ่ วา่ height ภายใน Element img น้ัน 5. ตวั เลือกชนดิ แอต็ ทรบิ ิวท์ (Attribute Selector) [attribute] { Property: Value; } Attribute แปลว่า คณุ ลักษณะ ซึง่ ตัวเลือกชนิดแอ็ตทริบิวท์เปน็ การเลือก ปรับแอต็ ทริบิวท์ตามชือ่ ทีร่ ะบุไว้ในสไตล์ชีท ตวั อยา่ งที่ 15 <!DOCTYPE html> <html> <head> <style> [height]{ border: 2px solid red; } </style> </head> <body> <img src=\"apple.png\" width=\"200px\"> <img src=\"apple.png\" width=\"200px\" height=\"100px\"> </body> </html> Nutthapat Kaewrattanapat [email protected]
อาจารย์ณัฐภทั ร แก้วรัตนภัทร์ หนา้ ท:่ี 17 สาขาวิชาสารสนเทศศาสตร์ แขนงวิชาระบบสารสนเทศเพื่อการจดั การ ตัวอยา่ งที่ 17 การเลือก attribute ชือ่ alt ทม่ี ีคาว่า green มหาวิทยาลยั ราชภัฏสวนสนุ ันทา <!DOCTYPE html> <html> ตวั อยา่ งที่ 16 การเลือก attribute ชอื่ width ทข่ี นาด 100px <head> <style> <!DOCTYPE html> <html> [alt~=\"green\"]{ <head> border: 2px solid red; <style> } [width=\"100px\"]{ </style> border: 2px solid red; </head> <body> } </style> <img src=\"apple.png\" alt=\"red apple\" </head> width=\"200px\"> <body> <img src=\"applegreen.png\" alt=\"green <img src=\"apple.png\" width=\"200px\"> apple\" width=\"200px\"> <img src=\"apple.png\" width=\"100px\"> </body> </body> </html> </html> Nutthapat Kaewrattanapat [email protected]
อาจารยณ์ ฐั ภทั ร แก้วรตั นภัทร์ หนา้ ท:่ี 18 สาขาวิชาสารสนเทศศาสตร์ แขนงวิชาระบบสารสนเทศเพือ่ การจดั การ มหาวิทยาลัยราชภฏั สวนสนุ นั ทา 6. ตัวเลือกเทยี ม (Pseudo-Selector) /* เมอ่ื นาเมาสว์ างบนลงิ คใ์ หแ้ สดงสชี มพู */ a:hover { selector:pseudo-class { property:value; color: hotpink; } } /* เมอ่ื คลกิ ลงิ คน์ นั้ และยงั ไมเ่ ปลย่ี นไปหน้าอ่นื ใหแ้ สดงสนี ้าเงนิ */ Pseudo-Selector อ่านว่า “ซูโด-ซีเล็กเตอร์” แปลว่า ตัวเลือกเทียม โดย a:active { ตัวเลือกเทียมนน้ั เปน็ การเสริมการทางานใหแ้ ก่สไตล์ชีท กล่าวคือ ตวั เลือกจะทางานก็ต่อเมอ่ื เกิดการตรวจจับเหตกุ ารณ์ หรอื เงอ่ื นไข ที่ color: blue; ระบุไว้ได้ เช่น จะทางานเมอ่ื นาเมาสไ์ ปวางไว้เหนอื ลิงค์ หรือ ทางานเมื่อ </style> ตรวจจับได้วา่ เป็น element แรก เปน็ ต้น </head> <body> ตัวอยา่ งที่ 18 <h1><a href=\"http://www.ssru.ac.th/\">Suan <!DOCTYPE html> Sunandha</a></h1> <html> </body> <head> </html> <style> ลิงค์ทีเ่ คยเขา้ เยี่ยมชมแลว้ (visited) จะเป็นสเี ขยี ว /* link ทย่ี งั ไมเ่ คยเขา้ ชมใหแ้ สดงสแี ดง */ a:link { ลงิ ค์ถูกเมาส์ไปวางไว้เหนอื ตวั ลงิ ค์ (hover) จะเป็นสชี มพู color: red; } /* link ทเ่ี คยเยย่ี มชมแลว้ ใหแ้ สดงสเี ขยี ว */ a:visited { color: green; } Nutthapat Kaewrattanapat [email protected]
อาจารย์ณัฐภัทร แกว้ รตั นภทั ร์ หนา้ ท:่ี 19 สาขาวิชาสารสนเทศศาสตร์ แขนงวิชาระบบสารสนเทศเพือ่ การจดั การ มหาวิทยาลยั ราชภัฏสวนสนุ ันทา จากคาสั่งในส่วนของ Style Sheet จะเหน็ ไดว้ ่า มกี ารกาหนดตัวเลอื ก p ใหย้ ังไมแ่ สดงผลใดๆ (display:none;) และมกี ารกาหนดสพี ืน้ สีเหลือง และ ตัวอย่างที่ 19 มรี ะยะขอบ 20 px จากน้ัน มกี ารกาหนด ตวั เลือกเทียมชนดิ hover ที่ div แตจ่ ะส่งผลไปที่ p <!DOCTYPE html> ใหม้ ีการแสดงผลขึ้นมา (display:block;) <html> เม่อื ยงั ไมน่ าเมาสไ์ ปวางเหนือ div ทีบ่ รรจุข้อความ <head> <style> เม่อื นาเมาสไ์ ปวางเหนอื div ทีบ่ รรจขุ ้อความ p{ display: none; background-color: yellow; padding: 20px; } div:hover p { display: block; } </style> </head> <body> <div> <h1>Mouse over show Mickey Mouse</h1> <p><img src='mickeymouse.png'></p> </div> </body> </html> Nutthapat Kaewrattanapat [email protected]
Search
Read the Text Version
- 1 - 19
Pages:
