หน่วยการเรียนรู้ การเขียนโปรแกรมภาษาขั้นพื้นฐาน เรื่อง การตกแต่ง HTML 5 ด้วย CSS รหัส รายวิชา ง23102 การงานอาชีพและเทคโนโลยี 6 กลุ่มสาระ การงานอาชีพและเทคโนโลยี ชั้น มัธยมศึกษาปีที่ 3 จำนวน 2 คาบ โรงเรียน เตรียมอุดมศึกษาพัฒนาการ
CSS คืออะไร CSS ย่อมาจาก Cascading Style Sheets เป็นภาษาที่มีรูปแบบการเขียนที่เฉพาะ ใช้สำหรับตกแต่งเอกสาร HTML5ให้มีหน้าตา สีสัน ตัวอักษร เส้นขอบ พื้นหลัง ระยะห่าง ฯลฯ ตามที่ต้องการ การใช้งาน CSS จะแบ่งได้ 2 แบบคือ 1. การเขียน CSS ในเอกสาร HTML ของเราเลย 2. การเขียน CSS ในเอกสารแยกเป็นอีก 1 ไฟล์
โครงสร้างคำสั่ง CSS การเขียน CSS ในเอกสาร HTML ของเราเลย <selector style="property:value"> <selector style="property1:value1;property2:value2"> 1 2 Selector คือ คำสั่ง HTML element/tag ธรรมดา ที่เราต้องการให้แสดงผล Property คือ คุณสมบัติที่เราต้องการให้แสดงผล เช่น สีตัวอักษร สีพื้นหลัง เป็นต้น Value คือ ค่าที่เราต้องการให้แสดง เช่น ตัวอักษรสีแดง พื้นหลังสีดำ เป็นต้น ตัวอย่าง <body style="background-color:blue"> <h3 style="color:green;font-family:sans-serif"> 1 2
การจัดรูปแบบ ตัวอักษร ข้อความ 1. ขนาด ตัวอักษร Font-size 2. ตำแหน่ง ของข้อความ Text-align 3. สี ตัวอักษร Color 4. เงา ของตัวอักษร Text-shadow 5. รูปแบบ ตัวอักษร Font-family
1. ขนาดตัวอักษร Font-size <selector style="font-size:200%"> <selector style="font-size:20px">
2.ตำแหน่งของข้อความ Text-align <selector style="text-align:center"> <selector style="text-align:left"> <selector style="text-align:right"> text-align รูปแบบการจัดข้อความ left center right
3. สี ตัวอักษร Color <selector style="color:pink"> <selector style="color:#FF0000"> <selector style="color:rgb 0 59 122"> การกำหนดสี มี 3 รูปแบบ คือ 1. การระบุชื่อสีโดยตรง 2. การกำหนดสีในแบบ Hexadecimal 3. การกำหนดสีในแบบ RGB ศึกษาเพิ่มเติม http://www.coolplaa.com/css3_6.html
4. เงา ของตัวอักษร Text-shadow กำหนดเงาให้กับข้อความ โดยค่าที่กำหนดได้ คือ <ระยะเหลื่อมในแนวนอน><ระยะเหลื่อมในแนวตั้ง><สี> <ระยะเหลื่อมในแนวนอน><ระยะเหลื่อมในแนวตั้ง><ระยะการเบลอของเงา><สี> style="text-shadow: 2px 2px red" style="text-shadow: 2px 2px 50px pink"
5. รูปแบบลักษณะของตัวอักษร Font-family style="font-family:ชื่อ Font " ตัวอย่าง style="font-family:FontNongnam"
การจัดรูปแบบ รูปภาพ 1. การกำหนด ขนาดรูปภาพ width height 2. การกำหนดภาพ พื้นหลัง background-image 3. การกำหนดสี พื้นหลัง background color 4. การกำหนดเส้นขอบของภาพ border-style
1. การกำหนด ขนาดรูปภาพ width height <figure> <img src="ชื่อโฟลเดอร์เก็บรูปภาพ/ชื่อไฟล์รูปภาพ.นามสกุลภาพ" </figure> width="20" height="20" > นักเรียนสามารถกำหนดค่าด้านใดด้านหนึ่งได้ โดยอีกด้านจะกำหนดให้สมดุลเองโดยอัติโนมัติ
คำสั่งที่เกี่ยวข้องกับการกำหนดภาพพื้นหลัง 2. การกำหนดภาพ พื้นหลัง background-image style="background-image:url(ชื่อโฟร์เดอร์เก็บรูป/ชื่อไฟล์รูปภาพ.นามสกุล)" คำสั่งที่เกี่ยวข้องกับการกำหนดภาพพื้นหลัง background-repeat การกำหนดให้พื้นหลังนำรูปมาใช้ซ้ำ background-attachment กำหนดพื้นหลัง ให้อยู่กับที่ หรือเคลื่อนตาม background-position การกำหนดตำแหน่งเรูปภาพ
background-repeat style="background-image:url(image/dog.jpg); background-repeat:repeat-y” repeat-x : รูปจะถูกใช้จนเต็มใน แนวนอน repeat-y : รูปจะถูกใช้จนเต็มใน แนวตั้ง no-repeat : รูปจะถูกใช้ ครั้งเดียว repeat-y repeat-x no-repeat
นักเรียนสามารถเปลี่ยนสีพื้นอีกส่วนได้ โดยใช้คำสั่ง background-color style="background-image:url(image/dog.jpg); background-repeat:repeat-x; background-color:pink”
background-attachment style="background-image:url(image/dog.jpg); background-attachment:fixed” รูปจะไม่เลื่อน ตาม scroll bar รูปจะอยู่กับที่
background-position style="background-image:url(image/dog.jpg); background-position:right center” background-position:right center background-position:50% 50% background-position:20px 40px
3. การกำหนดสี พื้นหลัง background color style="background-color:ชื่อสี"
4. การกำหนดเส้นขอบของภาพ border-style style="border-style:ชื่อลักษณะเส้นขอบ"
การกำหนดสี style="border-style:solid;border-color:orange"
การกำหนดสี และ เส้นกรอบ บน ขวา ล่าง ซ้าย style="border-style:solid;border-color:#99CC66 blue green black" style="border-style:dashed dotted solid double;border-color:#FF6633"
ลองทำดู รู้ปฏิบัติ ให้นักเรียนเปิดไฟล์งาน เว็บไซต์ประวัติส่วนตัวนักเรียน ที่มีเมนูเชื่อมโยงแล้ว ( ที่ทำสัปดาห์ที่แล้ว ) ตกแต่งเว็บไซต์ของนักเรียน โดยใช้ CSS3 ทั้งการจัดรูปแบบตัวอักษร ข้อความ และ การจัดรูปแบบรูปภาพ ให้เหมาะสม ชัดเจน อ่านง่าย น่าสนใจ