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 5: CSS3 PROPERTIES&VALUE 181 Result 3. Border Color การกาหนดสีเส้นขอบ โดยการประกาศคุณสมบัติ \"border-color\" ให้กบั สไตลช์ ตี รปู แบบ จะส่งผลให้อิลิเมนต์แสดงสีเส้นขอบตามที่กาหนด กาหนดค่าเป็น ค่าสี (color) ประกอบด้วย ช่ือสี รหัสสีเลขฐานสิบหก หรือค่าสีรูปแบบ RGB กาหนดเป็นค่าความโปร่งใส (transparent) กาหนดเป็น ค่าแรกเร่ิม (initial) และกาหนดเป็นค่าสืบทอด (inherit) มีรูปแบบการกาหนดคุณสมบัติและ กาหนดคา่ ดงั นี้ Syntax border-color: color|transparent|initial|inherit; Example /* css file: mystyle.css */ p.ex1 { border-style: solid; border-color: green; } p.ex2 { border-style: solid; border-color: #F73033; } p.ex3 { border-style: solid; border-color: rgb(52,99,228); } p.ex4 { border-style: solid; border-color:transparent; }

182 CHAPTER 5: CSS3 PROPERTIES&VALUE HTML5 <!doctype html> <html> <head> <link rel=\"stylesheet\" type=\"text/css\" href=\"mystyle.css\"> </head> <body> <h1>Border Color</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-color: Green;)</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-color: #F73033;)</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-color: rgb(52,99,228);)</p> <p class=\"ex4\">Information science is a field primarily concerned with the analysis, collection, classification, manipulation, storage, retrieval, movement, dissemination, and protection of information. (border-color: transparent;)</p> </body> </html> Result 4. Border Radius การกาหนดความโค้งของมุมเส้นขอบ โดยการประกาศคุณสมบัติ \"border-radius\" ให้กับ สไตล์ชีต กาหนดค่าเป็นตัวเลขระดับความโค้งของมุมเส้นขอบ โดยใช้หน่วยวัดเป็นพิกเซล (px) หรือ ร้อยละ (%) กาหนดเป็นค่าแรกเร่ิม (initial) และกาหนดเป็นค่าสืบทอด (inherit) มีรูปแบบการ กาหนดคณุ สมบัติและกาหนดค่า ดงั น้ี Syntax border-radius: 1-4 length|% / 1-4 length|%|initial|inherit;

CHAPTER 5: CSS3 PROPERTIES&VALUE 183 Example /* css file: mystyle.css */ p.ex1 { border: solid green 2px; border-radius: 20px; padding: 20px; } p.ex2 { border: solid green 2px; border-radius: 50%; padding: 50px; } HTML5 <!doctype html> <html> <head> <link rel=\"stylesheet\" type=\"text/css\" href=\"mystyle.css\"> </head> <body> <h1>Border Radius</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-radius: 20px;)</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-radius: 50%;)</p> </body> </html> Result

184 CHAPTER 5: CSS3 PROPERTIES&VALUE 5. Border Individual Sides การกาหนดคุณสมบัติของเส้นขอบ โดยแยกเฉพาะด้าน 4 ด้าน ได้แก่ ซ้าย (left) ขวา (right) บน (top) และล่าง (bottom) สามารถกาหนดลักษณะเส้นขอบ สีเส้นขอบ ขนาดเส้นขอบ และความโค้งของมุมเส้นขอบในแต่ละด้าน ให้มคี วามแตกต่างกันและเป็นอิสระจากกนั มีรายละเอียด การกาหนดคุณสมบตั ิ ดังนี้ 5.1 ลักษณะเส้นขอบ โดยการประกาศคุณสมบัติ \"border-top-style\", \"border-right- style\", \"border-bottom-style\" และ \"border-left-style\" กาหนดค่าเป็นลักษณะเส้นขอบ โดย รูปแบบจะมีผลเฉพาะด้านที่กาหนดค่าเทา่ นนั้ มรี ปู แบบการกาหนดคณุ สมบัติและกาหนดคา่ ดังน้ี Example /* css file: mystyle.css */ p.ex1 { border-top-style: solid; border-right-style: dotted; border-bottom-style: double; border-left-style: dashed; } 5.2 สีเส้นขอบ โดยการประกาศคุณสมบัติ \"border-top-color\", \"border-right-color\", \"border-bottom-color\" และ \"border-left-color\" กาหนดค่าเป็นค่าสี โดยรูปแบบจะมีผลเฉพาะ ดา้ นทก่ี าหนดคา่ เทา่ น้นั มีรปู แบบการกาหนดคณุ สมบัตแิ ละกาหนดคา่ ดงั น้ี Example /* css file: mystyle.css */ p.ex2 { border-top-color: red; border-right-color: green; border-bottom-color: blue; border-left-color: pink; border: solid; } 5.3 ขนาดเส้นขอบ โดยการประกาศคุณสมบัติ \"border-top-width\", \"border-right- width\", \"border-bottom-width\" และ \"border-left-width\" กาหนดค่าเป็นค่าความกว้างของเส้น ขอบ โดยรปู แบบจะมีผลเฉพาะด้านที่กาหนดค่าเทา่ น้นั มีรูปแบบการกาหนดคุณสมบตั แิ ละกาหนดค่า ดงั น้ี

CHAPTER 5: CSS3 PROPERTIES&VALUE 185 Example /* css file: mystyle.css */ p.ex3 { border-top-width: 2px; border-right-width: 6px; border-bottom-width: 2px; border-left-width: 6px; border: solid; } 5.4 ความโค้งของมุมเส้นขอบ โดยการประกาศคุณสมบัติ \"border-top-left-radius\", \"border-top-right-radius\", \"border-bottom-left-radius\" แ ล ะ \" border-bottom-left-radius\" กาหนดค่าเป็นตัวเลขระดับความโค้งของมุมเส้นขอบ โดยรูปแบบจะมีผลเฉพาะด้านที่กาหนดค่า เท่าน้นั มีรูปแบบการกาหนดคณุ สมบัตแิ ละกาหนดคา่ ดังนี้ Example /* css file: mystyle.css */ p.ex4 { border-top-left-radius: 5px; border-top-right-radius: 12px; border-bottom-left-radius: 12px; border-bottom-right-radius: 5px; border: solid; } Result การกาหนดคุณสมบัติเส้นขอบโดยแยกเฉพาะด้าน สามารถกาหนดลักษณะเส้นขอบ สีเส้น ขอบ ขนาดเส้นขอบ และความโค้งของมุมเส้นขอบ โดยการประกาศคุณสมบัติ \"border-style\" \"border-color\" \"border-width\" และ \"border-radius\" เพียงคุณสมบัติเดียว ซึ่งสามารถกาหนด คุณสมบตั ิเสน้ ขอบได้ 1-4 ดา้ น มีรูปแบบการกาหนดคณุ สมบัติและกาหนดค่า ดังน้ี

186 CHAPTER 5: CSS3 PROPERTIES&VALUE Example /* top right bottom left */ /* top right&left bottom */ /* css file: mystyle.css */ /* top&bottom right&left */ /* 4 borders */ p.ex1 { border-style: double dotted double dotted; border-color: red green blue pink; border-width: 2px 4px 2px 4px; border-radius: 20px 10px 10px 20px; } p.ex2 { border-style: double dotted double; border-color: red green blue; border-width: 2px 4px 2px; border-radius: 10px 15px 10px; } p.ex3 { border-style: double dotted; border-color: red green; border-width: 2px 4px; border-radius: 15px 10px; } p.ex4 { border-style: double; border-color: red; border-width: 2px; border-radius: 20px; } Result

CHAPTER 5: CSS3 PROPERTIES&VALUE 187 6. Border Shorthand การกาหนดคุณสมบตั ิของเสน้ ขอบ โดยการประกาศคณุ สมบัติ \"border\" ใหก้ บั สไตล์ชตี ซง่ึ สามารถกาหนดคุณสมบัตติ ่าง ๆ ของเส้นขอบได้ในคุณสมบัติเดียว กาหนดค่าเป็นลักษณะเส้นขอบ สี เส้นขอบ และขนาดเส้นขอบ กาหนดเป็นค่าแรกเร่ิม (initial) และกาหนดเป็นค่าสืบทอด (inherit) มี รูปแบบการกาหนดคุณสมบัติและกาหนดค่า ดังนี้ Syntax border: border-style border-color border-width|initial|inherit; Example /* css file: mystyle.css */ p.ex1 { border: 2px dashed #DF0022; } p.ex2 { border: 2px solid palegreen; } HTML5 <!doctype html> <html> <head> <link rel=\"stylesheet\" type=\"text/css\" href=\"mystyle.css\"> </head> <body> <h1>Border</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.</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.</p> </body> </html> Result

188 CHAPTER 5: CSS3 PROPERTIES&VALUE คณุ สมบัตคิ วามสงู และความกวา้ ง คุณสมบัติความสูงและความกว้าง (Height/Width Properties) คือ คุณสมบัติท่ีใช้สาหรับ กาหนดขนาดพื้นท่ีหรือขนาดวัตถุด้วยค่าความสูงและค่าความกว้าง เพื่อใช้เป็นพื้นท่ีในการจัดวาง เน้ือหาหรอื ใช้เปน็ เคา้ โครงเวบ็ เพจ มีรายละเอียดการกาหนดคณุ สมบัติ ดงั นี้ 1. Height/Width การกาหนดความสูงและความกว้าง โดยการประกาศคุณสมบัติ \"height\" และ \"width\" ให้กับสไตล์ชีต เพ่ือนารูปแบบไปใช้เป็นพื้นที่หรือวัตถุสาหรับแทรกเน้ือหา กาหนดค่าเป็นค่าตัวเลข ขนาดความสูงและความกว้าง โดยสามารถใช้หน่วยวัดเป็นพิกเซล (px) ซ่ึงจะได้ขนาดคงท่ี มีขนาด เท่ากับค่าจริงตามที่กาหนด หรือใช้หน่วยวัดเป็นร้อยละ (%) ซ่ึงจะได้ขนาดที่ยืดหยุ่น เมื่อแสดงผลใน หน้าจอที่มีขนาดแตกต่างกัน พ้ืนท่ีจะปรับขนาดตามร้อยละท่ีกาหนด กาหนดค่าเป็นอัตโนมัติ (auto) พื้นท่ีจะมีขนาดตามเนื้อหาท่ีแทรกลง กาหนดเป็นค่าแรกเริ่ม (initial) และกาหนดเป็นค่าสืบทอด (inherit) มรี ูปแบบการกาหนดคณุ สมบตั ิและกาหนดคา่ ดังนี้ Syntax height: length|auto|initial|inherit; width: length|auto|initial|inherit; Example /* css file: mystyle.css */ div.ex1 { height: initial; width: initial; background-color: powderblue; } div.ex2 { height: 120px; width: 600px; background-color: powderblue; } div.ex3 { height: auto; width: 600px; background-color: powderblue; } p{ height: 80px; width: inherit; background-color: bisque; }

CHAPTER 5: CSS3 PROPERTIES&VALUE 189 HTML5 <!doctype html> <html> <head> <link rel=\"stylesheet\" type=\"text/css\" href=\"mystyle.css\"> </head> <body> <h1>Height/Width</h1> <div class=\"ex1\">Information science is a field primarily concerned with the analysis, collection, classification, manipulation, storage, retrieval, movement, dissemination, and protection of information. (height: initial; width: initial;)</div><br> <div class=\"ex2\">Information science is a field primarily concerned with the analysis, collection, classification, manipulation, storage, retrieval, movement, dissemination, and protection of information. (height: 120px; width: 600px;)</div><br> <div class=\"ex3\">Information science is a field primarily concerned with the analysis, collection, classification, manipulation, storage, retrieval, movement, dissemination, and protection of information. (height: auto; width: 600px;)</div> <div class=\"ex3\"> <p>Information science is a field primarily concerned with the analysis, collection, classification, manipulation, storage, retrieval, movement, dissemination, and protection of information. (height: 80px; width: inherit;)</p> </div> </body> </html> Result

190 CHAPTER 5: CSS3 PROPERTIES&VALUE 2. Max/Min Height การกาหนดความสูงที่สามารถแสดงได้สูงสุด โดยการประกาศคุณสมบัติ \"max-height\" และการกาหนดความสูงที่สามารถแสดงได้อย่างน้อย โดยการประกาศคุณสมบัติ \"min-height\" กาหนดคา่ เปน็ ค่าตวั เลขขนาดความสูง ใชห้ น่วยวดั เปน็ พกิ เซล (px) ไมก่ าหนดคา่ (none) กาหนดเป็น ค่าแรกเริ่ม (initial) และกาหนดเป็นค่าสืบทอด (inherit) โดยคุณสมบัติ \"max-height\" มักใช้ร่วมกับ การประกาศคุณสมบัติ \"overflow\" ค่าที่กาหนดคือ อัตโนมัติ (auto) ซึ่งจะแสดงแถบเลื่อนเม่ือมี เนอื้ หาเกินความสูงท่กี าหนด มีรูปแบบการกาหนดคุณสมบตั ิและกาหนดคา่ ดังน้ี Syntax max-height: length|none|initial|inherit; min-height: length|initial|inherit; Example /* css file: mystyle.css */ p.ex1 { max-height: none; background-color: powderblue; } p.ex2 { max-height: 40px; background-color: powderblue; overflow: auto; } p.ex3 { min-height: 100px; background-color: powderblue; } div.ex4 { min-height: 100px; background-color: bisque; } p.ex5 { min-height: inherit; }

CHAPTER 5: CSS3 PROPERTIES&VALUE 191 HTML5 <!doctype html> <html> <head> <link rel=\"stylesheet\" type=\"text/css\" href=\"mystyle.css\"> </head> <body> <h1>Max-Height</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. (max-height: none; or max-height: initial;)</p> <h1>Max-Height</h1> <p class=\"ex2\">Information science is a field primarily concerned with the analysis, collection, classification, manipulation, storage, retrieval, movement, dissemination, and protection of information. (max-height: 40px; overflow: auto;)</p> <h1>Min-Height</h1> <p class=\"ex3\">Information science is a field primarily concerned with the analysis, collection, classification, manipulation, storage, retrieval, movement, dissemination, and protection of information. (min-height: 100px;)</p> <h1>Min-Height</h1> <div class=\"ex4\"> <p class=\"ex5\">Information science is a field primarily concerned with the analysis, collection, classification, manipulation, storage, retrieval, movement, dissemination, and protection of information. (min-height: inherit;)</p> </div> </body> </html> Result แสดงแถบเล่ือนเม่ือเน้ือหาเกนิ ความสูง

192 CHAPTER 5: CSS3 PROPERTIES&VALUE 3. Max/Min Width การกาหนดความกว้างท่ีสามารถแสดงได้สูงสุด โดยการประกาศคุณสมบัติ \"max-width\" และการกาหนดความกว้างท่ีสามารถแสดงได้อย่างน้อย โดยการประกาศคุณสมบัติ \"min-width\" กาหนดค่าเป็นค่าตัวเลขขนาดความกว้าง ใช้หน่วยวัดเป็นพิกเซล (px) ไม่กาหนดค่า (none) กาหนด เป็นค่าแรกเร่ิม (initial) และกาหนดเป็นค่าสืบทอด (inherit) โดยการกาหนดค่า \"min-width\" หาก ย่อหรือขยายหน้าจอ จะแสดงความกว้างของหน้าจออย่างน้อยเท่ากับค่า \"min-width\" มีรูปแบบการ กาหนดคณุ สมบตั แิ ละกาหนดค่า ดังน้ี Syntax max-width: length|none|initial|inherit; min-width: length|initial|inherit; Example /* css file: mystyle.css */ p.ex1 { max-width: none; background-color: powderblue; } p.ex2 { max-width: 500px; background-color: powderblue; } p.ex3 { min-width: 300px; background-color: powderblue; } div.ex4 { min-width: 400px; background-color: bisque; } p.ex5 { min-width: inherit; }

CHAPTER 5: CSS3 PROPERTIES&VALUE 193 HTML5 <!doctype html> <html> <head> <link rel=\"stylesheet\" type=\"text/css\" href=\"mystyle.css\"> </head> <body> <h1>Max-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. (max-width: none; or max-width:initial;)</p> <h1>Max-Width</h1> <p class=\"ex2\">Information science is a field primarily concerned with the analysis, collection, classification, manipulation, storage, retrieval, movement, dissemination, and protection of information. (max-width: 500px;)</p> <h1>Min-Width</h1> <p class=\"ex3\">Information science is a field primarily concerned with the analysis, collection, classification, manipulation, storage, retrieval, movement, dissemination, and protection of information. (min-width: 300px;)</p> <h1>Min-Width</h1> <div class=\"ex4\"> <p class=\"ex5\">Information science is a field primarily concerned with the analysis, collection, classification, manipulation, storage, retrieval, movement, dissemination, and protection of information. (min-width: inherit;)</p> </div> </body> </html> Result

194 CHAPTER 5: CSS3 PROPERTIES&VALUE คุณสมบัตริ ะยะหา่ งของขอบดา้ นนอก คุณสมบัติระยะห่างของขอบด้านนอก (Margin Properties) คือ คุณสมบัติท่ีใช้สาหรับ กาหนดระยะห่างระหว่างขอบด้านนอกของวัตถุหรืออิลิเมนต์กับวัตถุหรืออิลิเมนต์รอบข้าง โดยการ ประกาศคุณสมบัติ \"margin\" ให้กบั สไตล์ชีต สามารถกาหนดระยะห่างทง้ั 4 ดา้ น คือ ซ้าย (left) ขวา (right) บน (top) และล่าง (bottom) หรือกาหนดเฉพาะด้านท่ีต้องการ กาหนดค่าเป็นค่าตัวเลข ระยะห่างโดยใช้หน่วยวัดเปน็ พิกเซล (px) หรือรอ้ ยละ (%) กาหนดคา่ เป็นอัตโนมัติ (auto) วัตถจุ ะอยู่ กึ่งกลางระหว่างซ้ายกับขวา กาหนดเป็นค่าแรกเริ่ม (initial) และกาหนดเป็นค่าสืบทอด (inherit) มี รูปแบบการกาหนดคณุ สมบตั แิ ละกาหนดค่า ดังนี้ Syntax margin: length|auto|initial|inherit; Example /* css file: mystyle.css */ div.ex1 { border: 2px solid green; margin: initial; } div.ex2 { border: 2px solid green; width: 550px; margin: auto; margin-top: 10px; /* or margin-right margin-bottom margin-left */ } div.ex3 { border: 2px solid green; margin: 30px; /* 4 sides */ } div.ex4 { border: 2px solid green; margin: 20px 30px 10px 75px; /* top right bottom left */ } div.ex5 { border: 2px solid green; margin-left: 20%; margin-top: 5%; } p.inherit { margin-left: inherit; margin-top: inherit; }

CHAPTER 5: CSS3 PROPERTIES&VALUE 195 HTML5 <!doctype html> <html> <head> <link rel=\"stylesheet\" type=\"text/css\" href=\"mystyle.css\"> </head> <body> <h1>Margin</h1> <div class=\"ex1\">Information science is a field primarily concerned with the analysis, collection, classification, manipulation, storage, retrieval, movement, dissemination, and protection of information. (margin: initial)</div> <div class=\"ex2\">Information science is a field primarily concerned with the analysis, collection, classification, manipulation, storage, retrieval, movement, dissemination, and protection of information. (margin: auto; margin-top: 10px;)</div> <div class=\"ex3\">Information science is a field primarily concerned with the analysis, collection, classification, manipulation, storage, retrieval, movement, dissemination, and protection of information. (margin: 30px;)</div> <div class=\"ex4\">Information science is a field primarily concerned with the analysis, collection, classification, manipulation, storage, retrieval, movement, dissemination, and protection of information. (margin: 20px 30px 10px 75px;)</div> <div class=\"ex5\"> <p class=\"inherit\">Information science is a field primarily concerned with the analysis, collection, classification, manipulation, storage, retrieval, movement, dissemination, and protection of information. (margin-left: inherit; margin-top: inherit;)</p> </div> </body> </html> Result

196 CHAPTER 5: CSS3 PROPERTIES&VALUE คณุ สมบตั ิระยะหา่ งจากขอบด้านใน คุณสมบัติระยะห่างจากขอบด้านใน (Padding Properties) คือ คุณสมบัติที่ใช้สาหรับ กาหนดระยะห่างระหว่างเน้ือหาที่อยู่ด้านในวัตถุหรืออิลิเมนต์กับขอบด้านในของวัตถุหรืออิลิเมนต์ โดยการประกาศคุณสมบัติ \"padding\" ให้กับสไตล์ชีต สามารถกาหนดระยะห่างท้ัง 4 ด้าน คือ ซ้าย (left) ขวา (right) บน (top) และล่าง (bottom) หรือกาหนดเฉพาะด้านท่ีต้องการ กาหนดค่าเป็นค่า ตัวเลขระยะห่างโดยใช้หน่วยวัดเป็นพิกเซล (px) หรือร้อยละ (%) กาหนดเป็นค่าแรกเร่ิม (initial) และกาหนดเป็นค่าสืบทอด (inherit) มีรูปแบบการกาหนดคุณสมบัติและกาหนดค่า ดังน้ี Syntax padding: length|initial|inherit; Example /* css file: mystyle.css */ div.ex1 { border: 2px solid green; background-color: cornsilk; padding: initial; } div.ex2 { border: 2px solid green; background-color: cornsilk; margin-top: 15px; padding: 30px; /* 4 sides */ } div.ex3 { border: 2px solid green; background-color: cornsilk; margin-top: 15px; padding: 60px 30px 10px 30px; /* top right bottom left */ } div.ex4 { border: 2px solid green; background-color: cornsilk; margin-top: 15px; padding-left: 40px; /*or padding-top padding-right padding-bottom */ } p.inherit { padding-left: inherit; }

CHAPTER 5: CSS3 PROPERTIES&VALUE 197 HTML5 <!doctype html> <html> <head> <link rel=\"stylesheet\" type=\"text/css\" href=\"mystyle.css\"> </head> <body> <h1>Padding</h1> <div class=\"ex1\">Information science is a field primarily concerned with the analysis, collection, classification, manipulation, storage, retrieval, movement, dissemination, and protection of information. (padding: initial)</div> <div class=\"ex2\">Information science is a field primarily concerned with the analysis, collection, classification, manipulation, storage, retrieval, movement, dissemination, and protection of information. (padding: 30px;)</div> <div class=\"ex3\">Information science is a field primarily concerned with the analysis, collection, classification, manipulation, storage, retrieval, movement, dissemination, and protection of information. (padding: 50px 30px 10px 30px;)</div> <div class=\"ex4\"> <p class=\"inherit\">Information science is a field primarily concerned with the analysis, collection, classification, manipulation, storage, retrieval, movement, dissemination, and protection of information. (padding-left: inherit;)</p> </div> </body> </html> Result

198 CHAPTER 5: CSS3 PROPERTIES&VALUE การประกาศคุณสมบัติ \"width\" เพ่ือกาหนดความกว้างให้กับวัตถุหรืออิลิเมนต์ หากใช้งาน ร่วมกับคุณสมบัติ \"padding\" จะส่งผลให้ความกว้างมีขนาดเพ่ิมมากข้ึน เน่ืองจากเป็นการนาค่า padding มารวมเขา้ กบั ค่าความกว้างปัจจุบัน ซง่ึ อาจส่งผลให้วตั ถุหรอื อิลเิ มนตม์ ีขนาดทีผ่ ดิ เพีย้ น และ อาจส่งผลกระทบต่อวัตถุหรืออิลิเมนต์อื่นรอบข้าง โดยสามารถป้องกันการเพ่ิมข้ึนของขนาดความ กวา้ งไดโ้ ดยการประกาศคณุ สมบัติ \"box-sizing\" คา่ ท่ีกาหนดคอื \"border-box\" มีรปู แบบการกาหนด คณุ สมบตั แิ ละกาหนดคา่ ดงั น้ี Example /* css file: mystyle.css */ div.ex1 { width: 300px; background-color: bisque; } div.ex2 { width: 300px; background-color: powderblue; margin-top: 15px; padding: 25px; } div.ex3 { width: 300px; background-color: bisque; margin-top: 15px; } div.ex4 { width: 300px; background-color: powderblue; margin-top: 15px; padding: 25px; box-sizing: border-box; } Result

CHAPTER 5: CSS3 PROPERTIES&VALUE 199 คุณสมบตั ิการจดั วางตาแหนง่ วัตถุ คุณสมบัติการจัดวางตาแหน่งวัตถุ (Positioning Properties) คือ คุณสมบัติท่ีใช้สาหรับจัด ตาแหน่งวัตถุ ใหอ้ ยู่ในตาแหนง่ ที่เหมาะสม รวมถึงการแสดงผลวัตถุ โดยเฉพาะการจัดเคา้ โครงของเว็บ เพจ จาเป็นจะต้องใช้คุณสมบัติการจัดตาแหน่งวัตถุ เพื่อจัดเค้าโครงให้อยู่ในตาแหน่งท่ีต้องการและ สามารถจัดการได้งา่ ยยง่ิ ขึ้น มรี ายละเอยี ดการกาหนดคุณสมบตั ิ ดงั นี้ 1. Float การกาหนดการลอยตวั ของวตั ถุ โดยการประกาศคณุ สมบัติ \"float\" ใหก้ บั สไตลช์ ีต รปู แบบ จะส่งผลให้วัตถุลอยตัว ซึ่งจะไม่มีวัตถุใด ๆ มาซ้อนทับได้ กาหนดค่าเป็นค่าการลอยตัว ประกอบด้วย ไม่กาหนดค่า (none) ลอยตัวชิดขอบซ้าย (left) ลอยตัวชิดขอบขวา (right) กาหนดเป็นค่าแรกเริ่ม (initial) และกาหนดเปน็ คา่ สืบทอด (inherit) มีรูปแบบการกาหนดคณุ สมบตั ิและกาหนดค่า ดังน้ี Syntax float: none|left|right|initial|inherit; Example /* css file: mystyle.css */ .ex1 { float: none; height: 100px; width: 100px; background-color: powderblue; } .ex2 { float: left; height: 100px; width: 100px; background-color: yellow; } .ex3 { float: right; height: 100px; width: 100px; background-color: palegreen; }

200 CHAPTER 5: CSS3 PROPERTIES&VALUE HTML5 <!doctype html> <html> <head> <link rel=\"stylesheet\" type=\"text/css\" href=\"mystyle.css\"> </head> <body> <h1>Float</h1> <div class=\"ex1\">Float: None</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 class=\"ex2\">Float: Left</div> <p>Information science is a field primarily concerned with the analysis, collection, classification, manipulation, storage, retrieval, movement, dissemination, and protection of information.</p> <br><br> <div class=\"ex3\">Float: Right</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

CHAPTER 5: CSS3 PROPERTIES&VALUE 201 2. Clear การกาหนดให้วัตถุไม่มีวัตถุอ่ืน ๆ อยู่รอบด้าน โดยการประกาศคุณสมบัติ \"clear\" ให้กับ สไตล์ชีต รูปแบบจะส่งผลต่อการจัดตาแหน่งวัตถุ กาหนดค่าเป็นคาสั่งการกาจัดวัตถุท่ีอยู่รอบด้าน ประกอบด้วย ไม่กาหนดค่า (none) กาจัดวัตถุทางซ้าย (left) กาจัดวัตถุทางขวา (right) และกาจัด วัตถทุ ้ัง 2 ดา้ น (both) กาหนดเปน็ ค่าแรกเร่ิม (initial) และกาหนดเป็นค่าสบื ทอด (inherit) มรี ปู แบบ การกาหนดคุณสมบตั แิ ละกาหนดคา่ ดังน้ี Syntax clear: none|left|right|both|initial|inherit; Example /* css file: mystyle.css */ .block { width: 150px; height: 65px; margin-bottom: 2px; border: 2px solid green; } .clear1 { height: 60px; margin-bottom: 15px; border: 2px solid red; clear: none; } .clear2 { height: 60px; margin-bottom: 15px; border: 2px solid red; clear: left; } .clear3 { height: 60px; margin-bottom: 15px; border: 2px solid red; clear: right; } .clear4 { height: 60px; margin-bottom: 15px; border: 2px solid red; clear: both; }

202 CHAPTER 5: CSS3 PROPERTIES&VALUE HTML5 <!doctype html> <html> <head> <link rel=\"stylesheet\" type=\"text/css\" href=\"mystyle.css\"> </head> <body> <h1>Clear</h1> <div class=\"block\" style=\"float: left;\">block</div> <div class=\"clear1\">(clear: none)</div> <div class=\"block\" style=\"float: left;\">block</div> <div class=\"clear2\">(clear: left)</div> <div class=\"block\" style=\"float: right;\">block</div> <div class=\"clear3\">(clear: right)</div> <div class=\"block\" style=\"float: left;\">block</div> <div class=\"block\" style=\"float: right;\">block</div> <div class=\"clear4\">(clear: both)</div> </body> </html> Result

CHAPTER 5: CSS3 PROPERTIES&VALUE 203 3. Position การกาหนดตาแหน่งของวัตถุ โดยการประกาศคุณสมบัติ \"position\" ให้กับสไตล์ชีต รูปแบบจะส่งผลให้วัตถุอยใู่ นตาแหน่งตา่ ง ๆ ในลักษณะที่แตกต่างกัน กาหนดค่าเป็นรูปแบบตาแหน่ง ของวัตถุ ประกอบด้วย ตาแหน่งปกติ (static) ตาแหน่งที่แน่นอน (absolute) ตาแหน่งถาวรตามท่ี กาหนด สัมพันธ์กับขนาดหน้าจอแสดงผล (fixed) ตาแหน่งสัมพันธ์กับวัตถุก่อนหน้า (relative) และ ตาแหน่งคงท่ี วัตถุยึดติดเม่ือเลื่อนหน้าจอแสดงผล (sticky) กาหนดเป็นค่าแรกเริ่ม (initial) และ กาหนดเป็นค่าสบื ทอด (inherit) มรี ปู แบบการกาหนดคณุ สมบตั ิและกาหนดคา่ ดงั นี้ Syntax position: static|absolute|fixed|relative|sticky|initial|inherit; Example /* css file: mystyle.css */ div.static { position: static; border: 2px solid #48DDF0; } HTML5 <!doctype html> <html> <head> <link rel=\"stylesheet\" type=\"text/css\" href=\"mystyle.css\"> </head> <body> <h1>Position: Static</h1> <p>Information science is a field primarily concerned with the analysis, collection, classification, manipulation, storage, retrieval, movement, dissemination, and protection of information.</p> <div class=\"static\">Information Science</div> </body> </html> Result

204 CHAPTER 5: CSS3 PROPERTIES&VALUE Example /* css file: mystyle.css */ div.relative { position: relative; border: 2px solid #48DDF0; left: 50px; } HTML5 <!doctype html> <html> <head> <link rel=\"stylesheet\" type=\"text/css\" href=\"mystyle.css\"> </head> <body> <h1>Position: Relative</h1> <p>Information science is a field primarily concerned with the analysis, collection, classification, manipulation, storage, retrieval, movement, dissemination, and protection of information.</p> <div class=\"relative\">Information Science</div> </body> </html> Result Example /* css file: mystyle.css */ div.fixed { position: fixed; width: 500px; border: 2px solid #48DDF0; left: 0; bottom: 0; }

CHAPTER 5: CSS3 PROPERTIES&VALUE 205 HTML5 <!doctype html> <html> <head> <link rel=\"stylesheet\" type=\"text/css\" href=\"mystyle.css\"> </head> <body> <h1>Position: 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> <div class=\"fixed\">Information Science</div> </body> </html> Result Example /* css file: mystyle.css */ div.absolute { position: absolute; width: 200px; height: 50px; border: 2px solid #48DDF0; top: 100px; right: 0; } div.relative { position: relative; width: 300px; height: 200px; border: 2px solid #1BF980; }

206 CHAPTER 5: CSS3 PROPERTIES&VALUE HTML5 <!doctype html> <html> <head> <link rel=\"stylesheet\" type=\"text/css\" href=\"mystyle.css\"> </head> <body> <h1>Position: Absolute</h1> <p>Information science is a field primarily concerned with the analysis, collection, classification, manipulation, storage, retrieval, movement, dissemination, and protection of information.</p> <div class=\"relative\">This div element has position: relative <div class=\"absolute\">This div element has position: absulute</div> </div> </body> </html> Result Example /* css file: mystyle.css */ div.sticky { position: sticky; padding: 10px; border: 2px solid #48DDF0; background-color: #C0EFF5; top: 0; }

CHAPTER 5: CSS3 PROPERTIES&VALUE 207 HTML5 <!doctype html> <html> <head> <link rel=\"stylesheet\" type=\"text/css\" href=\"mystyle.css\"> </head> <body> <h1>Position: Sticky</h1> <div class=\"sticky\">This is Sticky !!</div> <div style=\"padding-bottom: 500px;\"> <p>Scroll back up to remove the stickyness.</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> </div> </body> </html> Result Result เมื่อเล่ือนหน้าจอลงลา่ ง วตั ถจุ ะยงั คงที่

208 CHAPTER 5: CSS3 PROPERTIES&VALUE 4. Bottom การกาหนดระยะขอบด้านล่างของวัตถุกับขอบของพ้ืนท่ีท่ีกาหนด โดยการประกาศ คุณสมบัติ \"bottom\" ให้กับสไตล์ชีต รูปแบบจะส่งผลให้วัตถุอยู่ในตาแหน่งด้านล่างตามระยะที่ กาหนด กาหนดค่าเป็นระยะขอบด้านล่าง ประกอบด้วย ค่าตัวเลขระยะขอบ ใช้หน่วยวัดเป็นพิกเซล (px) หรือร้อยละ (%) กาหนดให้โปรแกรมแสดงผลเว็บ คานวณตาแหน่งขอบด้านล่างให้อัตโนมัติ (auto) กาหนดเป็นค่าแรกเริ่ม (initial) และกาหนดเป็นค่าสืบทอด (inherit) มีรูปแบบการกาหนด คุณสมบตั ิและกาหนดค่า ดังน้ี Syntax bottom: length|auto|initial|inherit; Example /* css file: mystyle.css */ div.block { position: relative; height: 150px; border: 2px solid #48DDF0; } div.absolute { position: absolute; width: 50%; border: 2px solid green; bottom: 10px; } div.relative { position: relative; width: 50%; border: 2px solid green; bottom: 2px; } div.sticky { position: sticky; width: 50%; border: 2px solid green; bottom: 20px; } div.fixed { position: fixed; width: 50%; border: 2px solid green; bottom: 20px; }

CHAPTER 5: CSS3 PROPERTIES&VALUE 209 HTML5 <!doctype html> <html> <head> <link rel=\"stylesheet\" type=\"text/css\" href=\"mystyle.css\"> </head> <body> <h1>Bottom</h1> <div class=\"block\">position: relative <div class=\"absolute\">position: absolute and bottom 10px</div> </div></br> <div class=\"block\">position: relative <div class=\"relative\">position: relative and bottom 2px</div> </div></br> <div class=\"block\">position: relative <div class=\"sticky\">position: sticky and bottom 20px</div> </div> <div class=\"fixed\">position: fixed and bottom 20px</div> </body> </html> Result

210 CHAPTER 5: CSS3 PROPERTIES&VALUE 5. Left การกาหนดระยะขอบด้านซ้ายของวัตถุกับขอบของพ้ืนท่ีท่ีกาหนด โดยการประกาศ คุณสมบัติ \"left\" ให้กับสไตล์ชีต รูปแบบจะส่งผลให้วัตถุอยู่ในตาแหน่งด้านซ้ายตามระยะท่ีกาหนด กาหนดคา่ เปน็ ระยะขอบดา้ นซ้าย ประกอบดว้ ย คา่ ตัวเลขระยะขอบ ใช้หนว่ ยวดั เป็นพกิ เซล (px) หรือ ร้อยละ (%) กาหนดให้โปรแกรมแสดงผลเว็บ คานวณตาแหน่งขอบด้านล่างให้อัตโนมัติ (auto) กาหนดเป็นค่าแรกเร่ิม (initial) และกาหนดเป็นค่าสืบทอด (inherit) มีรูปแบบการกาหนดคุณสมบัติ และกาหนดค่า ดังนี้ Syntax left: length|auto|initial|inherit; Example /* css file: mystyle.css */ div.block { position: relative; height: 250px; border: 2px solid #48DDF0; } div.ex1 { position: absolute; width: 180px; height: 150px; border: 2px solid green; left: auto; } div.ex2 { position: absolute; width: 180px; height: 150px; border: 2px solid green; left: 250px; }

CHAPTER 5: CSS3 PROPERTIES&VALUE 211 HTML5 <!doctype html> <html> <head> <link rel=\"stylesheet\" type=\"text/css\" href=\"mystyle.css\"> </head> <body> <h1>Left</h1> <div class=\"block\">position: relative <div class=\"ex1\">position: absolute and left: auto</div> <div class=\"ex2\">position: absolute and left: 250px</div> </div> </body> </html> Result 6. Right การกาหนดระยะขอบด้านขวาของวัตถุกับขอบของพ้ืนท่ีท่ีกาหนด โดยการประกาศ คุณสมบัติ \"right\" ให้กับสไตล์ชีต รูปแบบจะส่งผลให้วัตถุอยู่ในตาแหน่งด้านขวาตามระยะท่ีกาหนด กาหนดค่าเปน็ ระยะขอบด้านขวา ประกอบด้วย คา่ ตัวเลขระยะขอบ ใช้หน่วยวดั เป็นพิกเซล (px) หรอื ร้อยละ (%) กาหนดให้โปรแกรมแสดงผลเว็บ คานวณตาแหน่งขอบด้านล่างให้อัตโนมัติ (auto) กาหนดเป็นค่าแรกเริ่ม (initial) และกาหนดเป็นค่าสืบทอด (inherit) มีรูปแบบการกาหนดคุณสมบัติ และกาหนดคา่ ดังน้ี Syntax right: length|auto|initial|inherit;

212 CHAPTER 5: CSS3 PROPERTIES&VALUE Example /* css file: mystyle.css */ div.block { position: relative; height: 250px; border: 2px solid #48DDF0; } div.ex1 { position: absolute; width: 180px; height: 150px; border: 2px solid green; right: 0; } div.ex2 { position: absolute; width: 180px; height: 150px; border: 2px solid green; right: 250px; } HTML5 <!doctype html> <html> <head> <link rel=\"stylesheet\" type=\"text/css\" href=\"mystyle.css\"> </head> <body> <h1>Right</h1> <div class=\"block\">position: relative <div class=\"ex1\">position: absolute and right: 0</div> <div class=\"ex2\">position: absolute and right: 250px</div> </div> </body> </html>

CHAPTER 5: CSS3 PROPERTIES&VALUE 213 Result 7. Top การกาหนดระยะขอบด้านบนของวัตถุกับขอบของพื้นที่ท่ีกาหนด โดยการประกาศ คุณสมบัติ \"top\" ให้กับสไตล์ชีต รูปแบบจะส่งผลให้วัตถุอยู่ในตาแหน่งด้านบนตามระยะท่ีกาหนด กาหนดคา่ เป็นระยะขอบด้านบน ประกอบด้วย ค่าตวั เลขระยะขอบ ใช้หน่วยวัดเปน็ พกิ เซล (px) หรือ ร้อยละ (%) กาหนดให้โปรแกรมแสดงผลเว็บ คานวณตาแหน่งขอบด้านล่างให้อัตโนมัติ (auto) กาหนดเป็นค่าแรกเร่ิม (initial) และกาหนดเป็นค่าสืบทอด (inherit) มีรูปแบบการกาหนดคุณสมบัติ และกาหนดคา่ ดงั นี้ Syntax top: length|auto|initial|inherit; Example /* css file: mystyle.css */ div.block { position: relative; height: 250px; border: 2px solid #48DDF0; } div.ex1 { position: absolute; border: 2px solid green; top: 0; } div.ex2 { position: absolute; border: 2px solid green; top: 100px; }

214 CHAPTER 5: CSS3 PROPERTIES&VALUE HTML5 <!doctype html> <html> <head> <link rel=\"stylesheet\" type=\"text/css\" href=\"mystyle.css\"> </head> <body> <h1>Top</h1> <div class=\"block\"> <div class=\"ex1\">position: absolute and top: 0</div> <div class=\"ex2\">position: absolute and top: 150px</div> </div> </body> </html> Result 8. z-index การระบุลาดบั ชน้ั ของวัตถุหรืออิลิเมนต์ที่ซ้อนทับกัน โดยการประกาศคุณสมบัติ \"z-index\" ให้กับสไตล์ชีต รูปแบบจะมีผลกับวัตถุหรืออิลิเมนต์ที่กาหนดคุณสมบัติ \"position\" โดยวัตถุที่มีเลข ลาดับมากจะะอยู่ด้านบนและวัตถุท่ีมีเลขลาดับน้อยจะอยู่ด้านล่าง คล้ายกับการทางานของเลเยอร์ (Layer) กาหนดค่าเป็นตัวเลข (number) กาหนดเป็นค่าอัตโนมัติ (auto) กาหนดเป็นค่าแรกเร่ิม (initial) และกาหนดเป็นคา่ สืบทอด (inherit) มรี ปู แบบการกาหนดคณุ สมบตั ิและกาหนดคา่ ดังน้ี Syntax z-index: number|auto|initial|inherit;

CHAPTER 5: CSS3 PROPERTIES&VALUE 215 Example /* css file: mystyle.css */ div.block1 { position: absolute; height: 140px; width: 140px; background-color: #FC0; text-align:right; z-index: 1; } div.block2 { position: absolute; height: 140px; width: 140px; left: 50px; top: 120px; background-color: #9C0; text-align:right; z-index: 2; } div.block3 { position: absolute; height: 140px; width: 140px; left: 90px; top: 170px; background-color: #C60; text-align:right; z-index: 3; } HTML5 <!doctype html> <html> <head> <link rel=\"stylesheet\" type=\"text/css\" href=\"mystyle.css\"> </head> <body> <h1>Z-INDEX</h1> <div class=\"block1\">A: z-index: 1</div> <div class=\"block2\">B: z-index: 2</div> <div class=\"block3\">C: z-index: 3</div> </body> </html>

216 CHAPTER 5: CSS3 PROPERTIES&VALUE Result 9. Clip การตัดขอบพื้นท่ีรูปสี่เหล่ียมในกรณีที่พ้ืนที่มีขนาดใหญ่กว่าอิลิเมนต์ที่มีอยู่เดิม โดยการ ประกาศคุณสมบัติ \"clip\" ให้กับสไตล์ชีต ใช้การระบุพิกัดเพื่อตัดขอบพ้ืนที่ตามมุม กาหนดค่าเป็น รูปร่างของมุม โดยใช้ฟังก์ชัน \"rect()\" กาหนดค่าให้กับฟังก์ชันเป็นระยะของมุมแต่ละด้าน ประกอบด้วย rect(มุมบนซ้าย, มุมบนขวา, มุมล่างซ้าย, มุมล่างขวา) เช่น clip: rect(50px, 40px, 200px, 20px) เป็นต้น กาหนดเป็นค่าอัตโนมัติ (auto) กาหนดเป็นค่าแรกเร่ิม (initial) และกาหนด เปน็ คา่ สบื ทอด (inherit) มรี ปู แบบการกาหนดคุณสมบตั แิ ละกาหนดคา่ ดังนี้ Syntax clip: shape|auto|initial|inherit; Example /* css file: mystyle.css */ div.ex1 { position: absolute; background-color: #9C0; width: 140px; clip: auto; } div.ex2 { position: absolute; background-color: #9C0; width: 140px; clip: rect(10px, 100px, 100px, 10px); }

CHAPTER 5: CSS3 PROPERTIES&VALUE 217 HTML5 <!doctype html> <html> <head> <link rel=\"stylesheet\" type=\"text/css\" href=\"mystyle.css\"> </head> <body> <h1>Clip</h1> <div class=\"ex1\">Information science is a field primarily concerned with the analysis, collection, classification, manipulation, storage, retrieval, movement, dissemination, and protection of information.</div> <div class=\"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

218 CHAPTER 5: CSS3 PROPERTIES&VALUE 10. Display การกาหนดการแสดงผลวัตถุทางหน้าจอ โดยการประกาศคุณสมบัติ \"display\" ให้กับ สไตล์ชีต กาหนดค่าเป็นรูปแบบการแสดงผล ประกอบด้วย ไม่แสดงผล (none) แสดงผลภายใน บรรทัด (inline) แสดงผลแบบกลุ่ม (block) และแสดงผลแบบกลุ่มภายในบรรทัด (inline-block) กาหนดเป็นค่าแรกเริ่ม (initial) และกาหนดเป็นค่าสืบทอด (inherit) มีรูปแบบการกาหนดคุณสมบัติ และกาหนดค่า ดงั นี้ Syntax display: value|initial|inherit; Example /* css file: mystyle.css */ p.ex1 {display: none;} p.ex2 {display: inline;} p.ex3 {display: block;} p.ex4 {display: inline-block;} p {color: red;} HTML5 <!doctype html> <html> <head> <link rel=\"stylesheet\" type=\"text/css\" href=\"mystyle.css\"> </head> <body> <h1>Display: None</h1> <div>Information science is a <p class=\"ex1\">field primarily concerned</p> with the analysis, collection, classification, manipulation, storage, retrieval, movement, dissemination, and protection of information.</div> <h1>Display: Inline</h1> <div>Information science is a <p class=\"ex2\">field primarily concerned</p> with the analysis, collection, classification, manipulation, storage, retrieval, movement, dissemination, and protection of information.</div> <h1>Display: Block</h1> <div>Information science is a <p class=\"ex3\">field primarily concerned</p> with the analysis, collection, classification, manipulation, storage, retrieval, movement, dissemination, and protection of information.</div> <h1>Display: Inline-Block</h1> <div>Information science is a <p class=\"ex4\">field primarily concerned</p> with the analysis, collection, classification, manipulation, storage, retrieval, movement, dissemination, and protection of information.</div> </body> </html>

CHAPTER 5: CSS3 PROPERTIES&VALUE 219 Result 11. Overflow การกาหนดการแสดงผลข้อความที่มีความยาวกว่าพ้ืนที่ท่ีกาหนด โดยการประกาศ คณุ สมบตั ิ \"overflow\" ใหก้ บั สไตล์ชีต รูปแบบจะส่งผลให้ขอ้ ความทลี่ ้นกรอบพ้นื ท่ี อยู่ในขอบเขตหรือ รูปแบบที่เหมาะสม กาหนดค่าเป็นรูปแบบการแสดงผลข้อความ ประกอบด้วย แสดงให้เห็นท้ังหมด (visible) ซ่อนส่วนที่เกิน (hidden) แสดงแถบเล่ือนในแนวต้ังและแนวนอน (scoll) แสดงแถบเล่ือน แนวตั้งอัตโนมัติเม่ือข้อความล้นกรอบพื้นที่ (auto) กาหนดเป็นค่าแรกเร่ิม (initial) และกาหนดเป็น ค่าสบื ทอด (inherit) มรี ปู แบบการกาหนดคุณสมบตั แิ ละกาหนดค่า ดังนี้ Syntax overflow: visible|hidden|scroll|auto|initial|inherit;

220 CHAPTER 5: CSS3 PROPERTIES&VALUE Example /* css file: mystyle.css */ div.ex1 { overflow: scroll; } div.ex2 { overflow: hidden; } div.ex3 { overflow: auto; } div.ex4 { overflow: visible; } div { height: 200px; width: 200px; background-color: powderblue; } HTML5 <!doctype html> <html> <head> <link rel=\"stylesheet\" type=\"text/css\" href=\"mystyle.css\"> </head> <body> <h1>Overflow: Scroll</h1> <div class=\"ex1\">Information science is a field primarily concerned with the analysis, collection, classification, manipulation, storage, retrieval, movement, dissemination, and protection of information.</div> <h1>Overflow: Hidden</h1> <div class=\"ex2\">Information science is a field primarily concerned with the analysis, collection, classification, manipulation, storage, retrieval, movement, dissemination, and protection of information.</div> <h1>Overflow: Auto</h1> <div class=\"ex3\">Information science is a field primarily concerned with the analysis, collection, classification, manipulation, storage, retrieval, movement, dissemination, and protection of information.</div> <h1>Overflow: Visible</h1> <div class=\"ex4\">Information science is a field primarily concerned with the analysis, collection, classification, manipulation, storage, retrieval, movement, dissemination, and protection of information.</div> </body> </html>

CHAPTER 5: CSS3 PROPERTIES&VALUE 221 Result

222 CHAPTER 5: CSS3 PROPERTIES&VALUE คุณสมบตั ติ วั อกั ษร คุณสมบัติตัวอักษร (Font Properties) คือ คุณสมบัติท่ีใช้สาหรับกาหนดรูปแบบและ ลักษณะของตัวอักษร เพื่อให้สามารถแสดงตัวอักษรในเว็บเพจตามรูปแบบที่ต้องการ เช่น แบบอักษร สอี ักษร ขนาดอกั ษร เปน็ ตน้ มรี ายละเอียดการกาหนดคุณสมบัติ ดงั น้ี 1. Font Family การกาหนดตระกูลของตัวอักษร โดยการประกาศคุณสมบัติ \"font-family\" ให้กับสไตล์ชตี ซึ่งรูปแบบของตัวอักษรจะแบ่งเป็น 2 ตระกูล ประกอบด้วย แบบมีเชิง (Serif) มีลักษณะเป็นขีดบาง อยู่ทปี่ ลายของตวั อักษร นิยมใช้สาหรบั พิมพ์เน้ือหาเปน็ ย่อหน้า และแบบไม่มเี ชงิ (Sans Serif) ไม่มีขีด บางที่ปลายอักษร นิยมใช้สาหรับพิมพ์หัวข้อหลักหรือหัวเรื่อง กาหนดค่าเป็นชื่อของตระกูลตัวอักษร เช่น \"Times New Roman\", Times, serif หรือ \"Helvetica Neue\", Helvetica, Arial, sans-serif เป็นต้น กาหนดเป็นค่าแรกเร่ิม (initial) และกาหนดเป็นค่าสืบทอด (inherit) มีรูปแบบการกาหนด คณุ สมบตั ิและกาหนดคา่ ดังนี้ Syntax font-family: family-name|generic-family|initial|inherit; Example /* css file: mystyle.css */ p.serif {font-family: \"Times New Roman\", Times, serif;} p.s-serif {font-family: \"Helvetica Neue\", Helvetica, Arial, sans-serif;} HTML5 <!doctype html> <html> <head> <link rel=\"stylesheet\" type=\"text/css\" href=\"mystyle.css\"> </head> <body> <h1>Serif</h1> <p class=\"serif\">Information science is a field primarily concerned with the analysis, collection, classification, manipulation, storage, retrieval, movement, dissemination, and protection of information.</p> <h1>Sans-Serif</h1> <p class=\"s-serif\">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 223 Result 2. Font Style การกาหนดลักษณะตัวอักษร โดยการประกาศคุณสมบัติ \"font-style\" ให้กับสไตล์ชีต รปู แบบจะมผี ลกบั ลักษณะตัวอักษรในเว็บเพจ กาหนดค่าเปน็ ลักษณะตวั อักษร ประกอบด้วย ตัวปกติ (normal) ตัวเอียง (italic, oblique) กาหนดเป็นค่าแรกเร่ิม (initial) และกาหนดเป็นค่าสืบทอด (inherit) มรี ปู แบบการกาหนดคุณสมบตั ิและกาหนดค่า ดงั นี้ Syntax font-style: normal|italic|oblique|initial|inherit; Example /* css file: mystyle.css */ p.normal {font-style: normal;} p.italic {font-style: italic;} p.oblique {font-style: oblique;} HTML5 <!doctype html> <html> <head> <link rel=\"stylesheet\" type=\"text/css\" href=\"mystyle.css\"> </head> <body> <h1>Normal</h1> <p class=\"normal\">Information science is a field primarily concerned with the analysis, collection, classification, manipulation, storage, retrieval, movement, dissemination, and protection of information.</p> <h1>Italic/Oblique</h1> <p class=\"italic\">Information science is a field primarily concerned with the analysis, collection, classification, manipulation, storage, retrieval, movement, dissemination, and protection of information.</p> </body> </html>

224 CHAPTER 5: CSS3 PROPERTIES&VALUE Result 3. Font Size การกาหนดขนาดตวั อักษร โดยการประกาศคุณสมบัติ \"font-size\" ใหก้ บั สไตล์ชตี รปู แบบ จะส่งผลให้ตัวอักษรมีขนาดเล็กหรือใหญ่ตามท่ีกาหนด กาหนดค่าเป็นขนาดตัวอักษร ประกอบด้วย ค่าตัวเลขตามหน่วยวัดค่า ซึ่งนิยมใช้หน่วยวัดเป็น px pt em กาหนดเป็นค่าร้อยละ (%) กาหนดเป็น ช่ือขนาดของตัวอักษร ได้แก่ xx-small x-small small medium large x-large xx-large smaller larger กาหนดเป็นค่าแรกเริ่ม (initial) และกาหนดเป็นค่าสืบทอด (inherit) มีรูปแบบการกาหนด คณุ สมบตั ิและกาหนดคา่ ดังน้ี Syntax font-size: medium|xx-small|x-small|small|large|x-large|xx-large|smaller|larger|length|initial |inherit; Example /* css file: mystyle.css */ p.xxsmall {font-size: xx-small;} p.xsmall {font-size: x-small;} p.small {font-size: small;} p.medium {font-size: medium;} p.large {font-size: large;} p.xlarge {font-size: x-large;} p.xxlarge {font-size: xx-large;} p.smaller {font-size: smaller;} p.larger {font-size: larger;} p.percent {font-size:100%;} p.pixel {font-size: 16px;} p.em {font-size:1em;} p.point {font-size:12pt;} p.initial {font-size: initial;}

CHAPTER 5: CSS3 PROPERTIES&VALUE 225 HTML5 <!doctype html> <html> <head> <link rel=\"stylesheet\" type=\"text/css\" href=\"mystyle.css\"> </head> <body> <h1>Font Size</h1> <p class=\"xxsmall\">xx-small size</p> <p class=\"xsmall\">x-small size</p> <p class=\"small\">small size</p> <p class=\"medium\">medium size</p> <p class=\"large\">large size</p> <p class=\"xlarge\">x-large size</p> <p class=\"xxlarge\">xx-large size</p> <p class=\"smaller\">smaller size</p> <p class=\"larger\">larger size</p> <p class=\"percent\">100 percent size</p> <p class=\"pixel\">16 pixel size</p> <p class=\"em\">1 em size</p> <p class=\"point\">12 point size</p> <p class=\"initial\">initial size</p> </body> </html> Result

226 CHAPTER 5: CSS3 PROPERTIES&VALUE 4. Font Weight การกาหนดนา้ หนกั ของตัวอักษร โดยการประกาศคุณสมบตั ิ \"font-weight\" ใหก้ บั สไตล์ชีต รูปแบบจะส่งผลให้ตัวอักษรมีความหนาหรือบางตามท่ีกาหนด กาหนดค่าเป็นน้าหนักตัวอักษร ประกอบด้วย ค่าตัวเลข 100 - 900 และช่ือน้าหนักของตัวอักษร ได้แก่ normal bold bolder lighter กาหนดเป็นค่าแรกเร่ิม (initial) และกาหนดเป็นค่าสืบทอด (inherit) มีรูปแบบการกาหนด คุณสมบัติและกาหนดค่า ดงั น้ี Syntax font-weight: normal|bold|bolder|lighter|number|initial|inherit; Example /* css file: mystyle.css */ p.normal {font-weight: normal;} p.bold {font-weight: bold;} p.bolder {font-weight: bolder;} p.lighter {font-weight: lighter;} p.num100 {font-weight: 100;} p.num300 {font-weight: 300;} p.num500 {font-weight: 500;} p.num700 {font-weight: 700;} p.num900 {font-weight: 900;} p.initial {font-weight: initial;} HTML5 <!doctype html> <html> <head> <link rel=\"stylesheet\" type=\"text/css\" href=\"mystyle.css\"> </head> <body> <h1>Font Weight</h1> <p class=\"normal\">weight: normal</p> <p class=\"bold\">weight: bold</p> <p class=\"bolder\">weight: bolder</p> <p class=\"loghter\">weight: lighter</p> <p class=\"num100\">weight: 100</p> <p class=\"num300\">weight: 300</p> <p class=\"num500\">weight: 500</p> <p class=\"num700\">weight: 700</p> <p class=\"num900\">weight: 900</p> <p class=\"initial\">weight: initial</p> </body> </html>

CHAPTER 5: CSS3 PROPERTIES&VALUE 227 Result 5. Font Variant การแปลงตัวอักษรภาษาอังกฤษตัวพิมพ์เล็กให้เป็นตัวพิมพ์ใหญ่ โดยที่ขนาดตัวอักษรจะ เท่ากับตัวพิมพ์เล็ก โดยการประกาศคุณสมบัติ \"font-variant\" ให้กับสไตล์ชีต กาหนดค่าเป็นรูปแบบ การแปลงตัวอักษร ประกอบด้วย normal และ small-caps กาหนดเป็นค่าแรกเริ่ม (initial) และ กาหนดเป็นค่าสืบทอด (inherit) มีรูปแบบการกาหนดคุณสมบัตแิ ละกาหนดค่า ดงั น้ี Syntax font-variant: normal|small-caps|initial|inherit; Example /* css file: mystyle.css */ p.ex1 { font-variant: normal; } p.ex2 { font-variant: small-caps; }

228 CHAPTER 5: CSS3 PROPERTIES&VALUE HTML5 <!doctype html> <html> <head> <link rel=\"stylesheet\" type=\"text/css\" href=\"mystyle.css\"> </head> <body> <h1>Font Variant</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. (normal)</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. (small-caps)</p> </body> </html> Result 6. Font Shorthand การกาหนดรูปแบบตัวอักษร โดยการประกาศคุณสมบตั ิ \"font\" ใหก้ บั สไตล์ชตี ซ่งึ สามารถ กาหนดคุณสมบัติต่าง ๆ ของตัวอักษรได้ในคุณสมบัติเดียว กาหนดค่าเป็นตระกูลของตัวอักษร ลักษณะตัวอักษร ขนาดตัวอักษรหรือความสูงของบรรทัด น้าหนักตัวอักษร และการแปลงตัวอักษร กาหนดเป็นค่าแรกเริ่ม (initial) และกาหนดเป็นค่าสืบทอด (inherit) มีรูปแบบการกาหนดคุณสมบัติ และกาหนดคา่ ดงั นี้ Syntax font: font-style font-variant font-weight font-size/line-height font-family|initial|inherit; Example /* css file: mystyle.css */ p.font {font: oblique bold 20px Georgia, serif;}

CHAPTER 5: CSS3 PROPERTIES&VALUE 229 HTML5 <!doctype html> <html> <head> <link rel=\"stylesheet\" type=\"text/css\" href=\"mystyle.css\"> </head> <body> <h1>Font</h1> <p class=\"font\">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 คณุ สมบัติขอ้ ความ คุณสมบตั ิขอ้ ความ (Text Properties) คอื คณุ สมบตั ิท่ใี ชส้ าหรับกาหนดรูปแบบของขอ้ ความ เพ่ือให้สามารถแสดงรูปแบบข้อความตามท่ีต้องการ เช่น การกาหนดสีข้อความ การจัดแนวข้อความ การกาหนดย่อหน้าข้อความ การกาหนดทิศทางข้อความ เป็นต้น มีรายละเอียดการกาหนดคุณสมบตั ิ ดงั น้ี 1. Text Color การกาหนดสีข้อความ โดยการประกาศคุณสมบัติ \"color\" ให้กับสไตล์ชีต รูปแบบจะมีผล กับข้อความในเว็บเพจ กาหนดค่าเป็นค่าสี (color) ประกอบด้วย ชื่อสี รหัสสีเลขฐานสิบหก หรือค่าสี รูปแบบ RGB กาหนดเป็นค่าแรกเริ่ม (initial) และกาหนดเป็นค่าสืบทอด (inherit) มีรูปแบบการ กาหนดคุณสมบัติและกาหนดค่า ดังน้ี Syntax color: color|initial|inherit;

230 CHAPTER 5: CSS3 PROPERTIES&VALUE Example /* css file: mystyle.css */ h1 {color: #DC143C;} p {color: blue;} div {color: rgb(34,139,34);} HTML5 <!doctype html> <html> <head> <link rel=\"stylesheet\" type=\"text/css\" href=\"mystyle.css\"> </head> <body> <h1>Text Color</h1> <p>Information science is a field primarily concerned with the analysis, collection, classification, manipulation, storage, retrieval, movement, dissemination, and protection of information.</p> <div>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 2. Text Alignment การจัดแนวข้อความ โดยการประกาศคุณสมบัติ \"text-align\" ให้กับสไตล์ชีต กาหนดค่า เป็นค่าตาแหน่งท่ีต้องการจัดแนวข้อความ ประกอบด้วย ชิดขอบซ้าย (left) กึ่งกลาง (center) ชิด ขอบขวา (right) และกระจายเต็มพื้นท่ี (justify) กาหนดเป็นค่าแรกเร่ิม (initial) และกาหนดเป็นค่า สืบทอด (inherit) มีรปู แบบการกาหนดคุณสมบัตแิ ละกาหนดค่า ดงั นี้ Syntax text-align: left|right|center|justify|initial|inherit;


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