Page 44 - การพัฒนาหนังสืออิเล็กทรอนิกส์เพื่อการศึกษา เรื่อง การสร้างเว็บไซต์
P. 44

6. การก�าหนดสี
                                                                                                                                                                    ิ
                                                                                                                                            8. การก�าหนดชนดของอักษร



                                       ็
            ในการก�าหนดสีใน CSS กจะใช ้วิธีเดียวกันกับรูปแบบการก�าหนดสีของ HTML. เช่น                                             ราสามารถใช ้  CSSในการก�าหนดชนดให้ตัวอักษรได้  โดยก�าหนดรูปแบบ  Fon  ผาน  Property
                                                                                                                                                                        ิ
                                                                                                                                                                                                                     ่
                                     ่
            1) การก�าหนดสีโดยใช ้ชือสี เช่น red, green, biae, black เปนตัน                                                        ต่างๆ ให้กับ HTML Element เช่น <p>, <dv>, <span>, <h1>และอืนๆ
                                                                                                                                                                                                             ่
                                                                           ็
                                                                                          ็
            2) การก�าหนดสีด้วยตัวเลขฐานสิบหก (Hex) เช่น #OE, #800#, #0000F เปนต้น
                                  ั
                                                                                                        ็
            3) การก�าหนดสีด้วยฟงก์ชัน ซุ60 เช่น ซูgb (100, 200, 100), ซูb (50%, 100%, 25%) เปนต้น
            ตัวอย่างการก�าหนดด�าสิใน CSS
                      ้
                                                ้
            6.1 การตังค�าสีให้กับตัวอักษรและพืนหลัง มีดังน  ี ้                                                                            9.CSS Box Model
            body (
                   color: black;                                                                                                                                                              ้                   ่
                                                                                                                                                                                                                  ึ
                                                                                                                                                                                                         ็
                                                                                                                                                                               ่
                                                                                                                                                                                              ั
                   background: white;                                                                                                    ในการใช ้ CSS ในการก�าหนดต�าแหนงการแสดงผลนนในหน้าเวบเพจหนงประกอบไปด้วย
                                                                                                                                                                                                                ้
                                                                                                                                                                                                                   ่
                                                                                                                                                                      ้
                                                                                                                                                             ็
                                                                                                                                                                      ื
                                                                                                                                                                                                                              ็
                                                                                                                                                                                      ็
            (                                                                                                                     หลายๆ ส่วน เช่น ส่วนหัวเวบ ส่วนเนอหา ส่วนท้าย เปนต้น ส�าหรับการจัดสรรพืนทีของหน้าเวบเพจ
                                                                                                                                                               ้
                                                                                                                                     ่
                                                                                                                                                               ี
                               ้
                                                             ้
                     ่
            จากค�าสังเปนการตังค�าาสีตัวอักษรเปนสีด�าและพืนหลังเปนสีขาว                                                            เพือแสดงส่วนประกอบเหล่านท�าได้หลายรูปแบบ เช่น การแบ่งแบบอิสระ การแบ่งคอสัมน์ การจัด
                                                 ็
                                                                     ็
                       ็
                                                                                                                                                        ่
                                                                                                                                           ็
                                                                                                                                                                                                                         ็
                                                                                     ้
                                                                                                            ็
                                                                                     ั
            6.2 การก�าหนดค�าสีให้กับ Link ในการก�าหนดค่าสิให้กันลิงค์ใน CSS  นนสkมารถก�าหนดให้เปน                                 รูปหน้าเวบ (ayou) ซึงสามารถช ้ตารางหรือใช ้ dข ในกรจัดวางส่วนประกอบของหน้าเวบเพจ
                                                                                                                                   ั
                                                                                                                                                           ิ
                                                                                                                                                                                                                           ็
                                                                                                                                                                                                    ่
                                                                                                                                            ็
                                                                          ่
                                                                              ่
                                                                                            ็
                 ็
            สิสิงกใด้หลายสถานะตามรูปแบบของการลิงค์  เช่น  ขณะทียังไมใด้คลิกสิงกเปนอีกสีหรือขณะที                                  ปจจุบันเวบไซต์ต่างๆ จะนยมใช ้ div และใช ้ CSS ในการจัดต�าแหนง ขนาด และสีให้กับแทก div
                                                                                          ็
                                                                                                                                                                                                                ้
                                                                                                                                    ่
                                                                                                                                                                       ่
                                                                                                                                                     ้
                                                                                                                                                                                                                ั
                                                                                                                                                                                                 ็
                                                                                                                                                     ั
                                                          ่
                                      ่
            คลิกสิงก์กเปนอีกสีหรือเมือเอาเมาส์วางเหนอสิงกกเปนอีกสี เช่น                                                           ซึงการใช ้  div  นนจะท�างานโดยเมือโหลดเสร็จส่วนไหนก่อนกแสดงผลส่วนนนออกมาเลยในหน้า
                      ็
                        ็
                                                               ็
                                                             ็
                                                       ื
                                                                 ็
                                                                                                                                           ้
                                                                                                                                                                                            ่
                                                                                                                                                                                             �
                                                                                                                                                                     ็
                                                                                                                                           ั
                                                                                                                                    ็
                                                                                                                                                                                                                  ็
                                                             ่
                                                                 ่
                                                           ็
            link  color: ซูb(0, 0. 153): ) #* ส�าหรับสิงกทียังไมได้รับแม "                                                        เวบเพจนนถ้ามองกันอย่างง่ายๆ  กคือ  กล่องแต่ละกล่องทีนามาวางต่อๆ  กัน  เปนการวางโครงร่าง
                                                                                                                                                                                                                       ่
                                                                                                                                                                                            ้
                                                                                                                                              ้
                                                                                                                                                      ่
                                                                                                                                                                                                                             ่
                                                                                                                                                                                                    ่
                                                                                                                                                                                            ั
                                                                    ่
            vinlted ( color. rgb(153, 0, 153): 1 / ส�าหรับสิอด์ทีรีบชมแล้ว "                                                      (Layou! พืนฐานซึงมีความส�าคัญมาก ส�าหรับใน CSS นนจะมีเรือง Bex Mode! ซึงจะเกียวข้อง
                                                                                                                                       ่
                                                                                                                                                                                             ่
                                                                   ่
                                                                 ็
            aative f color: rgb(255, 0. 102): ) / ส�าหรับสิงกทีถูกคลิก "                                                          กับเรืองการก�าหนดขนาดของข้อความหรือรูปภาทต่างๆ  ทีใช ้ในการแสดงผล  โดย  สามารถแสดง
                                                                                                                                                                      ้
                                                                   ่
            ahover ( colar.: rgb(0, 96, 255). ) /" ส�าหรับสิงกทีมีมาวางเหนอ "                                                     ในรูปแบบของ Bex Model ได้ดังน       ี
                                                                 ็
                                                                               ื
                                                                                                                                                             ็
                                                                                  ่
                                                                                                     ้
                                         ่
                        ่
                                                                ็
            ถ้าหากว่าไมต้องการให้ลงก์ทีปรากฏมีเส้นต้านล่างกสามารถเขียนค�าสังใน C5S ได้โดยตังคาที          ่                       9.1 Wdth และ Hegbt เปนความกว้างและความสูงของ Element
                                                                                                                                                      ้
                                                                                                                                                         ่
                                                                                                                                                                                                  ้
                                                                                                                                                                                             ่
                                                                                                                                                  ็
            propertylex-deconation เปน nobe เช่น                                                                                  9.2 Margin เปนพืนทีว่างๆ รอบเส้นกรอบ (Border) จะไมมีสีพืนหลัง มีลักษณะโปร่งใส
                                            ็
                                                                                                                                                                                                           ้
                                                                                                                                                 ็
            a. plain( tot-decoration: #ome)                                                                                       9.3 Border เปนเส้นกรอบรอบ Padding สีของกรอบถูกก�าหนดโดยสีพืนหลังของ Box
                                                                                                                                                           ่
                                                                                                                                                                                            ้
                                                                                                                                                                                                           ้
                                                                                                                                                                      ้
                                                                                                                                                                                               ่
                                                                                                                                                   ็
                                                                                                                                                                                                           ื
                                                                                                                                                                                        ็
                                                                                                                                                                      ื
              ่
            เมือเรียกใช ้งาน CSS กีสามารถเขียนได้ตัน  ี ้                                                                         9.4 Padding เปนส่วนทีใช ้แสดงเนอหาและรูปภาพเปนพืนทีว่างๆ รอบเนอหา สีของ Padding
                                                                                                                                                    ้
            <a dasse "plain" bef:"person.htm!">บุคลากs</a>                                                                        ถูกก�าหนดโดยสีพืนหลังของ Box                          ่
                                                                                                                                                                                           ็
                     ่
                                                                                          ่
                                                                         ่
                                                                                           ็
                                  ็
            จากค�าสังดังกล่าวจะเปนการลิงค์ไปยังเพจ persos html! ซึงค�าว่าบุคลากรทีเปนข้อความลิงค์                                 9.5 Content ในการก�าหนด Wdh และ Height ซึงเปน Propertyของ Elememt ด้วย CSS
                                                                                                                                                                                                       ้
                                                                                                                                                                                                                 ้
                                                                                                                                    ้
                                                                                                                                        ่ ่
                                                                                                                                                                                        ้
                                                                                                                                                                                           ่ ่
                                                                                                                                                       ็
                                                                                                                                                                                                                 ั
                                                                                                                                                                                                       ื
                                                                                                                                    ั
             ็
            กจะไมมีขีดเส้นได้                                                                                                     นน  สิงทีก�าหนดจะเปนความกว้างและความสูงข  องพืนทีทีใช ้แสดงเนอหาเทานนจึงขนาดทีแท้จริง
                  ่
                                                                                                                                  ของ Element จะต้องรวมPadding Border และ Margin เข้าไปด้วย
                     7.การก�าหนดรูปแบบข้อความ
            เราสามารถก�าหนดรูปแบบให้ข้อความได้หลายรูปแบบ เช่น ความสูงของบรรหัด, ด�าแหนง
                                                                                                    ่
                                                                                              ่
            การรัตวางข้อความ การขีดเส้นใด้ การก�าหนดตัวพิมพ์เลกหรือตัวพิมพ์ใหญ่ และอืนๆ อีกมากมาย
                                                                     ็
            โดยผาน Property ต่างๆ
                  ่
                                                            40                                                                                                                   41
   39   40   41   42   43   44   45   46   47   48   49