Important Announcement
PubHTML5 Scheduled Server Maintenance on (GMT) Sunday, June 26th, 2:00 am - 8:00 am.
PubHTML5 site will be inoperative during the times indicated!
EN
Home Explore เอกสารประกอบการสอน รายวิชาหลักการออกแบบเว็บ

เอกสารประกอบการสอน รายวิชาหลักการออกแบบเว็บ

Published by Nutthapat Keawrattanapat, 2019-03-05 21:01:19

Description: เอกสารประกอบการสอน รายวิชาหลักการออกแบบเว็บ (Principle of Web Design)

Keywords: หลักการออกแบบเว็บม,web design,HTML,CSS

Search

Read the Text Version

196 การแทรกสไตล์ชีทในเอกสารเอชทเี อม็ แอลจะต้องกากับอยู่ภายใต้อีลิเมนท์ <style type=\"text/css\"> </style> และสไตล์ชีทจะถูกกากับด้วยอีลิเมนท์ <head> </head> ดัง ตัวอย่าง ตัวอย่างการแทรกสไตล์ชีทในเอกสารเอชทเี อม็ แอลโดยกาหนดอีลิเมนทซ์ ีเลก็ เตอร์ ย่อหน้า (p) ให้มีคุณลักษณะ ตัวอักษร (color) เป็นสขี าว (white) การจัดตาแหน่งอกั ษร (text-align) อยู่ตรงกลาง (center) และ พ้ืนหลังของย่อหน้า (background-color) เป็นสี นา้ เงินอมม่วง (blueviolet) <html> <head> <meta charset=\"UTF-8\"> <style type=\"text/css\"> p{ color: white; text-align: center; background-color: blueviolet; } </style> </head> <body> <p>STYLE SHEET</p> </body> </html> นอกจากโครงสร้างหลักของสไตล์ชีทแล้ว ควรทราบเก่ียวกับการเพ่ิมข้อคิดเห็น (Comment) ภายในสไตลช์ ที และ การรวมซีเลก็ เตอร์ท่มี ีการกาหนดคุณลักษณะเดียวกนั ไว้ ด้วยกนั (Grouping selector) ดังน้ี 1. การเพ่ิมข้อคิดเหน็ ภายในสไตล์ชีท (Comment) เป็นการเพ่ิมข้อความไว้เตือน ความจาหรือแจ้งให้แก่ผู้ออกแบบเวบ็ ท่านอ่ืนทราบว่าจุดน้ีมีวัตถุประสงค์อย่างไร หรือ ใช้ กากับสไตล์ไปในแนวทางใด เป็ นต้น โดยการใส่ข้อคิดเห็นจะอยู่ระหว่างเคร่ืองหมาย /* และ */ ซ่งึ เวบ็ เบราเซอร์จะเว้นทาการแปลผลข้อความทอ่ี ยู่ภายใต้เคร่ืองหมายดังกล่าว

197 รูปแบบการแทรกข้อคดิ เหน็ ภายในสไตลช์ ีท p{ color: red; /* เพ่ิมข้อคดิ เหน็ */ text-align: center; } 2. ซีเลก็ เตอร์กลุ่ม (Grouping selector) เป็นการรวมซีเลก็ เตอร์ท่มี ีการกาหนด คุณลักษณะเดียวกันไว้ด้วยกันเพ่ือลดความซ้าซ้อนของจานวนคาส่ังลงและสามารถแก้ไข คาส่ังได้ จากท่ีเดียวทาให้ เกิดความถูกต้ องและมีประสิทธิภาพในการปรับปรุงสไตล์ใน อนาคต รปู แบบซีเลก็ เตอร์ปกติ และ ซเี ลก็ เตอร์กล่มุ รูปแบบซีเล็กเตอรป์ กติ รูปแบบซีเล็กเตอรก์ ลุ่ม h1 { h1, h2, p { text-align: center; text-align: center; color: red; color: red; } } h2 { text-align: center; color: red; } p{ text-align: center; color: red; } การแทรกสไตลช์ ีท การแทรกสไตลช์ ีท มี 4 ลกั ษณะ คอื การแทรกในอลี เิ มนท์ การแทรกในส่วนหัวของ เอกสารเอชทเี อม็ แอล การแทรกจากภายนอกเอกสารเอชทเี อม็ แอล และการแทรกจาก ภายนอกเอกสารโดยใช้ @import 1. การแทรกสไตลใ์ นอลี เิ มนท์ (Inline style) คือ การกาหนดสไตล์ท่อี ลี เิ มนทใ์ ดอลี ิ เมนทห์ น่ึงโดยตรง ซ่งึ สไตลจ์ ะส่งผลต่ออลี เิ มนทท์ ่กี าหนดเทา่ น้ัน โดยการแทรกสไตล์ในอลี ิ

198 เมนทจ์ ะกาหนดทแ่ี อต็ ทรบิ วิ ทส์ ไตล์ (style) และระบคุ ่าลักษณะของสไตล์ (value) ดัง รปู แบบตัวอย่างต่อไปน้ี รูปแบบการแทรกสไตลใ์ นอลี เิ มนทย์ ่อหน้า <p>..</p> <p style=“color:white;background-color:black”></p> รปู แบบการแทรกสไตลใ์ นอลี เิ มนทส์ ว่ นย่อย <div>..</div> <div style=“border:2px dashed green”></p> ตวั อย่างการแทรกสไตลใ์ นอลี ิเมนท์ (Inline style) <html> <head> <meta charset=\"UTF-8\"> </head> <body> <div style=\"border:5px solid blue; background-color:yellow;\"> <span style=\"color:red;\"> INLINE STYLE </span> </div> </body> </html> 2. การแทรกสไตล์ชีทภายในเอกสารเอชทเี อม็ แอล (Internal style sheet) เป็นการ แทรกสไตล์ชีทภายในส่วนหัวของเอกสารเอชทเี อม็ แอล แต่จะทาการแยกสไตล์ชีทออกมา จัดเรียงไว้ในอลี ิเมนท์ <style>…</style> ในส่วนของ <head>…</head> เพ่ือความสะดวกใน การกาหนดสไตล์ให้แก่อลี ิเมนทใ์ นเวบ็ เพจ ซ่ึงวิธีการแทรกน้ีจะทาให้สไตล์ชีทมีผลต่อหน้า เวบ็ เพจท่ถี ูกแทรกเทา่ น้ัน

199 รูปแบบของการแทรกในส่วนหัวของเอกสารเอชทเี อม็ แอล (Internal style sheet) <head> <style type=\"text/css\"> p{ color: black; text-align: center; } h1{ color: red; text-align: center; } </style> </head> 3. การแทรกสไตล์ชีทจากภายนอกเอกสารเอชทเี อม็ แอล (External style sheet) เป็นการแทรกสไตล์ชที จากภายนอกเอกสารเอชทเี อม็ แอล โดยวิธกี ารน้ีจะมีความยืดหยุ่นสงู และเว็บเพจใดท่ีทาการเช่ือมโยงกับสไตล์ชีท จะถูกปรับเปล่ียนลักษณะการแสดงผล เหมือนกันท้ังหมด วิธีการน้ีจึงเหมาะสาหรับเว็บไซต์ท่ีมีหน้าเว็บเพจจานวนมาก และ ต้องการคุมธมี (Theme) ของเวบ็ ไซต์ให้มีลกั ษณะเดียวกนั ทง้ั หมด การแทรกจากภายนอกจะต้องทาการสร้างเอกสารสไตล์ชีทข้นึ มาก่อน และทาการ บันทกึ ด้วยนามสกุล .CSS จากน้ันในหน้าเวบ็ เพจจะต้องทาการอ้างถึงเอกสารสไตล์ชีทท่ี ต้องการแทรกเข้ามาด้วยอลี เิ มนท์ <link> รูปแบบการอ้างถงึ เอกสารสไตลช์ ีท <head> <link rel=\"stylesheet\" type=\"text/css\" href=\"mystyle.css\"> </head> โดยท่ี 1) แอต็ ทริบิวท์ rel หรือ Relation คือ แอต็ ทริบิวท์ท่แี จ้งว่าไฟล์ท่อี ้างถึงมี ความสมั พันธก์ บั สไตล์ชีท (Style sheet) 2) แอต็ ทริบิวท์ type คือ แอต็ ทริบิวท่แี จ้งว่าไฟล์ท่อี ้างถึงมีลักษณะเป็นอักษร (text) และเป็นประเภทสไตล์ชที (CSS)

200 3) แอต็ ทริบิวท์ href หรือ Hypertext reference คือ แอต็ ทริบิวทท์ ่ชี ้ีไปยังไฟล์ เอกสารสไตลช์ ีทท่ตี ้องการแทรก ตวั อย่างการแทรกจากภายนอกเอกสารเอชทเี อม็ แอล (External style sheet) mainstyle.css index.html h1 { <html> color: red; border:1px solid red; <head> } <meta charset=\"UTF-8\"> p{ <link rel=\"stylesheet\" color: black; background-color: type=\"text/css\" gainsboro; href=\"mainstyle.css\"> } </head> <body> <h1>รายช่ือไอศกรมี </h1> <p>วานิลลา</p> <p>สตรอเบอร่ี</p> <p>ช็อคโกแล็ต</p> <p>ชาเขียว</p> </body> </html>

201 4. การแทรกจากภายนอกเอกสารโดยใช้ @import เป็นการแทรกสไตล์ชีทจาก ภายนอก โดยมีความคล้ายคลึงกับลักษณะท่ี 3 ท่ไี ด้กล่าวมา แต่มีลักษณะการเขียนคาส่งั ท่ี แตกต่างกนั รปู แบบการแทรกจากภายนอกเอกสารโดยใช้ @import <head> <style type=\"text/css\"> @import url(myStyleSheet.css); </style> </head> ตัวอย่างการแทรกจากภายนอกเอกสารเอชทเี อม็ แอล (External style sheet) mainstyle.css index.html h1 { <html> color: red; border:1px solid red; <head> } <meta charset=\"UTF-8\"> p{ <style type=\"text/css\"> color: black; background-color: @import url(mainstyle.css); gainsboro; </style> } </head> <body> <h1>รายช่ือไอศกรมี </h1> <p>วานลิ ลา</p> <p>สตรอเบอร่ี</p> <p>ช็อคโกแล็ต</p> <p>ชาเขียว</p> </body> </html>

202 นอกจากจะทราบวิธีการแทรกสไตล์ชีทแล้ว ควรทราบถึงลาดับการถ่ายทอดสไตล์ (Cascading order) ด้วย โดยลาดบั การถ่ายทอดสไตล์ คือ การเลอื กแสดงลักษณะของสไตล์ กรณีท่เี กดิ การแทรกสไตล์ชีทมากกว่า 1 ประเภท (Multiple style sheets) โดยเวบ็ เบรา เซอร์จะเลือกแสดงลักษณะของสไตล์ชีทลาดับสุดท้าย หรือกล่าวอีกนัยหน่ึงคือเลือกแสดง ลักษณะของสไตล์ชที ทอ่ี ยู่ใกล้กบั อลี เิ มนทเ์ ป้ าหมายท่สี ดุ ซ่ึงสามารถสรุปลาดับการถ่ายทอด สไตล์ได้ ดังน้ ี ลาดับท่ี 1 สไตลใ์ นอลี เิ มนท์ (Inline style) ลาดบั ท่ี 2 สไตล์ชีทภายในเอกสารเอชทเี อม็ แอล (Internal style sheet) หรือ สไตล์ ชที จากภายนอกเอกสารเอชทเี อม็ แอล (External style sheet) โดยสไตล์ชีทใดมีตาแหน่งอยู่ ท้ายสดุ หรือใกล้กบั อลี เิ มนทเ์ ป้ าหมายกจ็ ะมลี ักษณะตามสไตลช์ ีทน้ันๆ เสมอ ลาดับท่ี 3 ตามค่าโดยปริยายของเวบ็ เบราเซอร์ ตัวอย่างลาดบั การถ่ายทอดสไตล์กรณมี กี ารแทรกสไตล์มากกว่า 1 ประเภท <html> <head> <meta charset=\"UTF-8\"> <style type=\"text/css\"> p{ color:blue; } </style> </head> <body> <p style=\"color:red\"> Multiple style sheets

203 </p> </body> </html> จากตวั อย่างในเอกสารเอชทเี อม็ แอลสงั เกตุได้ว่ามีการแทรกสไตลช์ ที 2 ประเภท คอื สไตล์ชีทภายในเอกสารเอชทเี อม็ แอล (Internal style sheet) และสไตล์ในอีลิเมนท์ (Inline style) โดยเวบ็ เบราเซอร์จะทาการเลือกสไตล์ท่ใี กล้กบั อีลิเมนทเ์ ป้ าหมายมากท่สี ดุ จึงแสดง ข้อความทม่ี ีลกั ษณะสแี ดงบนเวบ็ เบราเซอร์ ซีเล็กเตอร์ ซเี ลก็ เตอร์ (Selector) คือ ตัวเลอื กสาหรับการกาหนดไสตล์ โดยซีเลก็ เตอร์เป็นการ เลือกอีลิเมนทท์ ่สี อดคล้องกับกฎ (Rule) หรือเง่ือนไข (Condition) เพ่ือแสดงผลตาม ขอบเขตของลักษณะท่ซี ีเลก็ เตอร์น้ันๆ กาหนดไว้เฉพาะน่ันเอง โดย Selector มีโครงสร้าง ดงั น้ี Selector { Property: Value; } โดยท่ี Selector คือ ช่อื ของตัวเลือกสาหรับการกาหนดสไตล์ Property คอื คุณสมบัติทต่ี ้องการกาหนดการแสดงผล Value คอื ค่าของคุณสมบตั ิ (Property) เคร่ืองหมาย { } คอื ขอบเขตของ Selector น้ันๆ เคร่ืองหมาย : คอื การกาหนดค่าของ Property เคร่ืองหมาย ; คือ การจบการกาหนดค่าของ Property ชุดของ Property: Value; เรียกว่า Declaration ซเี ลก็ เตอร์ น้นั มีหลายประเภท โดยสามารถจาแนกเป็น 6 ประเภทหลกั ดังน้ี 1) ซีเลก็ เตอร์อเนกประสงค์ (Universal selector) 2) ซเี ลก็ เตอร์ชนิดอลี เิ มนท์ (Element selector) 3) ซเี ลก็ เตอร์ชนิดคลาส (Class selector) 4) ซีเลก็ เตอร์ชนิดเอกลัษณ์ (ID selector)

204 5) ซเี ลก็ เตอร์ชนิดแอต็ ทรบิ วิ ท์ (Attribute selector) 6) ซีเลก็ เตอร์เทยี ม (Pseudo-selector) 1. ซีเลก็ เตอร์อเนกประสงค์ (Universal selector) คือ ตัวเลือกท่ไี ม่มีการระบุอีลิ เมนทเ์ ฉพาะ ทาให้คุณลักษณะของสไตล์ท่อี ยู่ภายใต้ขอบเขตของซีเลก็ เตอร์น้ีส่งผลกระทบ ต่อทกุ ๆ อลี เิ มนท์ รูปแบบของซีเลก็ เตอร์อเนกประสงคม์ ีดงั น้ี *{ Property: Value; } โดยท่เี คร่ืองหมาย * (Asterisk) คือ การเลือกทุกๆ อลี ิเมนทใ์ ห้แสดงผลตาม สไตล์ทอ่ี ยู่ภายใต้ขอบเขตของซีเลก็ เตอร์น้ี ตวั อย่างการใช้ซีเลก็ เตอร์อเนกประสงค์ <html> <head> <meta charset=\"UTF-8\"> <style type=\"text/css\"> *{ background-color: yellow; border: 1px solid black; } </style> </head> <body> <h1>Principle of Web Design</h1> <div> <p>Nutthapat Kaewrattanapat</p> <p>Lecturer Member</p> </div> <p>email:[email protected]</p> </body> </html>

205 จากตัวอย่างจะเหน็ ได้ว่าซีเล็กเตอร์อเนกประสงค์จะส่งผลกระทบต่อทุกอีลิเมนท์ให้มี ลักษณะพ้ืนหลังสเี หลือง (background-color: yellow;) มีเส้นขอบ (Border) ขนาด 1px เส้นทบึ (Solid) และมสี ดี า (Black) 2. ซีเลก็ เตอร์ชนิดอีลิเมนท์ (Element Selector) คือ ซีเลก็ เตอร์ท่ชี ่วยให้สามารถ กาหนดการแสดงผลเฉพาะบางอีลิเมนท์ได้ โดยตัวเลือกชนิดอีลิเมนทม์ ีข้อกาหนดหลาย ลักษณะ ได้แก่ซีเลก็ เตอร์ชนิดอลี ิเมนทเ์ ด่ียว (Element selector) ซีเลก็ เตอร์ชนิดหลายอีลิ เมนท์ (Multiple element selector) ซีซีเลก็ เตอร์ชนิดสบื ทอดให้ซีเลก็ เตอร์ย่อยถัดไป (Descendant selector) ซีเลก็ เตอร์ชนิดสืบทอดให้อีลิเมนทย์ ่อยแบบเรียงลาดับ (Sub selector) ซีเล็กเตอร์ชนิดสืบทอดให้ อีลิเมนท์ภายนอกแบบเรียงลาดับ ( Sequential selector) ซเี ลก็ เตอร์ชนิดสบื ทอดให้อลี ิเมนทถ์ ัดไปท้งั หมด (Preceded selector) 2.1 ซีเลก็ เตอร์ชนิดอีลิเมนท์เด่ียว (Element selector) คือ การกาหนดการ แสดงผลเฉพาะบางอลี เิ มนทเ์ ทา่ น้ัน รปู แบบของซเี ลก็ เตอร์ชนิดอลี ิเมนทเ์ ด่ยี ว (Element selector) มีดงั น้ี Element { Property: Value; } ตวั อย่างการใช้ซเี ลก็ เตอร์ชนิดอลี ิเมนทเ์ ด่ียว (Element selector) <html> <head> <style type=\"text/css\"> h1 { background-color: pink; color: white; } p{ background-color: blue; color: white; } </style> </head> <body> <h1>Profile</h1> <div> <p>Mr.Nutthapat Kaewrattanapat</p>

206 <p>I am work for Suan Sunandha Rajabhat University</p></div> <p> email:[email protected] </p> </body> </html> 2.2 ซีเลก็ เตอร์ชนิดหลายอีลิเมนท์ (Multiple element selector) คือ การกาหนด สไตล์ท่มี ลี กั ษณะเหมือนกันให้แก่อลี ิเมนทห์ ลายตัว โดยสามารถระบุช่ืออีลิเมนทม์ ากกว่า 1 ช่อื และค่นั ระหว่างช่อื อลี ิเมนทด์ ้วยเคร่ืองหมาย คอมม่า ( , ) รูปแบบของซีเลก็ เตอร์ชนิดหลายอลี ิเมนท์ (Multiple element selector) มี ดงั น้ี Element1, Element2, ElementN { Property: Value; } ตัวอย่างการใช้ซเี ลก็ เตอร์ชนิดหลายอลี ิเมนท์ (Multiple element selector) <html> <head> <style type=\"text/css\"> h1,p { background-color: limegreen; color: white; } </style> </head> <body> <h1>Profile</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>

207 2.3 ซีเลก็ เตอร์ชนิดสบื ทอดให้ซีเลก็ เตอร์ย่อยถัดไป (Descendant selector) คือ การกาหนดสไตล์ให้มีผลกบั ซีเลก็ เตอร์ถัดไปตามลาดับ รูปแบบของซีเล็กเตอร์ชนิดสืบทอดให้ซีเล็กเตอร์ย่อยถัดไป (Descendant selector) มดี งั น้ี ElementParent ElementTarget { Property: Value; } ตวั อย่างการใช้ซเี ลก็ เตอร์ชนิดสบื ทอดให้ซเี ลก็ เตอร์ย่อยถดั ไป (Descendant selector) แบบท่ี 1 <html> <head> <style type=\"text/css\"> ol li{ background-color: orange; border: 1px dashed black; } </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>

208 ภาพท่ี 6.3 แสดงการสบื ทอดจากซเี ลก็ เตอร์ ol ไปยงั ซีเลก็ เตอร์ li จากตัวอย่างสงั เกตุได้ว่าซีเลก็ เตอร์จะมีผลกับอีลิเมนท์ <li> ท่อี ยู่ภายใต้อีลิเมนท์ <ol> เทา่ น้ัน ตวั อย่างการใช้ซเี ลก็ เตอร์ชนิดสบื ทอดให้ซเี ลก็ เตอร์ย่อยถดั ไป (Descendant selector) แบบท่ี 2 <html> <head> <style type=\"text/css\"> ol a{ background-color: orange; border: 1px dashed black; text-decoration:none; } </style> </head> <body> <ol> <li>Kanchanaburi <a href=\"kan.jpg\"> picture</a></li> <li>Bangkok <a href=\"bkk.jpg\"> picture</a></li> <li>Phuket <a href=\"phu.jpg\"> picture</a></li> </ol> <ul> <li>Thailand</li> <li>United Kingdom</li> <li>Japan</li> </ul> </body> </html>

209 ภาพท่ี 6.4 แสดงการสบื ทอดจากซีเลก็ เตอร์ ol ไปยังซเี ลก็ เตอร์ a แบบข้าม li 2.4 ซีเลก็ เตอร์ชนิดสบื ทอดให้อีลิเมนทย์ ่อยแบบเรียงลาดับ (Sub selector) คือ การกาหนดการแสดงผลของอลี ิเมนทเ์ ป้ าหมาย (Target) โดยอลี ิเมนทเ์ ป้ าหมายจะถูกเลือก แสดงผลได้กต็ ่อเม่อื อลี เิ มนทก์ ่อนหน้า (Parent) มกี ารเรียงลาดับตามทก่ี าหนดไว้เทา่ น้ัน รูปแบบของซีเล็กเตอร์ชนิดสืบทอดให้อีลิเมนท์ย่อยแบบเรียงลาดับ (Sub selector) มดี งั น้ี ElementParent > ElementTarget { Property: Value; } ตัวอย่างการใช้ซีเลก็ เตอร์ชนิดสบื ทอดให้อลี ิเมนทย์ ่อยแบบเรียงลาดับ (Sub selector) <html> <head> <style type=\"text/css\"> ul>li>ul>li { background-color:aquamarine; } </style> </head> <body> <ul> <li>Asia <ul> <li>Thailand</li> <li>Japan</li> <li>Vietnam</li>

210 </ul> </li> </ul> </body> </html> ภาพท่ี 6.5 แสดงซเี ลก็ เตอร์ชนิดสบื ทอดให้อลี ิเมนทย์ ่อยแบบเรียงลาดบั จาก ul>li>ul>li 2.5 ซีเล็กเตอร์ชนิดสืบทอดให้อีลิเมนทภ์ ายนอกแบบเรียงลาดับ (Sequential Selector) หรือ อาจเรียกว่า ซีเล็กเตอร์ชนิดสืบทอดให้อีลิเมนท์ท่ีติดกัน (Adjacent selector) คือ การเรียงลาดับอีลิเมนท์ภายนอกเพ่ือกาหนดการแสดงผลของอีลิเมนท์ เป้ าหมาย (Target) รูปแบบ ของซี เล็กเตอร์ชนิ ดสืบทอดให้ อีลิเมน ท์ภาย นอกแบ บเรีย งลาดั บ (Sequential หselector) มดี ังน้ี Element + ElementTarget { Property: Value; }

211 ตวั อย่างการใช้ซเี ลก็ เตอร์ชนิดสบื ทอดให้อลี เิ มนทภ์ ายนอกแบบเรียงลาดบั (Sequential selector) <html> <head> <style type=\"text/css\"> ul+ul{ background-color:aquamarine; } </style> </head> <body> <ul> <li>Asia <ul> <li>Thailand</li> <li>Japan</li> <li>Vietnam</li> </ul> </li> </ul> <ul> <li>Europe <ul> <li>France</li> <li>Italy</li> <li>Germany</li> </ul> </li> </ul> </body> </html>

212 ภาพท่ี 6.6 แสดงซเี ลก็ เตอร์ชนิดสบื ทอดให้อลี ิเมนทภ์ ายนอกแบบเรียงลาดบั จาก ul+ul กรณีต้องการให้ซีเลก็ เตอร์เลือกอีลิเมนทย์ ่อยร่วมด้วย สามารถกระทาได้โดย การประยุกต์ใช้ซีเลก็ เตอร์อลี ิเมนทภ์ ายนอกแบบเรียงลาดับ (Sequential selector) กบั ซี เลก็ เตอร์อลี เิ มนทย์ ่อยแบบเรียงลาดับ (Sub selector) ตัวอย่างการประยุกต์ใช้ ซีเล็กเตอร์อีลิเมนท์ภายนอกแบบเรียงลาดับ (Sequential selector) กบั ซีเลก็ เตอร์อลี ิเมนทย์ ่อยแบบเรียงลาดบั (Sub selector) <html> <head> <style type=\"text/css\"> ul+ul>li>ul>li { background-color:aquamarine; } </style> </head> <body> <ul> <li>Asia <ul> <li>Thailand</li>

213 <li>Japan</li> <li>Vietnam</li> </ul> </li> </ul> <ul> <li>Europe <ul> <li>France</li> <li>Italy</li> <li>Germany</li> </ul> </li> </ul> </body> </html> ภาพท่ี 6.7 แสดงการใช้ซเี ลก็ เตอร์ภายนอกและย่อยร่วมกนั ul+ul>li>ul>li 2.6 ซเี ลก็ เตอร์ชนิดสบื ทอดให้อลี ิเมนทถ์ ัดไปท้งั หมด (Preceded selector) คือ การ เลือกอลี ิเมนทถ์ ัดไปท้งั หมดให้แสดงผลตามท่กี าหนด โดยมีความแตกต่างจากซีเลก็ เตอร์ช

214 นิดสบื ทอดให้อีลิเมนทภ์ ายนอกแบบเรียงลาดับ (Sequential selector) เน่ืองจากซีเลก็ เต อร์ชนิดสบื ทอดให้อลี ิเมนทภ์ ายนอกแบบเรียงลาดับ (Sequential selector) จะส่งผลกบั อีลิ เมนท์เดียวเท่าน้ัน แต่ ซีเล็กเตอร์ ชนิดสืบทอดให้อีลิเมนท์ถัดไปท้ังหมด (Preceded selector) จะส่งผลกับอีลิเมนทเ์ ป้ าหมาย (Target) ทุกๆ ตัว ท่อี ยู่ถัดจากอีลิเมนทก์ ่อนหน้า (Preceded) รูปแบบของซีเล็กเตอร์ชนิดสืบทอดให้อีลิเมนท์ถัดไปท้ังหมด (Preceded selector) มดี งั น้ี ElementPreceded ~ ElementTarget { Property: Value; } ตัวอย่างการใช้ซีเล็กเตอร์ชนิดสืบทอดให้อีลิเมนท์ถัดไปท้ังหมด (Preceded selector) <html> <head> <style type=\"text/css\"> h3~b { background-color: cornflowerblue; color: white; } </style> </head> <body> <h3>Schedule</h3> <b>7.00-8.00</b>: Wake up<br> <b>8.00-9.00</b>: Breakfast<br> <b>9.00-10.00</b>: Workplace<br> <b>10.00-12.00</b>: Meeting<br> <b>12.00-13.00</b>: Lunch<br> </body> </html>

215 ภาพท่ี 6.8 แสดงซีเลก็ เตอร์ชนิดสบื ทอดให้อลี ิเมนท์ b ทุกตวั ท่ถี ูกอลี เิ มนท์ h3 นาหน้า (Preceded) 3. ซเี ลก็ เตอร์ชนิดคลาส (Class selector) คือ การกาหนดช่อื ตัวเลือกด้วยตนเองได้ซ่งึ ช่อื ตวั เลือกน้ันๆ จะถูกเรียกว่า คลาส (Class) หมายถงึ ช่อื หมวดลกั ษณะ โดยอลี ิเมนทใ์ ดๆ สามารถเรียกใช้คุณลักษณะของคลาสได้บ่อยคร้ังเท่าท่ตี ้องการ โดยการกาหนคลาส จะใช้ เคร่ืองหมาย จุด ( . ) นาหน้าช่อื คลาส รปู แบบของซเี ลก็ เตอร์ชนิดคลาส (Class) มดี ังน้ี .ClassName { Property: Value; } รูปแบบการเรียกใช้คลาสของอลี ิเมนท์ มดี งั น้ี <p class=“ClassName”> … </p> โดยการเรียกใช้คลาสของอลี ิเมนทจ์ ะเรียกใช้ผ่านแอต็ ทริบิวทช์ ่ือว่า คลาส (Class) ของอลี ิเมนทใ์ ดๆ กต็ าม โดยค่าของคลาส คือ ช่ือคลาส (Class name) ท่รี ะบุไว้ในสไตล์ชีท น่ันเอง

216 ตวั อย่างการกาหนดซีเลก็ เตอร์ชนิดคลาสและการเรียกใช้คลาสของอลี เิ มนท์ <html> <head> <style type=\"text/css\"> .clock { border: 5px solid red; } </style> </head> <body> <img class=\"clock\" src=\"london.jpg\"> <img class=\"clock\" src=\"newyork.jpg\"> <img class=\"clock\" src=\"tokyo.jpg\"> <img src=\"moscow.jpg\"> </body> </html> ภาพท่ี 6.9 แสดงการกาหนดซเี ลก็ เตอร์ชนิดคลาสช่อื clock และการเรียกใช้คลาสของอลี ิ เมนท์ img

217 จากภาพท่ี 6.9 แสดงการกาหนดซีเลก็ เตอร์ชนิดคลาสช่ือ clock โดยมีลักษณะขอบ (Border) ขนาด 5 พิกเซล (5px) เส้นทบึ (Solid) และมีสีแดง (Red) จากน้ันมีการ กาหนดให้อลี ิเมนท์ img เรียกใช้คลาสผ่านแอต็ ทริบิวท์ class และมีค่าเทา่ กับ clock ซ่ึงเป็น ช่ือของคลาสท่กี าหนดไว้ในสไตล์ชีท ทาให้ภาพของ London, New York และ Tokyo มี ลักษณะขอบสแี ดง แต่ในส่วนของภาพ Moscow ไม่มีการเรียกใช้คลาส clock ทาให้ไม่เกดิ การแสดงผลขอบสแี ดง นอกจากน้ีซีเลก็ เตอร์ชนิดคลาส (Class selector) มคี วามพิเศษ คือ ผู้ออกแบบหรือ ผู้พัฒนาเว็บสามารถเลือกคลาส ได้มากกว่า 1 คลาส ร่วมกันเพ่ือกาหนดรูปแบบได้ หลากหลายลักษณะ ดังตัวอย่าง ตัวอย่างการเรียกใช้คลาสมากกว่า 1 คลาส ของอลี เิ มนท์ <html> <head> <style type=\"text/css\"> .clock{ height: 40%; } .leftframe{ border-left: 5px solid red; } .topframe{ border-top: 5px solid green; } .rightframe{ border-right: 5px solid blue; } .bottomframe{ border-bottom: 5px solid gray; } </style> </head> <body> <img class=\"clock leftframe\" src=\"london.jpg\"> <img class=\"clock leftframe topframe\" src=\"newyork.jpg\"> <img class=\"clock leftframe topframe rightframe bottomframe\" src=\"tokyo.jpg\">

218 <img class=\"clock leftframe topframe rightframe\" src=\"moscow.jpg\"> </body> </html> ภาพท่ี 6.10 แสดงการกาหนดซเี ลก็ เตอร์ชนดิ คลาสมากกว่า 1 คลาส และมีการเรียกใช้ คลาสของ อลี ิเมนท์ img มากกว่า 1 คลาสประกอบกนั ดังน้ันจะเหน็ ได้ว่าซเี ลก็ เตอร์ชนิดคลาสท่กี าหนดข้ึนน้ันสามารถนาไปใช้กบั อลี ิเมนท์ ใดๆ ก็ได้ และอาจจะนาหลายๆ คลาสมาประกอบเข้าด้วยกันเพ่ือความสะดวกในการ แสดงผลตามต้องการได้และอกี ทง้ั ยังสะดวกต่อการปรับปรุงคุณลักษณะของคลาสบางคลาส ได้อย่างยืดหยุ่นย่ิงข้นึ 4. ซเี ลก็ เตอร์ชนิดเอกลษั ณ์ (ID selector) หรือ เรียกว่า ซเี ลก็ เตอร์ชนิดไอดี โดยคา ว่า ไอดี (ID) คือ ตัวย่อภาษาอังกฤษท่ีมาจากคาว่า “Identification” แปลว่า การระบุ เอกลักษณ์เฉพาะ ซ่ึงซีเลก็ เตอร์ชนิดเอกลักษณ์ คือ การกาหนดช่ือเฉพาะท่เี ป็นเอกลักษณ์ และไม่ซา้ กับช่ือซีเลก็ เตอร์อ่ืนๆ เม่ืออีลิเมนทใ์ ดๆ กต็ ามมีการกาหนดแอต็ ทริบิวต์ช่ือไอดี (Attribute ID) และมีช่ือตรงกนั ช่ือของซีเลก็ เตอร์ชนิดเอกลัษณ์ตัวใด กจ็ ะแสดงสไตล์หรือ

219 ลักษณะของซีเลก็ เตอร์ชนิดเอกลัษณ์ตัวน้ันๆ ออกมาก โดยการใช้ซีเลก็ เตอร์ชนิดเอกลัษณ์ น้ัน เหมาะกับการระบุเพียง 1 คร้ังเท่าน้ัน เน่ืองจากอีลิเมนท์ 1 อีลิเมนทค์ วรมีรหัส เอกลักษณ์ (Attribute ID) เพียงช่ือเดียว เพ่ือประโยชน์ในการช้ีเฉพาะอีลิเมนทท์ ่เี จาะจง เป็ นพิเศษ รปู แบบของซเี ลก็ เตอร์ชนิดเอกลษั ณ์ (ID selector) มดี ังน้ี #IDname { Property: Value; } รปู แบบการเรียกใช้ซเี ลก็ เตอร์ชนิดเอกลษั ณ์ (ID selector) ของอลี เิ มนทม์ ีดงั น้ี <p id=“IDname”> … </p> โดยการเรียกใช้ซเี ลก็ เตอร์ชนิดเอกลัษณ์ (ID selector) ของอลี ิเมนทจ์ ะเรียกใช้ผ่าน แอต็ ทริบิวทช์ ่ือว่า ไอดี (id) โดยค่าของไอดี คือ ช่ือไอดี (ID name) ท่รี ะบุไว้ในสไตล์ชีท น่ันเอง ตวั อย่างการเรียกใช้ซเี ลก็ เตอร์ชนิดเอกลัษณ์ (ID selector) ของอลี ิเมนท์ <html> <head> <style type=\"text/css\"> #header{ font-size: 20 pt; background-color: aqua; } #footer{ background-color: pink; } </style> </head> <body> <div id=\"header\"> List of Subjects </div> <div id=\"body\">

220 <ul> <li>Pinciple of Web Design 3 Credits</li> <li>Database System 3 Credits</li> <li>Web Development 3 Credits</li> </ul> </div> <div id=\"footer\"> Contact:[email protected] </div> </body> </html> ภาพท่ี 6.11 การเรียกใช้ซเี ลก็ เตอร์ชนิดเอกลษั ณ์ (ID selector) ของอลี เิ มนท์ div

221 5. ซีเลก็ เตอร์ชนิดแอต็ ทรบิ วิ ท์ (Attribute selector) โดยคาว่า “Attribute” แปลว่า คุณลกั ษณะ ซ่ึงตัวเลือกชนิดแอต็ ทริบิวทเ์ ป็นการเลอื กปรับลกั ษณะอลี เิ มนทท์ ่มี ีการใช้แอ็ ตทริบิวทต์ รงกบั ซเี ลก็ เตอร์ชนิดแอต็ ทริบวิ ทท์ ่กี าหนดไว้ในส่วนของสไตลช์ ีท รปู แบบของซีเลก็ เตอร์ชนิดแอต็ ทริบวิ ท์ (Attribute selector) มดี งั น้ี [attributeName] { Property: Value; } ตารางท่ี 6.1 แสดงซีเลก็ เตอร์ชนิดแอต็ ทริบิวท์ ซีเล็กเตอรช์ นดิ แอ็ตทริบวิ ท์ ความหมาย ตวั อย่าง [attributename] ซีเล็กเตอร์ชนิดแอ็ [width] [height] ตทริบิวท์ท่ีเลือกอีลิ [src] เมนท์ท่มี ีการระบุแอ็ [id] [name] ตทริบิวท์ภายในอีลิ [attributename=\"val\"] เมนท์ [width=\"200px\"] ซีเลก็ เตอร์ชนิดแอ็ [src=\"logo.png\"] ตทริบวิ ทท์ เ่ี ลอื ก [id=\"header\"] เฉพาะอลี ิเมนทท์ ่มี ี การใช้ แ อ็ต ท ริ บิ ว ท์ แ ล ะ มี การกาหนดค่าท่ตี รง กับค่าท่ีระบุไว้ ในซี เลก็ เตอร์ [attributename~=\"val\"] ซเี ลก็ เตอร์ชนิดแอ็ h2[title~=\"Thai\"] ตทริบวิ ทท์ เ่ี ลอื ก เฉพาะอลี เิ มนทท์ ม่ี ี

222 ซีเล็กเตอรช์ นดิ แอ็ตทริบวิ ท์ ความหมาย ตวั อยา่ ง การใช้แอต็ ทริบวิ ท์ <h2 title=\"Thai News\"> THAI NEWS</h2> และมกี ารกาหนดค่า สว่ นใดสว่ นหน่ึงท่ี ตรงกบั ค่าทร่ี ะบุไว้ใน ซเี ลก็ เตอร์โดยค่าน้นั จะต้องเป็นคาท่แี ยก ออกจากคาอ่นื เทา่ น้ัน [attributename|=\"val\"] ซเี ลก็ เตอร์ชนิด h2[title|=\"Thai\"] แอต็ ทริบวิ ทท์ ่เี ลือก เฉพาะอลี ิเมนทท์ ม่ี ี การใช้แอต็ ทริบวิ ท์ และมกี ารกาหนดค่า ในสว่ นเร่ิมต้นท่ตี รง <h2 title=\"ThaiNews\"> กบั ค่าท่รี ะบุไว้ในซี THAI NEWS</h2> เลก็ เตอร์โดยค่าน้ัน ไม่จาเป็ นต้องเป็ นคา แยกจากคาอ่นื [attributename^=\"val\"] ซเี ลก็ เตอร์ชนิดแอ็ a[href^=\"http\"] ตทริบิวทท์ ่เี ลอื ก เฉพาะอลี ิเมนทท์ ่มี ี การใช้แอต็ ทริบวิ ท์ และมกี ารกาหนดค่า <a href=\"http://www.thai news.com\">News</a> ในส่วนเร่ิมต้นทต่ี รง กบั ค่าทร่ี ะบุไว้ในซี เลก็ เตอร์

223 ซีเล็กเตอรช์ นดิ แอ็ตทริบวิ ท์ ความหมาย ตวั อย่าง [attributename$=\"val\"] ซเี ลก็ เตอร์ชนิดแอ็ a[href$=\"png\"] ตทริบวิ ทท์ ่เี ลอื ก เฉพาะอลี เิ มนทท์ ่มี ี <a href=\"http://www.thai การใช้แอต็ ทริบวิ ท์ news.com/logo.png\">Logo และมีการกาหนดค่า </a> จุดส้นิ สดุ ท่ตี รงกบั ค่าทร่ี ะบุไว้ในซีเลก็ a[href*=\"image\"] เตอร์ [attributename*=\"val\"] ซีเลก็ เตอร์ชนิด <a href=\"http://www.thai แอต็ ทริบวิ ทท์ ่เี ลอื ก news.com/image.png\">Logo เฉพาะอลี ิเมนทท์ ่มี ี </a> การใช้แอต็ ทริบวิ ท์ และมคี ่าสว่ นหน่ึง ส่วนใดตรงกบั ค่าท่ี ระบุไว้ในซเี ลก็ เตอร์ ตวั อย่างการใช้ซีเลก็ เตอร์ชนิดแอต็ ทริบิวท์ (Attribute selector) <html> <head> <style type=\"text/css\"> [id]{ border: 1px solid black; } #header{ font-size: 20pt; background-color: aqua; } #footer{ background-color: pink; } </style> </head> <body> <div id=\"header\"> List of Subjects </div>

224 <div id=\"body\"> <ul> <li>Pinciple of Web..</li> <li>Database System..</li> <li>Web Development..</li> </ul> </div> <div id=\"footer\"> Contact:[email protected] </div> </body> </html> จากตัวอย่างสงั เกตได้ว่าอีลิเมนท์ div ทุกอีลิเมนทม์ ีการใช้แอต็ ทริบิวท์ id และใน ส่วนของสไตล์ชีทมีการกาหนดซีเลก็ เตอร์ชนิดแอต็ ทริบิวทไ์ อดีไว้ ดังน้ันทุกๆ อีลิเมนท์ div ท่มี ีการใช้แอต็ ทริบิวท์ id จะถูกปรับสไตล์ให้เป็นไปตามท่กี าหนดไว้ในขอบเขตของเลก็ เต อร์ชนิดแอต็ ทริบวิ ทไ์ อดี ภาพท่ี 6.12 แสดงการกาหนดซเี ลก็ เตอร์ชนิดแอต็ ทริบิวท์ (Attribute selector)

225 นอกจากน้ี การใช้ซเี ลก็ เตอร์ชนิดแอต็ ทรบิ วิ ทย์ งั สามารถเลอื กเฉพาะอลี ิเมนทท์ ม่ี กี าร ใช้แอต็ ทริบวิ ทแ์ ละมีการกาหนดค่าท่ตี รงกบั ซีเลก็ เตอร์ได้ ดงั ตัวอย่างต่อไปน้ี ตัวอย่างการใช้ซเี ลก็ เตอร์ชนิดแอต็ ทริบิวท์ width ร่วมกบั การระบุค่า 200 <html> <head> <style type=\"text/css\"> [width=\"200\"]{ border-radius: 20px; border: 3px solid black; } </style> </head> <body> <img src=\"orange.jpg\" width=\"100\"> <img src=\"orange.jpg\" width=\"200\"> </body> </html> ภาพท่ี 6.13 แสดงการใช้ซเี ลก็ เตอร์ชนิดแอต็ ทริบวิ ท์ width ร่วมกบั การระบุค่า 200

226 ตัวอย่างการใช้ซเี ลก็ เตอร์ชนิดแอต็ ทริบิวท์ alt ร่วมกบั การระบุค่า Small Orange <html> <head> <style type=\"text/css\"> [alt=\"Small Orange\"]{ border-radius: 20px; border: 3px solid red; } </style> </head> <body> <img src=\"orange.jpg\" width=\"100\" alt=\"Small Orange\"> <img src=\"orange.jpg\" width=\"200\" alt=\"Big Orange\"> </body> </html> ภาพท่ี 6.14 แสดงการใช้ซเี ลก็ เตอร์ชนิดแอต็ ทริบิวท์ alt ร่วมกบั การระบุค่า Small Orange

227 6. ซีเลก็ เตอร์เทยี ม (Pseudo-Selector) คือ ส่วนเสริมของซีเลก็ เตอร์ เพ่ือช่วยให้ นักออกแบบและพัฒนาเวบ็ สามารถการกาหนดสไตล์แก่อีลิเมนทใ์ ห้มีความเฉพาะเจาะจง มากย่งิ ข้นึ โดยซเี ลก็ เตอร์เทยี มมี 2 ลกั ษณะ ดังน้ี 6.1 ซีเลก็ เตอร์เทียมประเภทคลาส (Pseudo-Class) ใช้เม่ือต้องการกาหนด เง่อื นไขเฉพาะหรือสถานะเฉพาะให้แก่ซีเลก็ เตอร์ชนิดคลาส โดยจะใช้สญั ลักษณ์โคลอน “:” (Colon) นาหน้าเง่อื นไขหรือสถานะ นักออกแบบและพัฒนาเวบ็ นิยมนาซีเลก็ เทยี มประเภท คลาสมาใช้ในการกาหนดสถานะของอลี ิเมนทเ์ ม่อื มกี ารนาเมาสไ์ ปช้ี (Mouse over) เช่น การ กาหนดให้แก่สถานะของอลี เิ มนทเ์ อ (<a>) เป็นต้น รูปแบบการกาหนดซีเลก็ เตอร์เทยี มประเภทคลาส selector:pseudo-class { property: value; } ตารางท่ี 6.2 แสดงซเี ลก็ เตอร์เทยี มประเภทคลาส ซีเล็กเตอรเ์ ทียมประเภท ความหมาย ตวั อยา่ ง คลาส ซเี ลก็ เตอร์เทยี มประเภทคลาสทม่ี ลี ักษณะพลวตั ร (Dynamic pseudo-classes) :link สไตล์จะทางานกต็ ่อเม่ืออีลิ a:link { เมนทน์ ้ันๆ เป็นลิงค์ color: red; } :visited สไตลจ์ ะทางานกต็ ่อเม่อื เคย a:visited { color: green; มกี ารคลกิ ลงิ คด์ ังกล่าวแล้ว } :hover สไตล์จะทางานก็ต่อเม่ือมี a:hover { :active background- การนาเมาส์ไปวางไว้เหนือ color: black; ลงิ ค์ หรือ อลี ิเมนทอ์ ่นื ๆ } a:active { สไตล์จะทางานก็ต่อเม่ือ color: blue; ลงิ ค์ถูกคลิก } :focus สไตล์จะทางานก็ต่อเม่ือ input:focus{ background-color: เคอเซอร์ไปอยู่ท่ีอีลิเมนท์ blue; }

228 ซีเล็กเตอรเ์ ทียมประเภท ความหมาย ตวั อย่าง คลาส หรือมีการคลิกท่ีอีลิเมนท์ <body> <form> เช่น การเล่ือนเคอเซอร์ไป Phone: ยังกล่องป้ อนข้อความ เป็ น <input type=\"tel\"> <br> ต้น e-mail: <input type=\"email\" disabled=\"disabled\"> </form> </body> ซเี ลก็ เตอร์เทยี มประเภทคลาสท่ที างานเม่อื ถงึ เป้ าหมาย (The target pseudo-class) :target สไตล์จะทางานกต็ ่อเม่ือถึง :target { border: เป้ าหมายจากการคลกิ ลิงค์ 2px solid green; background-color: yellow; } <a href=\"#news1\"> Content 1</a><br> <a href=\"#news2\"> Content 2</a> <p id=\"news1\"> Content 1</p> <p id=\"news2\"> Content 2</p> ซีเลก็ เตอร์เทยี มประเภทคลาสทท่ี างานเก่ยี วกบั ภาษา (The language pseudo-class) :lang(LN) สไตล์จะทางานกต็ ่อเม่ือมีอี :lang(en){ font-style: ลิเมนท์ท่ีใช้ แอตทริบิวท์ italic; lang และมีค่าตรงกับ } (LN) ท่ีระบุไว้ ในซีเล็ก <body> <p>The man said เตอร์เทยี ม <q lang=\"en\"> ENGLISH. </q> </p> </body>

229 ซีเล็กเตอรเ์ ทียมประเภท ความหมาย ตวั อย่าง คลาส ซีเลก็ เตอร์เทยี มประเภทคลาสท่ที างานเก่ยี วกับส่วนต่อประสานผู้ใช้ (The UI element states pseudo-classes) สไตล์จะทางานก็ต่อเม่ือ input:enabled{ :enabled background-color: :disabled สถานะของอีลิเมนท์ใน red; ฟอร์มมีค่าสามารถเข้าถึง } input:disabled{ หรือสามารถกรอกข้อมูลได้ background-color: (enabled) gray; } <body> <form> Phone: <input type=\"tel\"> <br> e-mail: <input type=\"email\" disabled=\"disabled\"> </form> </body> สไตล์จะทางานก็ต่อเม่ือ input:enabled{ background-color: สถานะของอีลิเมนท์ใน red; ฟ อ ร์ ม มี ค่ า ไ ม่ ส า ม า ร ถ } input:disabled{ เข้าถงึ ได้ (disabled) background-color: gray; } <body> <form> Phone: <input type=\"tel\"> <br> e-mail: <input type=\"email\" disabled=\"disabled\"> </form> </body>

230 ซีเล็กเตอรเ์ ทียมประเภท ความหมาย ตวั อยา่ ง คลาส :checked สไตล์จะทางานก็ต่อเม่ือ input:checked+label{ font-weight: bold; สถานะของอีลิเมนท์กล่อง } เลือก (Check box) ใน <body> ฟอร์มมีการถูกคลิกเลือก <form> <input type=\"radio\" (checked) id=\"m\" name=\"gender\" value=\"male\"> <label for=\"m\"> male</label> <input type=\"radio\" id=\"f\" name=\"gender\" value=\"female\"> <label for=\"f\"> female</label> </form> </body> ซีเลก็ เตอร์เทยี มประเภทคลาสท่ที างานเก่ียวกับโครงสร้างของเอชทเี อม็ แอล (Structural pseudo-classes) :root สไตลจ์ ะทางานกต็ ่อเม่อื พบ :root { background: red; อลี เิ มนทร์ าก (root) ซ่ึงใน } โครงสร้างภาษาเอชทเี อม็ แอล รากของโครงสร้างคอื อลี ิเมนท์ <html></html> ดงั น้ัน เม่อื มกี ารใช้ซีเลก็ เตอรเ์ ทยี มน้ีจะมผี ลต่อ สไตลข์ องอลี ิเมนทท์ ง้ั หน้า เวบ็ เพจ

231 ซีเล็กเตอรเ์ ทียมประเภท ความหมาย ตวั อยา่ ง คลาส สไตล์จะทางานกต็ ่อเม่ือพบ :nth-child(1) :nth-child(an+b) :nth-child(2n) ลาดับท่ี (nth) ของอลี ิเมนท์ :nth-child(odd) :nth-last- child(an+b) ลูก (child) ภายใน :nth-child(even) :first-child :nth-child(2n+1) :last-child โครงสร้ างเอชทีเอ็มแอล โดยสามารถกาหนดค่าได้ 3 ลักษณะ คือ 1) ตัวเลขจานวนเต็ม (Integer) เช่น 1 2 3 -1 - 2 -3 เป็นต้น 2) ข้อความ เช่น odd (ค่ี) และ even (คู่) 3) สตู ร (Formula) โดยท่ี ตัวแปร a คือ ขนาดของ วงรอบ ตัวแปร n คือ ค่า โดยปริยายซ่ึงจะมีค่าต้ังแต่ 0 1 2 3 .. n ค่า n ข้นึ อยู่ กับจานวนลูกท่ีเป็ นไปได้ ท้งั หมด ตัวแปร b คือ ค่า ทดแทนเพ่ิมเติมเพ่ือทาให้มี ความยืดหยุ่นในการเลือกอี ลเิ มนทล์ ูก เหมือนกับ :nth-child แต่ :nth-last-child(1) :nth-last-child(2n) จ ะ เ ลื อ ก อี ลิ เ ม น ท์ ลู ก จ า ก ร ะ ดั บ ต่ า สุ ด ข้ ึ น ม า ร ะ ดั บ สงู สดุ :nth-child(1) คล้ายคลึงกบั :nth-child(1) :nth-last-child(1) คล้ายคลึงกบั

232 :only-child :nth-last-child(1) คล้ายคลึงกับการกาหนดซี :nth-child(1):nth- last-child(1) เลก็ เตอร์เทยี มแบบร่วมกัน ดังน้ ี :nth-child(1):nth-last- child(1) ซีเลก็ เตอร์เทยี มประเภทคลาสเชิงนิเสธ (The negation pseudo-class) :not() สไตล์จะข้ามการทางาน :not(p) :not(#header) 6.2 ซีเลก็ เตอร์เทียมประเภทอีลิเมนท์ (Pseudo-Element) ใช้เม่ือต้องการ กาหนดสไตล์เฉพาะบางส่วนให้แก่ข้อมูลภายในอลี ิเมนทห์ น่ึงๆ โดยจะใช้สญั ลักษณ์โคลอน จานวน 2 ตัว “::” นาหน้าคาส่งั รูปแบบการกาหนดซเี ลก็ เตอร์เทยี มประเภทอลี ิเมนท์ selector::pseudo-element { property: value; } ตารางท่ี 6.3 แสดงซเี ลก็ เตอร์เทยี มประเภทอลี ิเมนท์ ซีเล็กเตอรเ์ ทียมประเภท ความหมาย ตวั อย่าง อีลิเมนท์ ซีเลก็ เตอร์เทยี มประเภทคลาสทม่ี ีลกั ษณะพลวัตร (Dynamic pseudo-classes) ::first-line ส ไ ต ล์ จ ะ ท า ง า น เ ฉ พ า ะ p:first-line{ background: red; ข้อมูลในบรรทดั แรกของอี } ลิเมนท์ ::first-letter ส ไ ต ล์ จ ะ ท า ง า น เ ฉ พ า ะ p:first-letter{ color: red; อักษรแรกของข้อมูลในอีลิ font-size: 200%; เมนท์ } ::before สไตล์จะแทรกเน้ือหาก่อน p::before{ ข้อมลู ในอลี เิ มนท์ content: \"Hello!\"; display: inline; }

233 ซีเล็กเตอรเ์ ทียมประเภท ความหมาย ตวั อย่าง อีลิเมนท์ สไตล์จะแทรกเน้ือหาหลัง <body> ::after ข้อมลู ในอลี เิ มนท์ <p>My world.</p> </body> p::after{ content: \"Bye!\"; display: inline; } <body> <p>My world.</p> </body> การใชเ้ ครื่องมือตรวจสอบสไตลช์ ีท ในไฟล์เอกสารเอชทเี อม็ แอลหรือเอกสารเวบ็ ต่างๆ ท่มี ีการใช้สไตล์ชีทสาหรับการ ควบคุมการแสดงผลน้ัน จะปรากฎคาส่ังสไตล์ชีทจานวนมากและบางคร้ังผู้พัฒนาเว็บ ต้องการความสะดวกและรวดเรว็ ในการตรวจสอบคาส่งั สไตล์ชีท เพ่ือยืนยันและเกิดความ ม่ันใจว่าคาส่งั สไตลช์ ที ท่อี ยู่ภายในเอกสารเวบ็ ต่างๆ มีความสอดคล้องกบั มาตรฐานสไตล์ชีท ในรุ่นปัจจุบันและมีความเป็นสากล หรือ ตรวจสอบความเหมาะสมของคาส่งั สไตล์ชีทท่จี ะ นาไปใช้งานบนอุปกรณ์อ่นื ๆ เช่น การแสดงผลบนทวี ี (Smart TV) เคร่ืองพิมพ์ (Printer) เป็ นต้ น โดยการใช้เคร่ืองมือตรวจสอบสไตลช์ ที (CSS validator) สามารถเข้าใช้เคร่ืองมือได้ ท่ีเว็บไซต์ https://jigsaw.w3.org/css-validator/validator.html.en ซ่ึงเป็ นเว็บไซต์ท่ี บริการการตรวจสอบคาส่ังสไตล์ชีทภายใต้ การดูแลขององค์กรระดับสากลด้ านการดูแล มาตรฐานและเทคโนโลยีเวบ็ (World Wide Web Consortium: W3C) ท่จี ัดต้ังโดย ทมิ เบอร์เนอส์ ลี โดยการใช้งานเคร่ืองมือมขี ้นั ตอนดังน้ี 1. เข้าเวบ็ ไซต์ https://jigsaw.w3.org/css-validator/validator.html.en จะปรากฎ หน้าเวบ็ ไซตส์ าหรับตรวจสอบคาสง่ั สไตลช์ ีท และสามารถเลือกภาษาในการแสดงผลเวบ็ ไซต์ ได้ในสว่ นแถบด้านบนสดุ ของเวบ็ ไซต์

234 ภาพท่ี 6.15 แสดงหน้าเวบ็ ไซตบ์ ริการตรวจสอบสไตล์ชีท ทม่ี า: https://jigsaw.w3.org/css-validator/validator.html.en 2. เลือกประเภทของแหล่งข้อมูลท่ตี ้องการรับบริการตรวจสอบสไตล์ชีท โดยมี 3 ลักษณะ คือตัวระบุแหล่งทรัพยากรสากล (Uniform resource identifier: URI)4 การอัพ โหลดไฟล์เอกสารเวบ็ ต่างๆ (File upload) และ การป้ อนคาส่งั สไตล์ชีทโดยตรง (Direct input) 4 https://www.w3.org/TR/uri-clarification/

235 ภาพท่ี 6.16 แสดงการใช้ตวั ระบุแหล่งทรัพยากรสากล (URI) ในการรบั บริการ ตรวจสอบสไตล์ชีท ภาพท่ี 6.17 แสดงการแจ้งผลการตรวจสอบสไตล์ชที กรณที ค่ี าสง่ั สไตลช์ ที มีจุดบกพร่อง และจุดเตอื น

236 ภาพท่ี 6.18 แสดงการอพั โหลดไฟล์เอกสารเวบ็ ต่างๆ (File upload) ในการรบั บริการ ตรวจสอบสไตล์ชีท ภาพท่ี 6.19 แสดงการแจ้งผลการตรวจสอบสไตล์ชที กรณที ค่ี าส่งั สไตลช์ ที ไม่มีจุดบกพร่องและจุดเตอื น

237 ภาพท่ี 6.20 แสดงการป้ อนคาส่งั สไตลช์ ีทโดยตรง (Direct input) ในการรับบรกิ าร ตรวจสอบสไตลช์ ีท 3. การตรวจสอบความสอดคล้องระหว่างคาส่งั สไตล์ชีท เกิดข้ึนในกรณีท่ตี ้องการ ตรวจสอบความสอดคล้องระหว่างคาส่ังสไตล์ชีทท่มี ีกับรุ่นสไตล์ชีทอ่ืนๆ (รุ่นก่อนหน้า) หรือ อุปกรณ์ท่สี นับสนุนหรือไม่ สามารถทาได้โดยการเลือก “More Options” เพ่ือทาการ ต้งั ค่าการตรวจสอบ ภาพท่ี 6.21 แสดงการตรวจสอบความสอดคล้องระหว่างคาส่งั สไตล์ชที ท่มี ี กบั สไตลช์ ที ร่นุ อ่นื

238 สรุป สไตล์ชีทมีวัตถุประสงค์ในการใช้งานแตกต่างจากภาษาเอชทีเอม็ แอล กล่าวคือ สไตล์ชีทใช้ในการควบคุมการแสดงผลหรือการนาเสนอรูปแบบของเว็บไซต์ ส่วนภาษา เอชทีเอม็ แอลใช้ในการควบคุมโครงสร้างและเน้ือหาของเวบ็ ไซต์ นอกจากน้ีสไตล์ชีทยัง สามารถควบคุมการแสดงผลเวบ็ เพจท้งั หมดของเวบ็ ไซต์ได้จากไฟล์เอกสารสไตล์ชีทไฟล์ เดยี วเทา่ น้ัน ทาให้ผู้ออกแบบและพัฒนาเวบ็ ไซต์มีความสะดวกในการควบคุมการแสดงผล เวบ็ ไซต์ ดังน้ันผู้ออกแบบเวบ็ ไซต์จึงต้องศึกษาและเข้าใจเก่ยี วกับโครงสร้างของสไตล์ชีท หรือ ชุดของกฎสไตล์ชีท (CSS Rule set) ซ่ึงจะทาให้นักออกแบบเวบ็ ไซต์สามารถนาไป ประยุกต์ใช้ในการควบคุมการแสดงผลหน้าเวบ็ เพจได้อย่างยืดหยุ่นและมีประสทิ ธภิ าพสงู คาถามทา้ ยบท 1. จงอธบิ ายประวัตคิ วามเป็นมาของ สไตลช์ ีท (Style sheet) 2. จงอธบิ ายความแตกต่างระหว่างภาษาเอชทเี อม็ แอล (HTML) และ สไตล์ชีท (Style sheet) 3. จงอธบิ ายโครงสร้างของ สไตลช์ ีท (Style sheet) 4. จงอธิบายวิธีการนาสไตล์ชีท (Style sheet) มาใช้ร่วมกับภาษาเอชทีเอม็ แอล (HTML) 5. จงอธบิ ายและยกตัวอย่าง ซีเลก็ เตอร์อเนกประสงค์ (Universal selector) 6. จงอธบิ ายและยกตวั อย่าง ซีเลก็ เตอร์ชนิดอลี ิเมนท์ (Element selector) 7. จงอธบิ ายและยกตัวอย่าง ซเี ลก็ เตอร์ชนิดคลาส (Class selector) 8. จงอธบิ ายและยกตวั อย่าง ซีเลก็ เตอร์ชนิดเอกลษั ณ์ (ID selector) 9. จงอธบิ ายและยกตวั อย่าง ซีเลก็ เตอร์ชนิดแอต็ ทริบิวท์ (Attribute selector) 10.จงอธบิ ายและยกตวั อย่าง ซเี ลก็ เตอร์เทยี ม (Pseudo-selector)

239 เอกสารอา้ งอิง Cailliau, Robert (1995). The CSS saga. World Wide Web Consortium. URL https://www.w3.org/Style/LieBos2e/history/ Joel Sklar. (2014). Principles of Web Design, Sixth Edition. Cengage Learning Asia. Jon Duckett. (2011). HTML and CSS : Design and Build Websites. John Wiley & Sons Inc. W3C. (2011). CSS Validator. URL: https://jigsaw.w3.org/css- validator/validator.html.en ______. (2011). Selectors. URL: https://www.w3.org/wiki/CSS/Selectors

240

241 แผนบริหารการสอนประจาบทที่ 7 หวั ขอ้ เน้ ือหา มาตรฐานช่อื สี มาตรฐานสอี าร์จบี ี มาตรฐานรหัสสฐี าน 16 การไล่ระดับสี อตั ราการเปรียบต่าง วตั ถุประสงคเ์ ชิงพฤติกรรมหวั ขอ้ เน้ ือหา 1. อธบิ ายการใช้มาตรฐานช่อื สรี ่วมกบั ภาษาเอชทเี อม็ แอลได้ 2. อธบิ ายการใช้มาตรฐานสอี าร์จบี ีร่วมกบั ภาษาเอชทเี อม็ แอลได้ 3. อธบิ ายการใช้มาตรฐานรหัสสฐี าน 16 ร่วมกบั ภาษาเอชทเี อม็ แอลได้ 4. อธบิ ายการไล่ระดบั สไี ด้ 5. อธบิ ายการคานวณอตั ราการเปรียบต่างได้ วิธีและกิจกรรมการเรียนการสอน 1. วิธีสอน 1.1 วธิ สี อนแบบบรรยาย 1.2 วธิ สี อนแบบอภปิ ราย 1.3 วธิ สี อนแบบการศกึ ษาโดยลาพัง 2. กิจกรรมการเรียนการสอน 2.1 ผู้สอนบรรยายสรปุ เน้อื หา 2.2 ให้ผู้เรียนศึกษาเน้ือหาจากเอกสารประกอบการสอน 2.3 ผู้เรียนร่วมอภปิ รายการออกแบบเวบ็ ไซตล์ กั ษณะต่าง ๆ ท่ใี ช้ใน ชวี ติ ประจาวนั 2.4 ผู้เรียนแบ่งกลุ่มร่วมกนั วิเคราะห์เปรียบเทยี บเน้ือหา ก่อนผู้สอนจะสรุปและ ยกตวั อย่างเปรียบเทยี บ 2.5 มอบหมายให้ผู้เรียนค้นหาเพ่ิมเติม

242 สือ่ การเรียนการสอน 1. เอกสารประกอบการสอน 2. ส่อื อเิ ลก็ ทรอนิกส์ 3. หนังสอื ตารา เอกสารทเ่ี ก่ยี วข้อง การวดั ผลและประเมินผล 1. สงั เกตการตอบคาถามและต้งั คาถามของผู้เรียนในระหว่างการบรรยาย อภิปราย และซักถาม 2. สงั เกตความต้งั ใจในการตดิ ตามเน้อื หาบทเรียน 3. สงั เกตการให้ความร่วมมือในการอภปิ รายกลุ่ม 4. สงั เกตการให้ความร่วมมือในการศกึ ษาโดยลาพัง

243 บทที่ 7 มาตรฐานสแี ละอตั ราการเปรียบต่าง ในการออกแบบและพัฒนาเวบ็ ไซต์ ผู้ออกแบบและพัฒนาจาเป็นต้องเข้าใจเก่ียวกบั มาตรฐานสีท่ใี ช้ในระบบทางด้านเวบ็ ซ่ึงปัจจุบันจอภาพมอนิเตอร์ สมาร์ทโฟน แทบ็ เบต็ และสมาร์ททวี ี จะนิยมใช้มาตรฐานสอี าร์จีบี (Red Green Blue: RGB) ซ่ึงประกอบไปด้วย 3 แม่สหี ลัก คือ สแี ดง (Red) สเี ขยี ว (Green) และสนี า้ เงิน (Blue) ดังน้ัน การออกแบบ เวบ็ ไซต์เพ่ือให้สามารถแสดงผลบนเวบ็ เบราเซอร์ได้อย่างถูกต้องและมีการเลือกใช้รหัสสที ่ี เป็นไปตามมาตรฐานสากลจึงเป็นประเดน็ ท่สี าคัญ นอกจากน้ีผู้ออกแบบและพัฒนาเวบ็ ไซต์ ควรทราบเก่ยี วกบั แนวทางการออกแบบและพัฒนาเวบ็ ทผ่ี ู้ใช้เข้าถึงเน้ือหาได้ (Web Content Accessibility Guidelines: WCAG) ซ่ึงแนวทางดงั กล่าวเผยแพร่โดยองค์กรระดบั สากลด้าน การดูแลมาตรฐานและเทคโนโลยีเวบ็ (World Wide Web Consortium: W3C) ปัจจุบัน แนวทางดังกล่าวอยู่ในรุ่นท่ี 2 (WCAG2.0) ซ่ึงแนวทางของ WCAG2.0 ท่สี าคัญด้านการ ใช้สี คือ การวัดความสว่างสมั พัทธ์ และ การวัดอัตราการเปรียบต่าง ดังน้ัน ผู้ออกแบบและ พัฒนาเวบ็ ไซต์จาเป็นต้องสามารถคานวนและวัดค่าต่างๆ ท่สี อดคล้องกับมาตรฐานสากล เพ่ือช่วยให้สามารถออกแบบและพัฒนาเวบ็ ไซต์ได้อย่างเหมาะสมและมปี ระสทิ ธภิ าพสงู มาตรฐานชื่อสี การใช้ภาษาเอชทเี อม็ แอล (HTML) เพ่ือกากับเก่ียวสี เช่น การกากับสีให้แก่ ตัวอักษร การกากับสีเส้นขอบ การกากับสีพ้ืนหลัง หรือ การกากับสีให้แก่ลิงค์ เป็ นต้น สามารถใช้ช่ือสีในการให้ค่าสีบนเว็บเบราเซอร์ได้ โดยช่ือสีท่ีเว็บเบราเซอร์ในปัจจุบัน สนับสนุนน้ันมีจานวนประมาณ 140 ช่อื สี รูปแบบการใช้มาตรฐานช่อื สใี นการกากบั สพี ้ืนหลงั มดี ังน้ี body { background-color: chocolate; }

244 ตารางที่ 7.1 แสดงตัวอย่างชือ่ สที ี่แสดงผลบนเว็บเบราเซอร์ ชื่อสี (Color Name) ตวั อย่างสที แี่ สดงผลบนเว็บเบราเซอร์ (Color) Black Blue BlueViolet Brown BurlyWood CadetBlue Chartreuse Chocolate Coral CornflowerBlue Crimson Cyan DarkBlue DarkCyan DarkGoldenRod DarkGreen DarkKhaki DarkMagenta DarkOliveGreen DarkOrange

245 มาตรฐานสอี ารจ์ ีบี ในการใช้ช่อื สี (Color name) อาจให้ค่าเฉดสี (Shades) ท่มี ีจานวนจากดั เพียง 140 ค่าสีเท่าน้ัน ผู้ออกแบบและพัฒนาเว็บสามารถเลือกใช้มาตรฐานสีอาร์จีบี (Red Green Blue: RGB) ในกรณีท่ตี ้องการค่าสที ่มี ากข้นึ ได้ โดยเวบ็ เบราเซอร์ทว่ั ไปรองรับมาตรฐานสี อาร์จีบี ซ่ึงสามารถแสดงผลค่าสไี ด้อย่างถูกต้อง ซ่ึงการใช้มาตรฐานสีอาร์จีบีจะใช้คาว่า rgb ตามด้วยค่าพารามิเตอร์เป็นเลขจานวนเตม็ (Integer: int) ระหว่าง 0 - 255 จานวน 3 ตัว คือ ค่าความเข้มข้นของสี (Intensity of the color) ประกอบไปด้วย ความเข้มข้นของสแี ดง สเี ขียว และสนี า้ เงิน โดยค่าสรี ะหว่าง 0 – 255 น้ัน มีความหมาย คือ ค่าจานวนเตม็ 0 หมายถึง ค่าความเข้มข้นของสเี ป็นศูนย์ และ ค่าจานวนเตม็ 255 หมายถึง ค่าความเข้มข้อ ของสีมีค่าสงู สดุ ดังน้ัน เม่ือมีการให้ค่าความเขม็ ข้นของแต่ละแม่สที ่แี ตกต่างกันจะเกิดการ ผสมสีข้ึนและเกิดเป็นสีท่มี ีให้เลือกใช้จานวนมาก เท่ากับ 2563 หรือ 16,777,216 สี น่ันเอง รปู แบบการใช้มาตรฐานสอี าร์จบี ีในการกากบั สพี ้ืนหลังมดี ังน้ี body { background-color: rgb(int red,int green,int blue); } ตัวอย่างการใช้มาตรฐานสอี าร์จบี ใี นการกากบั สพี ้ืนหลงั ให้เป็นสแี ดง body { background-color: rgb(255,0,0); } จากตัวอย่างสที ่แี สดงผล คือ สแี ดง เน่ืองจากมีการกาหนดค่า 255 ซ่ึงเป็นค่าความ เข้มข้นของสแี ดงท่มี ากท่สี ดุ (0-255) และมีการกาหนดค่าความเข้มข้นสเี ขยี วและสนี า้ เงิน ต่าท่สี ดุ คือ 0 ทาให้ค่าสแี ดงเกิดลักษณะเด่นข้นึ มากท่สี ดุ เวบ็ เบราเซอร์จึงแสดงผลสพี ้ืน หลังเป็นสแี ดง


Nutthapat Keawrattanapat

เอกสารประกอบการสอน รายวิชาหลักการออกแบบเว็บ
Share
Like this book? You can publish your book online for free in a few minutes!
Create your own flipbook

TOP SEARCH

business design fashion music health life sports home marketing children

RELATED PUBLICATIONS