Recomendados
Mais conteúdo relacionado
Destaque
Destaque (13)
Semelhante a Css 3
Css 3
- 1. CSS คือ อะไร • CSS ย่อมาจาก Cascading Style Sheet ซึ่งเราจะ ใช้ CSS เพื่อให้แก้ไขคุณสมบัติของเว็บเพจ ให้ มีหน้าตา สีสันหรือรูปแบบเป็นไปตามที่ต้องการ • CSS มีลักษณะคล้ายหน้ากาก สำาหรับเปลี่ยนรูป ร่างหน้าตาของเว็บเพจให้มีรูปแบบที่ต่างออกไป เช่น การเปลี่ยนสีสน การจัดวางข้อความ รูป ั แบบตัวอักษรที่ใช้ ตำาแหน่งของรูปภาพ ระยะ ห่างจากขอบเว็บเพจ ฯลฯ สรุป ก็ค อ เว็บ เพจ ื เดีย วกัน หากมีก ารใช้ CSS ที่ต ่า งกัน ของ รูป ร่า งหน้า ตาก็จ ะมีผ ลลัพ ธ์ท ี่ต ่า งออกไป
- 2. ประวัต ิแ ละความเป็น มา ของ CSS • CSS เริ่มต้นมาตังแต่ปี 2513 ้ • การแสดงผลของ CSS นั้นขึ้นอยู่กับคนเขียนเว็บ web browser ทีตอนนั้นคนรู้จกยังน้อย และไม่ได้ ่ ั รับความนิยม • ปี 2539 ได้ประกาศใช้ CSS1 อย่างเป็นทางการ เสร็จในธันวาคมปีนั้น • วันที่ 4 พฤศจิกายน 2540 ได้สร้างออกมาเป็น CSS2 และถูกเผยแพร่ โดย W3C เมื่อ 12 พฤษภาคม 2541 • โดย CSS3 ก็เริ่มพัฒนาในปี 2541 และก็ยังพัฒนา กันจนถึงปี 2552 ในปี 2548 กลุ่มทีดูแล CSS ได้ ่ ทำาการปรับปรุง CSS ให้มีข้อกำาหนดที่เจาะจงมาก ขึ้น ดังนั้นเลยทำาให้ มาตรฐานทีประกาศไปแล้วก็ ่
- 3. CSS 3 • (CSS Level 3) ยังอยู่ในขั้นตอนการพัฒนาโดย WC3 • แต่ในบางคุณสมบัติก็อาจจะกล่าวได้ว่าเป็น มาตรฐานไปแล้ว เพราะบราวเซอร์ชนนำา ไม่ว่า ั้ จะเป็น IE , Firefox , Safari , Chome หรือ Opera ได้บรรจุคุณสมบัติหลายอย่างของ CSS3 ไว้ใน บราวเซอร์ของตน นั่นหมายความว่า เรา สามารถเขียนโค้ด CSS3 แล้วนำาไปใช้กับ บราวเซอร์รุ่นใหม่ๆได้แล้ว
- 4. ประโยชน์ข อง CSS3 1. การใช้ CSS ในการจัดรูปแบบการแสดงผล จะช่วย ลดการใช้ภาษา HTML ในการตกแต่งเอกสาร เว็บเพจ ทำาให้ code ภายในเอกสาร HTML เหลือ เพียงส่วนเนื้อหา ทำาให้เข้าใจง่ายขึ้น การแก้ไข เอกสารทำาได้ง่ายและรวดเร็ว 2. เมื่อ code ภายในเอกสาร HTML ลดลง ทำาให้ ขนาดไฟล์เล็กลง จึงดาวน์โหลดได้เร็ว 3. สามารถกำาหนดรูปแบบการแสดงผลจากคำาสั่ง style sheet ชุดเดียวกัน ให้มีผลกับเอกสาร HTML ทั้งหน้า หรือทุกหน้าได้ ทำาให้เวลาแก้ไขหรือ ปรับปรุงทำาได้ง่าย ไม่ต้องไล่ตามแก้ที่ HTML tag
- 5. ประโยชน์ข อง CSS3 4. สามารถควบคุมการแสดงผลให้เหมือนกัน หรือ ใกล้เคียงกัน ได้ในหลาย Web Browser 5. สามารถกำาหนดการแสดงผลในรูปแบบที่เหมาะ กับสื่อชนิดต่างๆ ไม่ว่าจะเป็นการแสดงผลบน หน้าจอ, บนกระดาษเมื่อสังพิมพ์, บนมือถือ หรือ ่ บน PDA โดยที่เป็นเนือหาเดียวกัน ้ 6. ทำาให้เป็นเว็บไซต์ที่มีมาตรฐาน ปัจจุบนการใช้ ั attribute ของ HTML ตกแต่งเอกสารเว็บเพจ นั้น ล้าสมัยแล้ว W3C แนะนำาให้เราใช้ CSS แทน ดัง นั้นหากเราใช้ CSS กับเอกสาร HTML ของเรา ก็
- 6. • ตัวอย่างกรณีทจัดรูปแบบการแสดงผลด้วยภาษา ี่ HTML <html><body> <h1><font color="red" face="Arial"> • วิธ ีด แ ลรัก ษาสุข ภาพ</font></h1> ู <p><font color="black" face="Arial"><b> • รับ ประทานอาหารทีม ีป ระโยชน์ หมั่น ออกกำา ลัง กาย และ ่ พัก ผ่อ นให้เ พีย งพอ</b></font></p> <h1><font color="red" face="Arial"> • วิธ ีก น ผลไม้ท ี่ถ ก ต้อ ง</font></h1> ิ ู <p><font color ="black" face="Arial"><b>ให้ก น ผลไม้แ ค่ท ล ะ ิ ี อย่า ง เช่น จะกิน มะม่ว งก็ม ะม่ว งอย่า งเดีย วทัง มือ เพือ ให้ ้ ้ ่ ร่า งกายจัด เตรีย มการย่อ ยได้ง า ย ไม่ส บ สน นอกจากนี้ย ง ่ ั ั ไม่ค วรกิน ผลไม้ท น ทีห ลัง อาหาร ถ้า ทานมือ หลัก แล้ว ควร ั ้ รออย่า งน้อ ย 20 นาที </b></font></p>
- 7. • ตัวอย่าง เมื่อเปลี่ยนมาใช้คำาสั่ง style sheet จัดรูปแบบการแสดงผลแทนการใช้ code ภาษา HTML ทำาให้ code ภายในเอกสารอ่านเข้าใจง่าย และแก้ไขได้ง่ายขึ้น • <html><head> <style type="text/css"> h1{color:red; font-family:Arial; } p{color:black; font-family:Arial; font-weight:bold } </style> </head> <body> <h1>วิธ ีด ูแ ลรัก ษาสุข ภาพ</h1> <p>รับ ประทานอาหารที่ม ีป ระโยชน์ หมั่น ออก กำา ลัง กาย และพัก ผ่อ นให้เ พีย งพอ </p> <h1>วิธ ีก น ผลไม้ท ี่ถ ูก ต้อ ง</h1> ิ <p> ให้ก ิน ผลไม้แ ค่ท ีล ะอย่า ง เช่น จะกิน มะม่ว งก็ มะม่ว งอย่า งเดีย วทั้ง มื้อ เพือ ให้ร ่า งกายจัด เตรีย ม ่ การย่อ ยได้ง ่า ย ไม่ส ับ สน นอกจากนี้ย ัง ไม่ค วรกิน ผลไม้ท ัน ทีห ลัง อาหาร ถ้า ทานมื้อ หลัก แล้ว ควรรอ
- 8. การอ่า น และ การเรีย กชื่อ CSS3 Selectors • หมวดหมู่ของ CSS3 Selectors ที่มีอยู่ในปัจจุบน ั นั้น W3C ได้แยกออกจากกันหลากหลายรูปแบบ และปรับเปลี่ยนโยกย้ายกลุ่มมากไปพอสมควร จาก CSS2.1 • การเรียกชือหลักๆ ของ Selectors CSS3 ได้ ่ แยกแยะหมวดหมู่ของ Selectors ที่เอาไว้ใช้งาน หลักๆ เป็น 4กลุ่ม คือ • 1. Group of selectors • 2. Simple Selectors • 3. Pseudo-elements
- 9. Group of Selectors • คือ การรวม Selectorsของ CSSหลายหลายอัน เข้ามาอยู่ด้วยกัน โดยใช้ เครื่องหมาย "จุลภาค" หรือเรียกว่า "ลูกนำ้า" หรือ ภาษาอังกฤษ เรียก Comma ( , )เช่น • หมายถึง ให้ a และ "อะไรก็ตามที่มี class เท่ากับ "ต้นไม้" และ strong มีตัวหนังสือที่มีคาสีเท่ากับ ่ รหัส RGB 255,255,255 (สีขาว) • หรือเป็นการนำาเอา ชุดของ Selectorที่มีตั้งแต่
- 10. 1. Type Selectors • Type Selectors คือ ชือของ Element ของภาษา ่ ที่ CSS นี้สงงานอยู่ เช่น ถ้าเป็น Xhtml เราสังเกต ั่ เวลาเขียน h1 {font-size: 18px;} h1นั่นก็คอ ื type selector • ที่บอกว่า "Element ของภาษาที่ CSS นี้สงงานั่ อยู่" ก็เพราะว่า ภาษา CSS ไม่ได้มีความสมมารถ แค่เพียงจัดหน้าให้กับ HTML อย่างเดียวเท่านั้น • บางครั้งเราเขียน CSS เพื่อจัดหน้า SVG หรือ XML
- 11. 2. Universal Selector • Universal Selector หมายความ ได้ว่า "อะไร ก็ตาม" ที่เราเห็นเป็นรูปร่างใน Selector คือ เครื่องหมาย "ดอกจัน" ( * )รหัส [U+002A] • หลายๆ คนที่เคยใช้เอาไว้ Reset ค่า CSS ให้เป็น 0 เช่น * {padding: 0;} คือ ทุกๆ อย่าง ให้มี padding ทั้ง 4ด้าน เป็น ศูนย์ 2.1 Attribute Selectors • Attribute Selectors ของ CSS3ได้แบ่งย่อยออก เป็น 2กลุ่ม กลุ่มแรก คือ การกล่าวถึง "ค่า ของ Attribute“ กันตรงๆ และ กลุ่มที่สอง คือ การกล่าวถึง "ค่า ของ Attribute"เป็นบาง
- 12. 2.1.1 [attribute] • หรือ เวลาเรานำามาเขียนจริง h1[id] {}หรือ a[rel] {color: red;} หมายถึง ให้กระทำาการแสดง ผล อะไรก็ตามที่มี Attributeข้างต้น • 2.1.2 [attribute="value"] • คือ Element ใดๆ ก็ตามที่มี attribute ซึ่ง "มีคา" ่ เท่ากับที่กล่าวมา เช่น • อ่านว่า จงทำา blockqoute ที่มี title เท่ากับ "สม พร" ให้มี สีพื้นหลัง เท่ากับ รหัส rgb 50,50,50และมีคา โปร่งแสงที่ 0.5 ่
- 13. ถ้าเรามี HTMLในลักษณะนี้ • เราสามารถเขีย น CSSได้ใ นรูป แบบนี้ • อ่านว่า ให้กระทำาการ "ใส่ เส้นขอบ ที่มค่าสีี hue = 30, saturation=100%, lightnes=20%"กับ "imgที่มี alt attribute ซึ่งมีคำาว่า "ดวงจันทร์" ที่ ถูกคันจากคำาอื่นๆ ด้วยช่องว่าง" ่
- 14. Pseudo-elements • ::first-line คือ แถวแรก • ::first-letter คือ ตัวแรก • ::before คือ ก่อน (x) • ::after คือ หลัง (x) • ประโยชน์หลักและโดดเด่นของ Selectors ชุดนี้ คือการจัดการหน้าเอกสารในรูปแบบ นิตยสาร ออนไลน์ หรือ จัดหน้าให้คล้ายหรือเหมือนกับ สื่อสิงพิมพ์ หรือจัดหน้าให้กับ Printer ่ • CSS จึงมี Selectors เหล่านี้ไว้จัดการกับหน้า เอกสาร ให้ลองนึกสภาพว่า เรากำา ลัง นัง จัด ่
- 16. โคล่อ น (::) สองอัน กับ โคล่อ น (:) อัน เดีย วมัน ต่า งกัน ยัง ไง • โคล่อนอันเดียว คือ CSS2 ซึ่งใช้ทั้ง pseudo- classes และ pseudo-elements • โคล่อนสองอัน คือ CSS3 และใช้กับ pseudo- elements อย่างเดียว • นั่นแสดงว่า ใน CSS3 ถ้าเจอ :foo มันคือ pseudo-classes ถ้าเจอ ::bar มันคือ pseudo-elements
- 17. การกำา หนดเงาด้ว ย text-shadow • ชือ text-shadow ที่ปรากฏใน CSS3 นั้นสามารถ ่ ใส่เงาได้อย่างเดียว หรือหลายๆเงาก็ได้วิธการี กำาหนดเงาให้กับข้อความทำาได้ด้วยการกำาหนด ค่าให้กับ 4 ส่วน ได้แก่ Horizontal Offset , Vertical Offset , Blur และ Color • ความหมาย ก็คอ กำาหนดระยะห่างของเงาใน ื แนวนอน ระยะห่างของเงาในแนวตั้ง ค่าความ เบลอของเงา และสีของเงา ตามลำาดับ
- 18. การกำา หนดเงาด้ว ย text-shadow (ต่อ ) <head> <meta charset='UTF-8'> <style> tr:first-child { background-color: blue; color: white; } h2 { text-shadow: 3px 4px 5px #666; } </style></head> </html> จากตัวอย่างโค้ดข้างต้นนันเป็นการกำาหนดให้เงา ้ ทอดไปทางขวา 3px แล้วเลือนไปด้านล่าง 4px โดย ่ มีค่าความเบลอของเงาที่ 5px ส่วนสีที่ใช้คือ #666
- 19. สำาหรับการทำาให้ข้อความเป็นรอยจารึกที่มี ลักษณะรอยบุ๋มลงไป (engrave) เราสามารถ กำาหนดค่า โดยมีหลักการ คือ ใช้ตัวอักษรให้มีสี เข้มกว่าพื้น และกำาหนดเงาไว้ด้านล่างให้มีสอ่อน ี กว่าตัวอักษร ดังตัวอย่างต่อไปนี้ CELL TEST h2 { color: #444; background-color: #999; text-shadow: 0px 1px 0px #e7e7e7; }
- 20. และ ถ้าต้องการให้ข้อมูลนุนออกมา (emboss) ให้ กำาหนดค่า โดยมีหลักการคือใช้ตัวอักษรสีอ่อนกว่าพื้นและ กำาหนดเงาไว้ด้านล่าง โดยให้มีสเข้มกว่าพื้น ดังตัวอย่างต่อไปนี้ ี CELL TEST h2 { color: #ddd; background-color: #444; text-shadow: 0px 2px 1px #111 }
- 21. CCS3 Background • สามารถระบุ ขนาดของพื้นหลัง ได้ • CSS3 ช่วยให้เราสามารถ ใช้ภาพพิ้นหลังทีแตกต่าง ่ กันในแต่ละพิ้นที่ • โดยสามารถระบุขนาดพิกเซล หรือ ในอัตราร้อยละ • ถ้าระบุขนาดเป็นเปอร์เซ็นต์ ขนาดจะสัมพันธ์กบั ความกว้างและความสูงของ ตัวอักษร Example ขนาด80x60px div { background:url(img_flwr.gif); -moz-background-size:80px 60px; /* Old Firefox */ background-size:80px 60px; background-repeat:no-repeat;
- 22. CSS3 Transitions • ด้วย CSS3 เราสามารถเพิ่มทำาภาพเคลื่อนไหว จากรูปแบบหนึ่งไปยังอีกแบบ โดยไม่ต้องใช้ Flash หรือ JavaScripts การทำา งาน • CSS3 ช่วยให้รูปภาพค่อยๆเปลี่ยนจากรูปแบบ หนึงไปยังอีก ่ • จะทำาแบบนี้ต้องระบุ 2 อย่าง • 1. ระบุคุณสมบัติ CSS ที่คณต้องการเพิ่มลักษณะ ุ พิเศษ
- 23. CSS3 Transitions (ต่อ ) • ตัวอย่าง div { transition: width 2s; -moz-transition: width 2s; /* Firefox 4 */ -webkit-transition: width 2s; /* Safari and Chrome */ -o-transition: width 2s; /* Opera */ } Note : หากไม่ได้ระบุเวลาการเปลื่ยนแปลงจะไม่มผลกระ ี ทบเนื่องจากค่าเริ่มต้นเป็น 0 - div:hover { width:300px; }
- 24. สีท ี่ส นับ สนุน โดยเบราว์เ ซอร์ • 147 ชือสีที่กำาหนดไว้ใน HTML และ CSS ่ • โดยกำาหนดด้วย ค่าฐานสิบหก • 17 สีมาตรฐาน ได้แก่ Aqua, สีดำา, สีฟ้า, สีแดง ม่วง, สีเทา, สีเทา, สีเขียว, นำ้าตาลแดง, นำ้าเงิน, สี ม่วง, สีแดง, สีเงิน, สีขาว,สีเหลือง,ฯลฯ • เช่น
- 25. หน่ว ยการวัด ค่า ใน CSS หน่ว ย ลัก ษณะ • % • ร้อยละ • In • นิ้ว • Mm • มิลลิเมตร • em • 1em มีค่าเท่ากับขนาดตัวอักษรปัจจุบัน 2em หมายถึง 2 ครั้งขนาดของตัวอักษรในปัจจุบัน เช่น ถ้า element ที่ต้องการแสดงด้วยตัวอักษร 12 จุดแล้ว 2 em ‘จะเป็น 24 จุด 'em' เป็นหน่วยที่มีประโยชน์มากใน CSS เพราะมัน สามารถปรับโดยอัตโนมัติ • px • pixel เทียบกับหน้าจอ
- 26. CSS3 Multiple Columns • ด้วย CSS3 สามารถสร้างหลายคอลัมน์ เหมือน หนังสือพิมพ์ • ระบุจำานวนคอลัมน์ข้อความที่ต้องการจะแบ่ง Example div { -moz-column-count:3; /* Firefox */ -webkit-column-count:3; /* Safari and Chrome */ column-count:3; เลข 3 คือ แบ่ง ทั้ง หมด } 3 คอลัม น์
- 27. CSS3 ระบุช ่อ งว่า งระหว่า ง คอลัม น์ • สามารถ ระบุชองว่างระหว่าง คอลัมน์ ่ Example div { -moz-column-gap:40px; /* Firefox */ -webkit-column-gap:40px; /* Safari and Chrome */ column-gap:40px; } เลข 40 คือ ความห่า งของแต่ล ะ คอลัม น์