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 lavanh9979, 2021-08-24 09:06:50

Description: ວິຊາ การออกแบบและพัฒนาเว็บไซต์เพื่อการจัดการสารสนเทศ

Search

Read the Text Version

CHAPTER 4: CSS3 131 Example /* css file: mystyle.css */ a[target=\"_blank\"] { font-size: 20px; color: salmon; background-color: bisque; } HTML5 <!doctype html> <html> <head> <link rel=\"stylesheet\" type=\"text/css\" href=\"mystyle.css\"> </head> <body> <p>Click to website: <a href=\"http://is.udru.ac.th\" target=\"_blank\">Information Science</a> </p> </body> </html> Result 9.3 การกาหนด Attribute Selector โดยใช้ชื่อแอตทริบิวต์และกาหนดค่าแอตทริบิวต์ รูปแบบสไตล์ชีตจะมีผลกับอิลิเมนต์ที่ระบุแอตทริบิวต์และค่าที่ตรงกับส่วนใดส่วนหน่ึงที่กาหนดใน สไตล์ชีต มรี ูปแบบการกาหนดดังน้ี Syntax [attribute~=\"value\"] {Property: Value; Property: Value; …} Example /* css file: mystyle.css */ [title~=\"flower\"] {border: 5px solid salmon;} [title~=\"green\"] {border: 5px solid palegreen;}

132 CHAPTER 4: CSS3 HTML5 <!doctype html> <html> <head> <link rel=\"stylesheet\" type=\"text/css\" href=\"mystyle.css\"> </head> <body> <img src=\"IMG_5584.jpg\" title=\"rose flower\" width=\"200\" height=\"125\"> <img src=\"IMG_5548.jpg\" title=\"pink flower\" width=\"200\" height=\"125\"> <img src=\"IMG_5259.jpg\" title=\"green leaf\" width=\"200\" height=\"125\"> </body> </html> Result 9.4 การกาหนด Attribute Selector โดยใช้ช่ือแอตทริบิวต์และกาหนดค่าแอตทริบิวต์ รูปแบบสไตล์ชีตจะมีผลกับแอตทริบิวต์ท่ีกาหนดค่าเป็นข้อความและมีคาข้ึนต้นตรงกับข้อความที่ กาหนดในสไตลช์ ตี ซง่ึ คาขน้ึ ตน้ จะต้องเว้นวรรคด้วยขดี \"-\" เสมอ มรี ูปแบบการกาหนดดังนี้ Syntax [attribute|=\"value\"] {Property: Value; Property: Value; …} Example /* css file: mystyle.css */ [class|=\"highlight\"] {background-color: palegreen;}

CHAPTER 4: CSS3 133 HTML5 <!doctype html> <html> <head> <link rel=\"stylesheet\" type=\"text/css\" href=\"mystyle.css\"> </head> <body> <h1 class=\"highlight-header\">Attribute Selector</h1> <p class=\"highlight-text\">Information science is a field primarily concerned with the analysis, collection, classification, manipulation, storage, retrieval, movement, dissemination, and protection of information.</p> <p>Information science is a field primarily concerned with the analysis, collection, classification, manipulation, storage, retrieval, movement, dissemination, and protection of information.</p> </body> </html> Result 9.5 การกาหนด Attribute Selector โดยใช้ชื่อแอตทริบิวต์และกาหนดค่าแอตทริบิวต์ รูปแบบสไตล์ชีตจะมีผลกับแอตทริบิวต์ท่ีกาหนดค่าเป็นข้อความและมีคาข้ึนต้นตรงกับข้อความที่ กาหนดในสไตลช์ ตี ซึง่ คาขน้ึ ต้นไมจ่ าเป็นตอ้ งเวน้ วรรค มีรูปแบบการกาหนดดังน้ี Syntax [attribute^=\"value\"] {Property: Value; Property: Value; …} Example /* css file: mystyle.css */ [class^=\"highlight\"] {background-color: palegreen;}

134 CHAPTER 4: CSS3 HTML5 <!doctype html> <html> <head> <link rel=\"stylesheet\" type=\"text/css\" href=\"mystyle.css\"> </head> <body> <h1 class=\"highlight-header\">Attribute Selector</h1> <p class=\"highlight-text\">Information science is a field primarily concerned with the analysis, collection, classification, manipulation, storage, retrieval, movement, dissemination, and protection of information.</p> <p class=\"highlightshorttext\">Information science is a field primarily concerned with the analysis, collection, classification, manipulation, storage, retrieval, movement, dissemination, and protection of information.</p> </body> </html> Result 9.6 การกาหนด Attribute Selector โดยใช้ชื่อแอตทริบิวต์และกาหนดค่าแอตทริบิวต์ รูปแบบสไตล์ชีตจะมีผลกับแอตทริบิวต์ท่ีกาหนดค่าเป็นข้อความและมีคา ลงท้ายตรงกับข้อความท่ี กาหนดในสไตล์ชตี ซ่งึ คาลงท้ายไมจ่ าเปน็ ตอ้ งเวน้ วรรค มรี ปู แบบการกาหนดดังนี้ Syntax [attribute$=\"value\"] {Property: Value; Property: Value; …} Example /* css file: mystyle.css */ [class$=\"text\"] {background-color: palegreen;}

CHAPTER 4: CSS3 135 HTML5 <!doctype html> <html> <head> <link rel=\"stylesheet\" type=\"text/css\" href=\"mystyle.css\"> </head> <body> <h1 class=\"highlight-header\">Attribute Selector</h1> <p class=\"highlight-text\">Information science is a field primarily concerned with the analysis, collection, classification, manipulation, storage, retrieval, movement, dissemination, and protection of information.</p> <p class=\"highlightshorttext\">Information science is a field primarily concerned with the analysis, collection, classification, manipulation, storage, retrieval, movement, dissemination, and protection of information.</p> </body> </html> Result 9.7 การกาหนด Attribute Selector โดยใช้ช่ือแอตทริบิวต์และกาหนดค่าแอตทริบิวต์ รูปแบบสไตล์ชีตจะมีผลกับแอตทริบิวต์ท่ีกาหนดค่าเป็นข้อความและมีคา บางส่วนตรงกับข้อความท่ี กาหนดในสไตล์ชีต ซงึ่ คาลงทา้ ยไม่จาเป็นต้องเวน้ วรรค มีรปู แบบการกาหนดดงั นี้ Syntax [attribute*=\"value\"] {Property: Value; Property: Value; …} Example /* css file: mystyle.css */ [class*=\"high\"] {background-color: palegreen;}

136 CHAPTER 4: CSS3 HTML5 <!doctype html> <html> <head> <link rel=\"stylesheet\" type=\"text/css\" href=\"mystyle.css\"> </head> <body> <h1 class=\"highlight-header\">Attribute Selector</h1> <p class=\"highlight-text\">Information science is a field primarily concerned with the analysis, collection, classification, manipulation, storage, retrieval, movement, dissemination, and protection of information.</p> <p class=\"highlightshorttext\">Information science is a field primarily concerned with the analysis, collection, classification, manipulation, storage, retrieval, movement, dissemination, and protection of information.</p> </body> </html> Result 10. Pseudo-Classes การกาหนด Selectors ในรูปแบบของการแสดงผล โดยรูปแบบการแสดงผลจะมีการ เปล่ียนแปลงสถานะเมื่อเกิดการทางานบางอย่าง เช่น คลิกเมาส์ลงบนรูปแบบ วางเมาส์เหนือรปู แบบ รปู แบบหลงั จากคลิกเมาส์ เปน็ ตน้ Syntax selector:pseudo-class {Property: Value; Property: Value; …} 10.1 การกาหนด Pseudo-Classes สาหรับจัดรูปแบบของลิงก์ โดยใช้อิลิเมนต์ \"<a>…</a>\" ประกอบด้วย 4 สถานะ ได้แก่ รูปแบบของลิงก์ที่ยังไม่ถูกคลิก (link) รูปแบบของลิงก์ ขณะวางเมาส์เหนือลิงก์ (hover) รูปแบบของลิงก์เม่ือกาลังคลิกลิงก์ (active) และรูปแบบของลิงก์ เมื่อคลิกลิงก์แลว้ (visited) มรี ปู แบบการกาหนดดังนี้

CHAPTER 4: CSS3 137 Example /* css file: mystyle.css */ a:link {color: blue;} a:visited {color: cadetblue;} a:hover {color: salmon;} a:active {color: red;} HTML5 <!doctype html> <html> <head> <link rel=\"stylesheet\" type=\"text/css\" href=\"mystyle.css\"> </head> <body> <p>link: <a href=\"http://is.udru.ac.th\">Information Science</a></p> <p>visited: <a href=\"http://is.udru.ac.th\">Information Science</a></p> <p>hover: <a href=\"http://is.udru.ac.th\">Information Science</a></p> <p>active: <a href=\"http://is.udru.ac.th\">Information Science</a></p> </body> </html> Result 10.2 การกาหนด Pseudo-Classes ร่วมกับคลาส (Class) เพ่ือให้สามารถควบคุมรูปแบบ เฉพาะอิลิเมนต์ในตาแหน่งท่ีต้องการได้ เนือ่ งจากการกาหนด Pseudo-Classes อาจมีผลกบั อิลิเมนต์ ในทกุ ตาแหนง่ มรี ปู แบบการกาหนดดงั น้ี Syntax selector.classname:pseudo-class {Property: Value; Property: Value; …} Example /* css file: mystyle.css */ a.highlight:hover {color: red;}

138 CHAPTER 4: CSS3 HTML5 <!doctype html> <html> <head> <link rel=\"stylesheet\" type=\"text/css\" href=\"mystyle.css\"> </head> <body> <p>hover: <a class=\"highlight\" href=\"http://is.udru.ac.th\">Information Website</a> </p> </body> </html> Result 10.3 การกาหนด Pseudo-Classes ร่วมกับอิลิเมนต์ \"div\" เพื่อให้รูปแบบมีการ เปลยี่ นแปลงเมือ่ วางเมาสเ์ หนืออลิ ิเมนต์ \"div\" มรี ปู แบบการกาหนดดงั น้ี Syntax div:pseudo-class {Property: Value; Property: Value; …} Example /* css file: mystyle.css */ div { background-color: cadetblue; text-align: center; color: white; padding: 20px; } div:hover {background-color: salmon;} HTML5 <!doctype html> <html> <head> <link rel=\"stylesheet\" type=\"text/css\" href=\"mystyle.css\"> </head> <body> <div>Information Science</div> </body> </html>

CHAPTER 4: CSS3 139 Result 11. Pseudo-Elements การกาหนด Selectors ในรูปแบบของการแสดงผล โดยรปู แบบจะมีผลเฉพาะตาแหน่งท่ี กาหนดในอิลิเมนต์ 11.1 first-child เป็นการกาหนด Pseudo-Elements โดยจะกาหนดรูปแบบให้กับอิลิ เมนต์แรกทีพ่ บในเว็บเพจเทา่ น้ัน ตามอลิ ิเมนตท์ ่ใี ชเ้ ป็น Selector มรี ูปแบบการกาหนดดังน้ี Syntax element:first-child {Property: Value; Property: Value; …} Example /* css file: mystyle.css */ p:first-child {color: white; background-color: salmon;} HTML5 <!doctype html> <html> <head> <link rel=\"stylesheet\" type=\"text/css\" href=\"mystyle.css\"> </head> <body> <p>Information Science</p> รปู แบบมผี ลเฉพาะอิลเิ มนต์แรกทพ่ี บ <p>Information Science</p> <p>Information Science</p> </body> </html> Result

140 CHAPTER 4: CSS3 11.2 first-letter เป็นการกาหนด Pseudo-Elements โดยจะกาหนดรูปแบบให้กับ ตวั อักษรท่ปี รากฏในอลิ เิ มนต์เฉพาะตัวอักษรตัวแรกเท่านนั้ หรอื เป็นการเน้นเฉพาะตัวอักษรตวั แรก มี รปู แบบการกาหนดดังนี้ Syntax element:first-letter {Property: Value; Property: Value; …} Example /* css file: mystyle.css */ p:first-letter {color: white; background-color: salmon;} HTML5 <!doctype html> <html> <head> <link rel=\"stylesheet\" type=\"text/css\" href=\"mystyle.css\"> </head> <body> <p>Information Science</p> รปู แบบมผี ลเฉพาะตวั อกั ษร I เทา่ น้นั <p>Information Science</p> <p>Information Science</p> </body> </html> Result 11.3 first-line เปน็ การกาหนด Pseudo-Elements โดยจะกาหนดรูปแบบใหก้ บั ขอ้ ความ ท่ีปรากฏในอิลิเมนต์เฉพาะบรรทัดแรกเท่าน้ัน หรือเป็นการเน้นเฉพาะบรรทัดแรกของย่อหน้า มี รูปแบบการกาหนดดงั น้ี Syntax element:first-line {Property: Value; Property: Value; …}

CHAPTER 4: CSS3 141 Example /* css file: mystyle.css */ p:first-line {color: white; background-color: salmon;} HTML5 <!doctype html> <html> <head> <link rel=\"stylesheet\" type=\"text/css\" href=\"mystyle.css\"> </head> <body> <p>Information Science<br>Udon-Thani Rajabhat University</p> <p>Information Science<br>Udon-Thani Rajabhat University</p> <p>Information Science<br>Udon-Thani Rajabhat University</p> </body> </html> Result 12. Grouping Selectors การกาหนด Selectors ในรูปแบบกลุ่มอิลิเมนต์ (Grouping) เป็นการกาหนดรูปแบบ ด้วยสไตล์ชีต โดยใช้ช่ืออิลิเมนต์หรือช่ือแท็กใน HTML5 เป็น Selector ซ่ึงสามารถกาหนด Declarationsรูปแบบเดียวกันให้กับอิลิเมนต์ได้มากกว่า 1 อิลิเมนต์ ซึ่งจะเป็น Selector ที่มี คณุ สมบตั ิสบื ทอด โดยการใชเ้ ครอื่ งหมายคอมมา (Comma) \",\" คน่ั ระหว่างชื่ออิลิเมนต์ มีรูปแบบการ กาหนด Selector ดังน้ี Syntax element1, element2, element3, … {Property: Value; Property: Value; …} Example /* css file: mystyle.css */ h1, h2, h3, h4, h5, h6 {font-weight: bold; color: green;}

142 CHAPTER 4: CSS3 HTML5 <!doctype html> <html> <head> <link rel=\"stylesheet\" type=\"text/css\" href=\"mystyle.css\"> </head> <body> <h1>This is Heading 1</h1> <h2>This is Heading 2</h2> <h3>This is Heading 3</h3> <h4>This is Heading 4</h4> <h5>This is Heading 5</h5> <h6>This is Heading 6</h6> </body> </html> Result คาส่ังแทรกความคิดเหน็ คาสั่งแทรกความคิดเห็น (Comment) ลงในสไตล์ชีต โดยข้อความจะอยู่ภายใต้เคร่ืองหมาย /* … */ ซึ่งข้อความจะไม่มีผลกับรูปแบบท่ีเรียกใช้ในเว็บเพจ แต่อาจต้องการให้มีข้อความอยู่ใน สไตล์ชีต เช่น ข้อความสาหรับเตือนความจา หรือใช้สาหรับซ่อน Selector ที่ไม่ต้องการให้ทางาน ชว่ั คราว เปน็ ตน้ มรี ูปแบบการใช้งานดงั น้ี Example /* this id a comment */ .imgbox {width: 200px; height: 200px; border: solid 1px red;} /* p.textcenter {text-align: center; color: blue;} p.textlarge { font-size: 28px; /*

CHAPTER 4: CSS3 143 คา่ สสี าหรับสไตลช์ ีต ค่าสีสาหรับสไตลช์ ตี (Color) เป็นการกาหนดสีให้กับรูปแบบทต่ี ้องการ เพื่อแสดงผลตามค่าสี ทกี่ าหนด และเปน็ ค่าสที ่ีโปรแกรมแสดงผลเวบ็ รองรบั โดยค่าสีท่สี ามารถใช้งานได้กบั เอกสาร HTML5 และเอกสารสไตล์ชีต สามารถกาหนดเป็นชื่อของสี (Color Name) กาหนดเป็นรหัสสีเลขฐานสิบหก (Hex Code) และกาหนดเป็นรหัสสีในรูปแบบค่าสี RGB (Red Green Blue) ตัวอย่างค่าสีท่ีนิยมใช้ งานในเว็บเพจ โดยแบง่ ตามกลุ่มโทนสหี ลัก มดี ังนี้ (RapidTables, n.d.: 1) ตารางที่ 4.1 โทนสีแดง (Red Colors Tone) Color HTML / CSS Hex Code Decimal Code Color Name #RRGGBB (R,G,B) lightsalmon #FFA07A rgb(255,160,122) rgb(250,128,114) salmon #FA8072 rgb(233,150,122) rgb(240,128,128) darksalmon #E9967A rgb(205,92,92) rgb(220,20,60) lightcoral #F08080 rgb(178,34,34) rgb(255,0,0) indianred #CD5C5C rgb(139,0,0) crimson #DC143C firebrick #B22222 red #FF0000 darkred #8B0000 ตารางที่ 4.2 โทนสีส้ม (Orange Colors Tone) Color HTML / CSS Hex Code Decimal Code Color Name #RRGGBB (R,G,B) coral #FF7F50 rgb(255,127,80) rgb(255,99,71) tomato #FF6347 rgb(255,69,0) rgb(255,215,0) orangered #FF4500 rgb(255,165,0) rgb(255,140,0) gold #FFD700 orange #FFA500 darkorange #FF8C00

144 CHAPTER 4: CSS3 ตารางท่ี 4.3 โทนสีเหลือง (Yellow Colors Tone) Color HTML / CSS Hex Code Decimal Code Color Name #RRGGBB (R,G,B) lightyellow #FFFFE0 rgb(255,255,224) rgb(255,250,205) lemonchiffon #FFFACD rgb(250,250,210) rgb(255,239,213) lightgoldenrodyellow #FAFAD2 rgb(255,228,181) rgb(255,218,185) papayawhip #FFEFD5 rgb(238,232,170) rgb(240,230,140) moccasin #FFE4B5 rgb(189,183,107) rgb(255,255,0) peachpuff #FFDAB9 palegoldenrod #EEE8AA khaki #F0E68C darkkhaki #BDB76B yellow #FFFF00 ตารางท่ี 4.4 โทนสีเขียว (Green Colors Tone) Color HTML / CSS Hex Code Decimal Code Color Name #RRGGBB (R,G,B) lawngreen #7CFC00 rgb(124,252,0) rgb(127,255,0) chartreuse #7FFF00 rgb(50,205,50) rgb(0.255.0) limegreen #32CD32 rgb(34,139,34) rgb(0,128,0) lime #00FF00 rgb(0,100,0) rgb(173,255,47) forestgreen #228B22 rgb(154,205,50) rgb(0,255,127) green #008000 rgb(0,250,154) darkgreen #006400 greenyellow #ADFF2F yellowgreen #9ACD32 springgreen #00FF7F mediumspringgreen #00FA9A

CHAPTER 4: CSS3 145 Color HTML / CSS Hex Code Decimal Code Color Name #RRGGBB (R,G,B) lightgreen #90EE90 palegreen #98FB98 rgb(144,238,144) darkseagreen #8FBC8F rgb(152,251,152) mediumseagreen #3CB371 rgb(143,188,143) seagreen #2E8B57 rgb(60,179,113) olive #808000 rgb(46,139,87) darkolivegreen #556B2F rgb(128,128,0) olivedrab #6B8E23 rgb(85,107,47) rgb(107,142,35) ตารางท่ี 4.5 โทนสีฟา้ (Cyan Colors Tone) Color HTML / CSS Hex Code Decimal Code Color Name #RRGGBB (R,G,B) lightcyan #E0FFFF rgb(224,255,255) rgb(0,255,255) cyan #00FFFF rgb(0,255,255) rgb(127,255,212) aqua #00FFFF rgb(102,205,170) rgb(175,238,238) aquamarine #7FFFD4 rgb(64,224,208) rgb(72,209,204) mediumaquamarine #66CDAA rgb(0,206,209) rgb(32,178,170) paleturquoise #AFEEEE rgb(95,158,160) rgb(0,139,139) turquoise #40E0D0 rgb(0,128,128) mediumturquoise #48D1CC darkturquoise #00CED1 lightseagreen #20B2AA cadetblue #5F9EA0 darkcyan #008B8B teal #008080

146 CHAPTER 4: CSS3 ตารางที่ 4.6 โทนสีนา้ เงิน (Blue Colors Tone) Color HTML / CSS Hex Code Decimal Code Color Name #RRGGBB (R,G,B) powderblue #B0E0E6 rgb(176,224,230) rgb(173,216,230) lightblue #ADD8E6 rgb(135,206,250) rgb(135,206,235) lightskyblue #87CEFA rgb(0,191,255) rgb(176,196,222) skyblue #87CEEB rgb(30,144,255) rgb(100,149,237) deepskyblue #00BFFF rgb(70,130,180) rgb(65,105,225) lightsteelblue #B0C4DE rgb(0,0,255) rgb(0,0,205) dodgerblue #1E90FF rgb(0,0,139) rgb(0,0,128) cornflowerblue #6495ED rgb(25,25,112) rgb(123,104,238) steelblue #4682B4 rgb(106,90,205) rgb(72,61,139) royalblue #4169E1 blue #0000FF mediumblue #0000CD darkblue #00008B navy #000080 midnightblue #191970 mediumslateblue #7B68EE slateblue #6A5ACD darkslateblue #483D8B

CHAPTER 4: CSS3 147 ตารางที่ 4.7 โทนสีมว่ ง (Purple Colors Tone) Color HTML / CSS Hex Code Decimal Code Color Name #RRGGBB (R,G,B) lavender #E6E6FA rgb(230,230,250) rgb(216,191,216) thistle #D8BFD8 rgb(221,160,221) rgb(238,130,238) plum #DDA0DD rgb(218,112,214) rgb(255,0,255) violet #EE82EE rgb(255,0,255) rgb(186,85,211) orchid #DA70D6 rgb(147,112,219) rgb(138,43,226) fuchsia #FF00FF rgb(148,0,211) rgb(153,50,204) magenta #FF00FF rgb(139,0,139) rgb(128,0,128) mediumorchid #BA55D3 rgb(75,0,130) mediumpurple #9370DB blueviolet #8A2BE2 darkviolet #9400D3 darkorchid #9932CC darkmagenta #8B008B purple #800080 indigo #4B0082 ตารางท่ี 4.8 โทนสีชมพู (Pink Colors Tone) Color HTML / CSS Hex Code Decimal Code Color Name #RRGGBB (R,G,B) pink #FFC0CB rgb(255,192,203) rgb(255,182,193) lightpink #FFB6C1 rgb(255,105,180) rgb(255,20,147) hotpink #FF69B4 rgb(219,112,147) rgb(199,21,133) deeppink #FF1493 palevioletred #DB7093 mediumvioletred #C71585

148 CHAPTER 4: CSS3 ตารางที่ 4.9 โทนสีขาว (White Colors Tone) Color HTML / CSS Hex Code Decimal Code Color Name #RRGGBB (R,G,B) white #FFFFFF rgb(255,255,255) rgb(255,250,250) snow #FFFAFA rgb(240,255,240) rgb(245,255,250) honeydew #F0FFF0 rgb(240,255,255) rgb(240,248,255) mintcream #F5FFFA rgb(248,248,255) rgb(245,245,245) azure #F0FFFF rgb(255,245,238) rgb(245,245,220) aliceblue #F0F8FF rgb(253,245,230) rgb(255,250,240) ghostwhite #F8F8FF rgb(255,255,240) rgb(250,235,215) whitesmoke #F5F5F5 rgb(250,240,230) rgb(255,240,245) seashell #FFF5EE rgb(255,228,225) beige #F5F5DC oldlace #FDF5E6 floralwhite #FFFAF0 ivory #FFFFF0 antiquewhite #FAEBD7 linen #FAF0E6 lavenderblush #FFF0F5 mistyrose #FFE4E1 ตารางที่ 4.10 โทนสีเทา (Gray Colors Tone) Color HTML / CSS Hex Code Decimal Code Color Name #RRGGBB (R,G,B) gainsboro #DCDCDC rgb(220,220,220) rgb(211,211,211) lightgray #D3D3D3 rgb(192,192,192) rgb(169,169,169) silver #C0C0C0 darkgray #A9A9A9

CHAPTER 4: CSS3 149 Color HTML / CSS Hex Code Decimal Code Color Name #RRGGBB (R,G,B) gray #808080 dimgray #696969 rgb(128,128,128) lightslategray #778899 rgb(105,105,105) slategray #708090 rgb(119,136,153) darkslategray #2F4F4F rgb(112,128,144) black #000000 rgb(47,79,79) rgb(0,0,0) ตารางท่ี 4.11 โทนสีนา้ ตาล (Brown Colors Tone) Color HTML / CSS Hex Code Decimal Code Color Name #RRGGBB (R,G,B) cornsilk #FFF8DC rgb(255,248,220) rgb(255,235,205) blanchedalmond #FFEBCD rgb(255,228,196) rgb(255,222,173) bisque #FFE4C4 rgb(245,222,179) rgb(222,184,135) navajowhite #FFDEAD rgb(210,180,140) rgb(188,143,143) wheat #F5DEB3 rgb(244,164,96) rgb(218,165,32) burlywood #DEB887 rgb(205,133,63) rgb(210,105,30) tan #D2B48C rgb(139,69,19) rgb(160,82,45) rosybrown #BC8F8F rgb(165,42,42) rgb(128,0,0) sandybrown #F4A460 goldenrod #DAA520 peru #CD853F chocolate #D2691E saddlebrown #8B4513 sienna #A0522D brown #A52A2A maroon #800000

150 CHAPTER 4: CSS3 หน่วยวัดค่าสาหรับสไตลช์ ตี หน่วยวัดค่าสาหรับสไตล์ชีต (Units) เป็นการกาหนดค่าให้กับคุณสมบัติที่มีการกาหนดขนาด หรือความยาว ซึ่งหน่วยวัดแต่ละประเภทจะมีขนาดและรูปแบบการนาไปใช้งานท่ีแตกต่างกัน โดย แบ่งหน่วยวัดออกเป็น 2 ประเภท มีรายละเอียดดังนี้ (สุรเชษฐ์ วงศ์ชัยพรพงษ์, 2549: 34; W3Schools, 1999e: 1) 1. Absolute Length หน่วยวัดค่าสาหรับกาหนดค่าคงที่ (Absolute) เมื่อกาหนดค่าจะได้ขนาดตามที่ระบุจริง เหมาะสาหรับใช้เป็นหน่วยวัดในการออกแบบเค้าโครงสาหรับพิมพ์เอกสารเว็บ ซึ่งจะได้ขนาดที่ แน่นอน แต่ไม่เหมาะสาหรับการออกแบบเพ่ือแสดงผลผ่านหน้าจอ เน่ืองจากปัจจุบันมีหน้าจอ แสดงผลท่ีมีขนาดแตกต่างกัน การกาหนดขนาดคงที่อาจเกิดปัญหาในการแสดงผลได้ มีหน่วยวัดดัง ตารางที่ 4.12 ตารางท่ี 4.12 หนว่ ยวัดค่าสาหรับกาหนดคา่ คงท่ี Unit Descriptions mm มลิ ลเิ มตร (millimeters) เชน่ 5mm 10mm เปน็ ต้น cm เซนตเิ มตร (centimeters) เช่น 0.5cm 1cm เปน็ ตน้ in น้ิว (inches) โดยขนาด 1in จะมีขนาดเท่ากับ 96px หรือเท่ากับ 2.54cm เช่น 0.5in 1in เป็นต้น pt พอยท์ (points) โดยขนาด 1pt จะมขี นาดเทา่ กบั 1/72 ของ 1in เชน่ 5pt 10pt เป็นต้น pc พิกา (picas) โดยขนาด 1pc จะมีขนาดเทา่ กับ 12pt เช่น 2pc 6pc เปน็ ตน้ px พิกเซล (pixel) โดยขนาด 1px จะมีขนาดเทา่ กบั 1/96 ของ 1in เชน่ 16px 22px เป็นตน้ 2. Relative Length หน่วยวัดค่าสาหรับกาหนดค่าที่ไม่คงที่ (Relative) เมื่อกาหนดค่าจะได้ขนาดตาม ความสัมพันธ์กับการแสดงผล การกาหนดค่าจึงมีความยืดหยุ่นต่อการใช้งาน เหมาะสาหรับการ ออกแบบเพ่ือแสดงผลผา่ นหนา้ จอท่ีมขี นาดแตกต่างกนั มหี นว่ ยวัดดงั ตารางท่ี 4.13

CHAPTER 4: CSS3 151 ตารางที่ 4.13 หนว่ ยวดั ค่าสาหรบั กาหนดค่าไม่คงที่ Unit Descriptions em emphasize โดยขนาด 1em จะมีขนาดเท่ากับ 100% หรือ 1 เท่า ของขนาดตัวอักษร ตามค่าเร่ิมต้นของ Web Browser ซึ่ง 1em จะมีขนาดที่แตกต่างกันเมื่อแสดงผลใน Web Brower ท่ตี ่างกนั นยิ มใชส้ าหรบั กาหนดขนาดตัวอักษร เช่น 1em 2em เปน็ ตน้ ex x-height ขนาดที่มีความสัมพนั ธ์กบั ความสูงของแบบอักษรปัจจบุ นั ch ch ขนาดทมี่ คี วามสัมพันธก์ ับขนาดความกวา้ งของแบบอกั ษรปจั จบุ ัน rem root element ขนาดทมี่ คี วามสมั พนั ธก์ ับขนาดของตัวอักษรหลกั vw viewport width ขนาดความกว้างท้ังหมดที่สามารถมองเห็นได้ในหน้าจอโปรแกรม แสดงผลเว็บ โดยคดิ เปน็ รอ้ ยละ (%) vh viewport height ขนาดความสูงท้ังหมดที่สามารถมองเห็นได้ในหน้าจอโปรแกรม แสดงผลเว็บ โดยคิดเปน็ ร้อยละ (%) vmin viewport min ขนาด viewport ทีต่ า่ ทสี่ ดุ โดยคิดเป็นรอ้ ยละ (%) vmax viewport max ขนาด viewport ที่สงู ทีส่ ุด โดยคิดเป็นร้อยละ (%) % ร้อยละ (percentage) นิยมใช้สาหรับกาหนดขนาดความกว้างและความสูงของพื้นท่ี หรอื เคา้ โครงเว็บเพจ เชน่ 80% 100% เปน็ ตน้ สรุป การจัดรูปแบบเว็บเพจให้มีความสวยงาม เหมาะสม และมีมาตรฐาน ถือเป็นสิ่งสาคัญในการ ออกแบบและพัฒนาเว็บไซต์ เนื่องจากการจัดรูปแบบที่ดีจะส่งผลให้การแสดงผลและการใช้งาน เว็บไซต์มีประสิทธิภาพมากยิ่งขึ้น และยังมีผลต่อความนิยมของผู้เข้าชม การจัดรูปแบบเว็บเพจด้วย HTML5 เพียงอย่างเดียว อาจได้รูปแบบที่ไม่สมบูรณ์เท่าที่ควร การนา CSS3 (Cascading Style Sheets 3) มาใช้จัดรูปแบบและควบคุมการแสดงผลองคป์ ระกอบต่าง ๆ ของเว็บเพจ จงึ เป็นสง่ิ จาเป็น อย่างยิ่ง ซึ่งจะช่วยให้การแสดงผลเว็บเพจมีความสมบูรณ์ พร้อมใช้งาน ดังนั้น นักพัฒนาเว็บไซต์ จะต้องศึกษาวิธีการใช้งาน CSS3 ตามมาตรฐานของ W3C รวมถึงรูปแบบการเขียน การเรียกใช้งาน การกาหนด Selectors ประเภทต่าง ๆ และศึกษาหน่วยวดั ค่าท่ีใช้งานกับสไตล์ชตี ให้เกิดความเขา้ ใจ เพ่อื ใหส้ ามารถสรา้ งสไตลช์ ตี ได้อย่างถูกต้อง และนามาใชง้ านในเว็บเพจไดอ้ ย่างเหมาะสม

152 CHAPTER 4: CSS3

เอกสารอา้ งองิ พิรพร หมุนสนิท และอัจจิมา เล้ียงอยู่. (2553). การพัฒนาเว็บไซตด์ ้วย XHTML, CSS และ Javascript. กรงุ เทพฯ: เคทีพี. สรุ เชษฐ์ วงศ์ชยั พรพงษ์. (2549). เทคนิคการประยกุ ต์ใช้งานสไตล์ชที (CSS). กรงุ เทพฯ: เคทพี ี คอมพ์ แอนด์ คอนซลั ท์. Krauss. (2015). File: CSS3 taxonomy and status-v2.png. Retrieved May 2, 2017, from https://commons.wikimedia.org/wiki/File:CSS3_taxonomy_and_status- v2.png. RapidTables. (n.d.). HTML Color Codes. Retrieved February 20, 2018, from https://www.rapidtables.com/web/color/html-color-codes.html. W3Schools. (1999e). CSS Units. Retrieved December 23, 2016, from https://www.w3schools.com/cssref/css_units.asp.



บทที่ 5 คุณสมบัติและการกาหนดคา่ CSS3 การจัดรูปแบบและควบคุมการแสดงผลให้กับเว็บเพจด้วย CSS3 ผู้ใช้จะต้องทราบถึง คุณสมบัติ (Properties) และการกาหนดค่า (Values) ให้กับคุณสมบัติ เพื่อให้สามารถนารูปแบบไป ใช้กับอิลิเมนต์ใน HTML5 ได้อย่างถูกต้อง เหมาะสม ไม่ว่าจะเป็น รูปแบบพ้ืนหลัง รูปแบบเส้นขอบ รูปแบบตัวอักษรและข้อความ การจัดวางตาแหน่งของวัตถุ การกาหนดขนาด การกาหนดระยะห่าง และการกาหนดรูปแบบอ่ืน ๆ ซึ่งจะช่วยให้เว็บเพจมีความสมบูรณ์มากย่ิงขึ้น โดยในแต่ละคุณสมบัติ จะมีความสามารถในการกาหนดรูปแบบและมีการกาหนดค่าท่ีแตกต่างกัน รวมถึงการใช้หน่วยวัดค่า จะต้องมีความเหมาะสมกับรูปแบบท่ีกาหนด เน้ือหาในบทน้ี จะอธิบายถึงการใช้งานคุณสมบัติและ การกาหนดค่าให้กับคุณสมบัติ พร้อมกับแสดงตัวอย่างผลลัพธ์ที่ได้จากการกาหนดคุณสมบัติต่าง ๆ ของ CSS3 คณุ สมบัติพน้ื หลงั คุณสมบัติพ้ืนหลัง (Background Properties) คือ คุณสมบัติท่ีใช้สาหรับกาหนดรูปแบบพื้น หลังให้กับเว็บเพจหรือกาหนดรูปแบบพ้ืนหลังให้กับอิลิเมนต์ต่าง ๆ ซึ่งจะส่งผลให้เว็บเพจมีความ สวยงาม ดึงดูดความสนใจของผใู้ ช้ได้มากย่ิงขึ้น เช่น การกาหนดสีพื้นหลงั การกาหนดพ้ืนหลังแบบไล่ เฉดสี การกาหนดภาพพน้ื หลงั เป็นตน้ มรี ายละเอียดการกาหนดคุณสมบัติ ดงั น้ี 1. Background Color การกาหนดสีพื้นหลัง โดยการประกาศคุณสมบัติ \"background-color\" ให้กับสไตล์ชีต รูปแบบจะส่งผลให้อิลิเมนต์แสดงสีพ้ืนหลังตามท่ีกาหนด กาหนดค่าเป็นค่าสี (color) ประกอบด้วย ช่ือสี รหัสสีเลขฐานสิบหก หรือค่าสีรูปแบบ RGB เช่น background-color: green; background- color: #32CD32; background-color: rgb(150,205,150); เป็นต้น กาหนดเป็นค่าความโปร่งใส (transparent) กาหนดเป็นค่าแรกเร่ิม (initial) และกาหนดเป็นค่าสืบทอด (inherit) มีรูปแบบการ กาหนดคณุ สมบตั แิ ละกาหนดคา่ ดงั นี้ Syntax background-color: color|transparent|initial|inherit;

156 CHAPTER 5: CSS3 PROPERTIES&VALUE Example /* css file: mystyle.css */ body {background-color: rgb(220,255,240);} h1 {background-color: #FFDAB9;} p {background-color: transparent;} /* default */ div {background-color: lemonchiffon;} HTML5 <!doctype html> <html> <head> <link rel=\"stylesheet\" type=\"text/css\" href=\"mystyle.css\"> </head> <body> <h1>Background Color</h1> <div> <p>Information science is a field primarily concerned with the analysis, collection, classification, manipulation, storage, retrieval, movement, dissemination, and protection of information.</p> </div> <p>Information science is a field primarily concerned with the analysis, collection, classification, manipulation, storage, retrieval, movement, dissemination, and protection of information.</p> </body> </html> Result 2. Background Image การกาหนดภาพพนื้ หลัง โดยการประกาศคณุ สมบตั ิ \"background-image\" ให้กบั สไตล์ชีต รูปแบบจะส่งผลให้อิลิเมนต์แสดงภาพพ้ืนหลังตามที่กาหนด กาหนดค่าเป็นตาแหน่งจัดเก็บภาพ (url) กาหนดให้ไม่แสดงภาพพ้ืนหลัง (none) กาหนดเป็นค่าแรกเร่ิม (initial) และกาหนดเป็นค่าสืบทอด (inherit) มรี ูปแบบการกาหนดคณุ สมบัติและกาหนดคา่ ดังน้ี

CHAPTER 5: CSS3 PROPERTIES&VALUE 157 Syntax background-image: url|none|initial|inherit; Example /* css file: mystyle.css */ body {background-image: url(\"images/wallpaper.jpg\");} HTML5 <!doctype html> <html> <head> <link rel=\"stylesheet\" type=\"text/css\" href=\"mystyle.css\"> </head> <body> <h1>Background Image</h1> <p>Information science is a field primarily concerned with the analysis, collection, classification, manipulation, storage, retrieval, movement, dissemination, and protection of information.</p> </body> </html> Result การใช้งานภาพเป็นพื้นหลังเว็บเพจ จะต้องใช้ภาพท่ีไม่ส่งผลกระทบต่อข้อความในเว็บเพจ อาจใช้ภาพที่มสี ีโทนอ่อน และมลี วดลายไม่เดน่ ชดั มากจนเกินไป

158 CHAPTER 5: CSS3 PROPERTIES&VALUE 3. Background Repeat การแสดงซ้าภาพพื้นหลัง ในกรณีท่ีภาพมีขนาดเล็กไม่เต็มหน้าจอ โดยการประกาศ คุณสมบัติ \"background-repeat\" ให้กับสไตล์ชีต รูปแบบจะแสดงภาพวนซ้าเต็มหน้าจอ แสดงภาพ วนซา้ ตามแนวที่กาหนด หรอื ไมแ่ สดงภาพวนซ้า กาหนดคา่ เปน็ คาสั่งการวนซ้าภาพ ประกอบด้วย วน ซ้าภาพ (repeat) วนซ้าภาพเฉพาะแนวนอน (repeat-x) วนซ้าภาพเฉพาะแนวต้ัง (repeat-y) ไม่มี การวนซ้าภาพ (no-repeat) กระจายภาพอย่างสม่าเสมอโดยใช้ช่องว่าง (space) กระจายภาพอย่าง สม่าเสมอโดยการบีบภาพหรือยืดภาพให้เต็มพื้นที่ (round) กาหนดเป็นค่าแรกเร่ิม (initial) และ กาหนดเป็นคา่ สืบทอด (inherit) มรี ูปแบบการกาหนดคณุ สมบตั ิและกาหนดคา่ ดังนี้ Syntax background-repeat: repeat|repeat-x|repeat-y|no-repeat|space|round|initial|inherit; Example /* css file: mystyle.css */ body { background-image: url(\"images/wallpaper.jpg\"); background-repeat: repeat; /* default */ } Result การวนซา้ ภาพ (repeat repeat-x repeat-y) ภาพจะถกู วนซา้ จนเต็มพื้นหลังหรือเต็มพ้ืนท่ีท่ี กาหนด โดยจะไม่คานึงถึงการตัดภาพ ซงึ่ จะสง่ ผลให้ภาพท่ีวนซ้าไปถึงดา้ นขวาสุดของหน้าจอหรือด้าน ลา่ งสดุ ของหน้าจอ ถูกตดั ภาพไปบางสว่ น ท้งั นี้ ข้ึนอยกู่ บั ขนาดของหนา้ จอแสดงผลเวบ็ เพจ

CHAPTER 5: CSS3 PROPERTIES&VALUE 159 Example /* css file: mystyle.css */ body { background-image: url(\"images/wallpaper.jpg\"); background-repeat: repeat-x; } Result Example /* css file: mystyle.css */ body { background-image: url(\"images/wallpaper.jpg\"); background-repeat: repeat-y; } Result

160 CHAPTER 5: CSS3 PROPERTIES&VALUE Example /* css file: mystyle.css */ body { background-image: url(\"images/wallpaper.jpg\"); background-repeat: no-repeat; } Result การกระจายภาพอย่างสม่าเสมอโดยใช้ช่องว่าง (space) ภาพพื้นหลังจะถูกวนซ้ามากที่สุด โดยท่ไี มต่ ัดภาพ ซึ่งภาพแรกและภาพสุดท้ายจะถูกตรึงด้านใดด้านหน่ึงของพื้นหลังหรือพื้นที่ที่กาหนด และจะกระจายภาพให้เต็มพืน้ ท่ีโดยใชช้ ่องว่างแบ่งสว่ นภาพ สว่ นการกระจายภาพอย่างสม่าเสมอโดย การบีบภาพหรือยืดภาพให้เต็มพื้นที่ (round) ภาพพ้ืนหลังจะถูกวนซ้า โดยใช้การบีบภาพให้เล็กลง หรือยืดภาพออกให้ใหญ่ขึ้น เพื่อให้ภาพสามารถแสดงได้เต็มพ้ืนหลังหรอื พ้ืนท่ีที่กาหนด ซ่ึงจะไม่มีการ ตดั ภาพและไม่มีช่องว่าง มีรูปแบบการกาหนดคุณสมบัตแิ ละกาหนดค่า ดงั น้ี Example /* css file: mystyle.css */ #ex1 { background-image: url(\"images/wallpaper.jpg\"); padding: 30px; border: 1px solid #D7D7D7; background-repeat: space; } #ex2 { background-image: url(\"images/wallpaper.jpg\"); padding: 30px; border: 1px solid #D7D7D7; background-repeat: round; }

CHAPTER 5: CSS3 PROPERTIES&VALUE 161 HTML5 <!doctype html> <html> <head> <link rel=\"stylesheet\" type=\"text/css\" href=\"mystyle.css\"> </head> <body> <h1>Background Image: Space</h1> <div id=\"ex1\">Information science is a field primarily concerned with the analysis, collection, classification, manipulation, storage, retrieval, movement, dissemination, and protection of information.</div> <h1>Background Image: Round</h1> <div id=\"ex2\">Information science is a field primarily concerned with the analysis, collection, classification, manipulation, storage, retrieval, movement, dissemination, and protection of information.</div> </body> </html> Result 4. Background Attachment การกาหนดการเคล่ือนที่ของภาพพ้ืนหลัง เม่ือคลิกแถบเลื่อนหน้าจอแสดงผลลงด้านล่าง (Scroll Down) โดยการประกาศคุณสมบัติ \"background-attachment\" ให้กับสไตล์ชีต รูปแบบจะ ส่งผลให้ภาพพื้นหลังอยู่ในตาแหน่งคงท่ีหรือเล่ือนหายตามการเลื่อนหน้าจอ กาหนดค่าเป็นรูปแบบ การเคล่อื นท่ีของภาพพื้นหลงั ประกอบด้วย เลอื่ นภาพปกติ (scroll) ภาพคงที่ (fixed) และภาพอยู่ใน ตาแหน่งเดิม (local) กาหนดเป็นค่าแรกเริ่ม (initial) และกาหนดเป็นค่าสืบทอด (inherit) มีรูปแบบ การกาหนดคุณสมบตั ิและกาหนดคา่ ดังน้ี

162 CHAPTER 5: CSS3 PROPERTIES&VALUE Syntax background-attachment: scroll|fixed|local|initial|inherit; Example /* css file: mystyle.css */ body { background-image: url(\"images/wallpaper.jpg\"); background-repeat: no-repeat; background-attachment: fixed; } HTML5 <!doctype html> <html> <head> <link rel=\"stylesheet\" type=\"text/css\" href=\"mystyle.css\"> </head> <body> <h1>Background Attachment: Fixed</h1> <p>Information science is a field primarily concerned with the analysis, collection, classification, manipulation, storage, retrieval, movement, dissemination, and protection of information.</p> <p>Information science is a field primarily concerned with the analysis, collection, classification, manipulation, storage, retrieval, movement, dissemination, and protection of information.</p> <p>Information science is a field primarily concerned with the analysis, collection, classification, manipulation, storage, retrieval, movement, dissemination, and protection of information.</p> <p>Information science is a field primarily concerned with the analysis, collection, classification, manipulation, storage, retrieval, movement, dissemination, and protection of information.</p> <p>Information science is a field primarily concerned with the analysis, collection, classification, manipulation, storage, retrieval, movement, dissemination, and protection of information.</p> </body> </html>

CHAPTER 5: CSS3 PROPERTIES&VALUE 163 Result Result เมอื่ เลือ่ นหน้าจอลงล่าง ภาพจะยังคงท่ี 5. Background Position การกาหนดตาแหน่งภาพพื้นหลัง โดยการประกาศคุณสมบัติ \"background-position\" ให้กับสไตล์ชีต เพ่ือนารูปแบบไปใช้กับภาพพ้ืนหลัง กาหนดค่าเป็นช่ือตาแหน่ง ประกอบด้วย บนชิด ขอบซ้าย (top left) บนและก่ึงกลาง (top center) บนชิดขอบขวา (top right) กึ่งกลางชิดขอบซ้าย (center left) ก่ึงกลาง (center center) ก่ึงกลางชิดขอบขวา (center right) ล่างชิดขอบซ้าย (bottom left) ล่างและกึ่งกลาง (bottom center) ล่างชิดขอบขวา (bottom right) กาหนดเป็นค่า ร้อยละระบุตาแหน่งตามแนวแกน x และแกน y เช่น background-position: 25% 55%; เป็นต้น และกาหนดเป็นค่าพิกเซล (px) ระบุตาแหน่งตามแนวแกน x และแกน y เช่น background- position: 150px 300px; เปน็ ตน้ มรี ูปแบบการกาหนดคุณสมบตั ิและกาหนดค่า ดงั น้ี

164 CHAPTER 5: CSS3 PROPERTIES&VALUE Syntax background-position: value; Example /* css file: mystyle.css */ body { background-image: url(\"images/wallpaper.jpg\"); background-repeat: no-repeat; background-position: top left; /* top left, top center, top right */ } HTML5 <!doctype html> <html> <head> <link rel=\"stylesheet\" type=\"text/css\" href=\"mystyle.css\"> </head> <body> <h1>Background Position</h1> <p>Information science is a field primarily concerned with the analysis, collection, classification, manipulation, storage, retrieval, movement, dissemination, and protection of information.</p> </body> </html> Result

CHAPTER 5: CSS3 PROPERTIES&VALUE 165 Result Result การกาหนดตาแหน่งภาพพื้นหลังเป็น center left, center center และ center right จะต้องกาหนดคุณสมบัติ background-attachment: fixed; เพ่ือให้ภาพอยู่ในตาแหน่งคงท่ี มี รปู แบบการกาหนดคณุ สมบัติและกาหนดค่า ดังน้ี Example /* css file: mystyle.css */ body { background-image: url(\"images/wallpaper.jpg\"); background-repeat: no-repeat; background-attachment: fixed; background-position: center left; /* center left, center center, center right */ }

166 CHAPTER 5: CSS3 PROPERTIES&VALUE Result Result Result

CHAPTER 5: CSS3 PROPERTIES&VALUE 167 การกาหนดตาแหน่งภาพพื้นหลังเป็น bottom left, bottom center และ bottom right จะต้องกาหนดคุณสมบัติ background-attachment: fixed; เพ่ือให้ภาพอยู่ในตาแหน่งคงที่ มี รปู แบบการกาหนดคุณสมบัติและกาหนดคา่ ดงั นี้ Example /* css file: mystyle.css */ body { background-image: url(\"images/wallpaper.jpg\"); background-repeat: no-repeat; background-attachment: fixed; background-position: bottom left; /* bottom left, bottom center, bottom right */ } Result Result

168 CHAPTER 5: CSS3 PROPERTIES&VALUE Result Example /* css file: mystyle.css */ body { background-image: url(\"images/wallpaper.jpg\"); background-repeat: no-repeat; background-attachment: fixed; background-position: 15% 55%; /* background-position: 200px 120px; */ } Result

CHAPTER 5: CSS3 PROPERTIES&VALUE 169 6. Background Gradients การกาหนดพ้ืนหลงั แบบไล่เฉดสี โดยการประกาศคุณสมบัติ \"background-image\" ให้กับ สไตล์ชีต รูปแบบจะส่งผลให้อิลิเมนต์แสดงพื้นหลังแบบไล่เฉดสี ตามจานวนสีและทิศท่ีกาหนด มี รายละเอยี ดการกาหนดคุณสมบัติ ดังนี้ 6.1 Linear Gradients การไล่เฉดสีตามแนวเส้นตรง ในทิศทางจากบนลงล่าง หรือจาก ซ้ายไปขวา โดยกาหนดค่าเป็นฟังก์ชัน \"linear-gradient()\" กาหนดค่าให้กับฟังก์ชันเป็นทิศทาง (direction) และคา่ สี (color-stop) สจี ะถกู ไล่ระดบั ตามทศิ ทางทก่ี าหนด Syntax background-image: linear-gradient(direction, color-stop1, color-stop2, …); การไล่เฉดสีทิศทางจากบนลงล่าง (Top to Bottom) เป็นค่าเริ่มต้นของการไล่เฉดสีตาม แนวเส้นตรง ซง่ึ จะไมม่ ีการกาหนดค่าทศิ ทาง (direction) เมือ่ กาหนดค่าสจี านวนมากกวา่ 2 สี จะเป็น การไลเ่ ฉดสีจากบนลงลา่ งโดยอตั โนมัติ มรี ปู แบบการกาหนดคุณสมบัตแิ ละกาหนดค่า ดังน้ี Example /* css file: mystyle.css */ #ex1 { background-image: linear-gradient(yellow, palegreen); padding: 20px; } HTML5 <!doctype html> <html> <head> <link rel=\"stylesheet\" type=\"text/css\" href=\"mystyle.css\"> </head> <body> <h1>Linear Gradient: Top to Bottom</h1> <div id=\"ex1\"> <p>Information science is a field primarily concerned with the analysis, collection, classification, manipulation, storage, retrieval, movement, dissemination, and protection of information.</p> </div> </body> </html>

170 CHAPTER 5: CSS3 PROPERTIES&VALUE Result การไล่เฉดสีทิศทางซ้ายไปขวา (Left to Right) กาหนดค่าทิศทางในฟังก์ชันเป็น \"to right\" และกาหนดค่าสตี ามจานวนทต่ี อ้ งการ มีรูปแบบการกาหนดคุณสมบตั แิ ละกาหนดค่า ดงั นี้ Example /* css file: mystyle.css */ #ex2 { background-image: linear-gradient(to right, yellow, palegreen); padding: 20px; } Result การไล่เฉดสีตามเส้นทแยงมุม (Diagonal) จากมุมบนด้านซ้ายลงมามุมล่างด้านขวา กาหนดค่าทิศทางในฟังกช์ ันเป็น \"to bottom right\" และกาหนดคา่ สตี ามจานวนที่ต้องการ มรี ูปแบบ การกาหนดคณุ สมบตั แิ ละกาหนดคา่ ดังน้ี Example /* css file: mystyle.css */ #ex3 { background-image: linear-gradient(to bottom right, yellow, palegreen); padding: 20px; }

CHAPTER 5: CSS3 PROPERTIES&VALUE 171 Result การไล่เฉดสีตามองศาของมุม (Angles) โดยกาหนดค่ามุม (angle) เช่น 90deg -90deg 145deg -145deg เปน็ ตน้ และกาหนดคา่ สีตามจานวนที่ต้องการ มรี ปู แบบการกาหนดคุณสมบัติและ กาหนดค่า ดังน้ี Syntax background-image: linear-gradient(angle, color-stop1, color-stop2, …); Example /* css file: mystyle.css */ #ex4 { background-image: linear-gradient(-145deg, yellow, palegreen); padding: 20px; } Result การไล่เฉดสีโดยใช้หลายสี (Multiple Color Stops) เป็นการกาหนดค่าสีมากกว่า 2 สี เพ่ือให้การไล่เฉดสีมีมิติมากย่ิงข้ึน และสามารถกาหนดทิศทางได้ตามรูปแบบที่ต้องการ มีรูปแบบการ กาหนดคณุ สมบัตแิ ละกาหนดค่า ดงั น้ี

172 CHAPTER 5: CSS3 PROPERTIES&VALUE Example /* css file: mystyle.css */ #ex5 { background-image: linear-gradient(to right, yellow, palegreen, cyan); } padding: 20px; Result การไล่เฉดสีโดยการกาหนดค่าความโปร่งใส (Transparency) เป็นการกาหนดความโปร่งใส ในลักษณะสีซีดจาง จากทิศทางหนึ่งไปยังทิศทางที่ต้องการ โดยกาหนดค่าเป็นฟังก์ชัน \"rgba()\" กาหนดค่าให้กับฟังก์ชันเป็นค่าสี RGB โดยตัวเลขสดุ ท้ายจะต้องกาหนดให้เป็น 0 หรือ 1 หากกาหนด เปน็ 0 จะเป็นการกาหนดความโปร่งใสของสี หรือหากกาหนดเป็น 1 จะเปน็ การแสดงสีเตม็ มรี ปู แบบ การกาหนดคุณสมบตั ิและกาหนดคา่ ดังนี้ Example /* css file: mystyle.css */ #ex6 { background-image: linear-gradient(to right, rgba(64,224,208,0), rgba(64,224,208,1)); padding: 20px; } Result

CHAPTER 5: CSS3 PROPERTIES&VALUE 173 6.2 Radial Gradients การไล่เฉดสีตามรัศมีวงกลม สีจะไล่ระดับจากจุดศูนย์กลางของ วงกลม โดยกาหนดค่าเปน็ ฟังกช์ ัน \"radial-gradient()\" กาหนดคา่ ให้กับฟงั กช์ ันเปน็ รปู ร่างและขนาด ของวงรัศมี (shape size at position) กาหนดสีอย่างน้อย 2 สี ได้แก่ สีเริ่มต้น (start-color) หรือสี วงในสุด และสสี ดุ ท้าย (last-color) หรอื สวี งนอกสุดในรศั มวี งกลม Syntax background-image: radial-gradient(shape size at position, start-color, ..., last-color); การไล่เฉดสีแบบรัศมีวงกลม ประกอบด้วย ให้สีเร่ิมต้นจากจุดศูนย์กลางของวงกลม ซ่ึง ระดับสีจะมีความสม่าเสมอกันตามจานวนสีท่ีกาหนด และให้เว้นระยะห่างระหว่างสีท่ีแตกต่างกัน ซ่ึง จะต้องกาหนดขนาดพ้ืนที่ของสี กาหนดเป็นค่าร้อยละ มีรูปแบบการกาหนดคุณสมบัติและกาหนดค่า ดงั นี้ Example /* css file: mystyle.css */ #ex1 { height: 280px; width: 350px; margin: 6px; float: left; background-image: radial-gradient(yellow, palegreen, cyan); } #ex2 { height: 280px; width: 350px; margin: 6px; float: left; background-image: radial-gradient(yellow 5%, palegreen 30%, cyan 60%); } HTML5 <!doctype html> <html> <head> <link rel=\"stylesheet\" type=\"text/css\" href=\"mystyle.css\"> </head> <body> <div id=\"ex1\">radialA</div> <div id=\"ex2\">radialB</div> </body> </html>

174 CHAPTER 5: CSS3 PROPERTIES&VALUE Result การไล่เฉดสีแบบรัศมีวงกลม โดยการกาหนดรูปร่างของวง กาหนดค่าเป็นชื่อรูปร่าง ประกอบด้วย วงรี (Ellipse) และวงกลม (Circle) ซ่ึงหากไม่มีกาหนดรูปร่างของวงกลม ค่าเร่ิมต้นจะ เป็นวงรี มรี ปู แบบการกาหนดคณุ สมบตั แิ ละกาหนดคา่ ดงั นี้ Example /* css file: mystyle.css */ #ex3 { height: 280px; width: 350px; margin: 6px; float: left; } background-image: radial-gradient(ellipse, yellow, palegreen, cyan); #ex4 { /* default */ } height: 280px; width: 350px; margin: 6px; float: left; background-image: radial-gradient(circle, yellow, palegreen, cyan); HTML5 <!doctype html> <html> <head> <link rel=\"stylesheet\" type=\"text/css\" href=\"mystyle.css\"> </head> <body> <div id=\"ex3\">radialEllipse</div> <div id=\"ex4\">radialCircle</div> </body> </html>

CHAPTER 5: CSS3 PROPERTIES&VALUE 175 Result การไล่เฉดสีแบบรัศมีวงกลม โดยการกาหนดตาแหน่งการแสดงระดับสีของรัศมีวงกลม กาหนดค่าเป็นตาแหน่งการแสดงสี ประกอบด้วย ตาแหน่งใกล้ด้านข้าง (Closest-Side) ตาแหน่งใกล้ ด้านข้างมากทีส่ ุด (Farthest-Side) ตาแหนง่ ใกล้มุม (Closest-Corner) และตาแหน่งใกล้มุมมากท่ีสุด (Farthest-Corner) มรี ูปแบบการกาหนดคณุ สมบัติและกาหนดค่า ดังน้ี Example /* css file: mystyle.css */ #ex5 { background-image: radial-gradient(closest-side at 50% 30%, yellow, palegreen); } #ex6 { background-image: radial-gradient(farthest-side at 50% 30%, yellow, palegreen); } #ex7 { background-image: radial-gradient(closest-corner at 70% 30%, yellow, palegreen); } #ex8 { background-image: radial-gradient(farthest-corner at 70% 30%, yellow, palegreen); } #ex5, #ex6, #ex7, #ex8 { height: 280px; width: 350px; margin: 6px; float: left; }

176 CHAPTER 5: CSS3 PROPERTIES&VALUE HTML5 <!doctype html> <html> <head> <link rel=\"stylesheet\" type=\"text/css\" href=\"mystyle.css\"> </head> <body> <div id=\"ex5\">closest-side</div> <div id=\"ex6\">farthest-side</div> <div id=\"ex7\">closest-corner</div> <div id=\"ex8\">farthest-corner</div> </body> </html> Result

CHAPTER 5: CSS3 PROPERTIES&VALUE 177 7. Background Shorthand การกาหนดคุณสมบัติพ้ืนหลัง โดยการประกาศคุณสมบัติ \"background\" ให้กับสไตล์ชีต ซึ่งสามารถกาหนดคุณสมบัตติ ่าง ๆ ของพนื้ หลงั ได้ในคณุ สมบัตเิ ดยี ว กาหนดค่าเป็นสีพ้ืนหลัง ภาพพื้น หลัง ตาแหน่งภาพพื้นหลัง การแสดงซ้าภาพพื้นหลัง การเคลื่อนท่ีของภาพพ้ืนหลัง กาหนดเป็นค่า แรกเร่ิม และกาหนดใหเ้ ปน็ การสืบทอดคุณสมบัติ มีรปู แบบการกาหนดคุณสมบัติและกาหนดค่า ดงั นี้ Syntax background: bg-color bg-image position/bg-size bg-repeat bg-attachment|initial; Example /* css file: mystyle.css */ body { background: #FFFCE1 url(\"images/wallpaper.jpg\") fixed no-repeat 400px 60px; } HTML5 <!doctype html> <html> <head> <link rel=\"stylesheet\" type=\"text/css\" href=\"mystyle.css\"> </head> <body> <h1>Background</h1> <p>Information science is a field primarily concerned with the analysis, collection, classification, manipulation, storage, retrieval, movement, dissemination, and protection of information.</p> </body> </html> Result

178 CHAPTER 5: CSS3 PROPERTIES&VALUE คุณสมบัติเสน้ ขอบ คุณสมบัติเส้นขอบ (Border Properties) คือ คุณสมบัติที่ใช้สาหรับกาหนดรูปแบบเส้นขอบ ให้กับอิลิเมนต์ต่าง ๆ เพื่อช่วยให้เน้ือหาที่อยู่ภายใต้เส้นขอบ มีความโดดเด่นมากยิ่งข้ึน ไม่ว่าจะเป็น เส้นขอบพ้ืนท่ี เส้นขอบหัวข้อหลัก เส้นขอบย่อหน้า เส้นขอบภาพ และยังสามารถใช้กาหนดรูปแบบ เส้นขอบเค้าโครงเว็บเพจ โดยสามารถกาหนดรูปแบบเส้นขอบ ขนาดเส้นขอบ สีเส้นขอบ ความโค้ง ของมุมเส้นขอบ และกาหนดคุณสมบัติอื่น ๆ ให้กับเส้นขอบได้ มีรายละเอียดการกาหนดคุณสมบัติ ดังนี้ 1. Border Style การกาหนดลักษณะเส้นขอบ โดยการประกาศคุณสมบัติ \"border-style\" ให้กับสไตล์ชีต รูปแบบจะส่งผลให้อิลิเมนต์แสดงเส้นขอบตามลักษณะที่กาหนด กาหนดค่าเป็นลักษณะของเส้นขอบ ประกอบด้วย เส้นทึบ (solid) เส้นจุด (dotted) เส้นประ (dashed) เส้นคู่ (double) เส้นร่อง (groove) เส้นสันนูน (ridge) เส้นยุบด้านใน (inset) เส้นยุบด้านนอก (outset) ไม่กาหนดค่า (none) เส้นซ่อน (hidden) และเส้นผสม 4 ด้าน กาหนดเป็นค่าแรกเร่ิม (initial) และกาหนดเป็นค่าสืบทอด (inherit) มีรูปแบบการกาหนดคณุ สมบัติและกาหนดคา่ ดังนี้ Syntax border-style: none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|initial|inherit; Example /* css file: mystyle.css */ p.solid {border-style: solid;} p.dotted {border-style: dotted;} p.dashed {border-style: dashed;} p.double {border-style: double;} p.groove {border-style: groove;} p.ridge {border-style: ridge;} p.inset {border-style: inset;} p.outset {border-style: outset;} p.none {border-style: none;} p.hidden {border-style: hidden;} p.mix {border-style: dotted dashed solid double;} /* 4 sides: top right bottom left */

CHAPTER 5: CSS3 PROPERTIES&VALUE 179 HTML5 <!doctype html> <html> <head> <link rel=\"stylesheet\" type=\"text/css\" href=\"mystyle.css\"> </head> <body> <h1>Border Style</h1> <p class=\"solid\">solid</p> <p class=\"dotted\">dotted</p> <p class=\"dashed\">dashed</p> <p class=\"double\">double</p> <p class=\"groove\">groove</p> <p class=\"ridge\">ridge</p> <p class=\"inset\">inset</p> <p class=\"outset\">outset</p> <p class=\"none\">none</p> <p class=\"hidden\">hidden</p> <p class=\"mix\">mixed</p> </body> </html> Result

180 CHAPTER 5: CSS3 PROPERTIES&VALUE 2. Border Width การกาหนดขนาดความกว้างของเส้นขอบ โดยการประกาศคุณสมบัติ \"border-width\" ให้กับสไตล์ชีต กาหนดค่าเป็นขนาดความกว้างของเส้นขอบ ประกอบด้วย ค่าตัวเลขขนาดความกวา้ ง โดยใช้หน่วยวัดเป็นพิกเซล (px) กาหนดค่าเป็นช่ือขนาดความกว้าง ได้แก่ บาง (thin) ปานกลาง (medium) และหนา (thick) กาหนดเป็นค่าแรกเริ่ม (initial) และกาหนดเป็นค่าสืบทอด (inherit) มี รูปแบบการกาหนดคณุ สมบัตแิ ละกาหนดค่า ดังน้ี Syntax border-width: length|medium|thin|thick|initial|inherit; Example /* css file: mystyle.css */ p.ex1 { border-style: solid; border-width: thin; } p.ex2 { border-style: solid; border-width: thick; } p.ex3 { border-style: solid; border-width: 10px; } HTML5 <!doctype html> <html> <head> <link rel=\"stylesheet\" type=\"text/css\" href=\"mystyle.css\"> </head> <body> <h1>Border Width</h1> <p class=\"ex1\">Information science is a field primarily concerned with the analysis, collection, classification, manipulation, storage, retrieval, movement, dissemination, and protection of information. (border-width: thin;)</p> <p class=\"ex2\">Information science is a field primarily concerned with the analysis, collection, classification, manipulation, storage, retrieval, movement, dissemination, and protection of information. (border-width: thick;)</p> <p class=\"ex3\"> Information science is a field primarily concerned with the analysis, collection, classification, manipulation, storage, retrieval, movement, dissemination, and protection of information. (border-width: 10px;)</p> </body> </html>


lavanh9979

ວິຊາ การออกแบบและพัฒนาเว็บไซต์เพื่อการจัดการสารสนเทศ
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