link

การใช้สไตล์ชีทจากภายนอก (Linked Style Sheet)

       การใช้สไตล์จากภายนอกเป็นวิธีหนึ่งในการออกแบบสไตล์แยกออกไปเป็นเอกสารต้นแบบโดยการสร้าง
      ไฟล์ของสไตล์ขึ้นใหม่ ไฟล์ของสไตล์ที่ถูกสร้างขึ้นมานี้จะมีชนิดของไฟล์เป็น .CSS เมื่อเอกสารใดๆ ต้องการ
      เรียกใช้รูปแบบสไตล์นี้ ก็ให้ทำการเชื่อมโยงกับไฟล์ของสไตล์ต้นแบบนั้นได้เลย

หลักการกำหนดการใช้สไตล์จากภายนอก

จะมีขั้นตอน 2 ขั้นตอนดังนี้

1. สร้างไฟล์สไตล์ต้นแบบ

ไฟล์สไตล์ต้นแบบ จะมีลักษณะเหมือนกับการกำหนดรูปแบบสไตล์ในคำสั่งหลัก STYLE แต่ให้
กำหนดชนิดของไฟล์นั้นเป็น .CSS

รูปแบบของสร้างไฟล์สไตล์ต้นแบบ

                  <STYLE>
                              ชื่อคำสั่งใน HTML     {   รูปแบบ   }
                              .....................
                              .....................
                  </STYLE>

โดยที่

              <STYLE> ... </STYLE>     เป็นแท็กคำสั่งที่ใช้กำหนดรูปแบบสไตล์
            ชื่อคำสั่งใน HTML                 เป็นคำสั่ง HTML ใดๆ ที่ต้องการกำหนดรูปแบบขึ้นใหม่
                  รูปแบบ                                   เป็นคำสั่งที่ใช้กำหนดรูปแบบขึ้นใหม่ โดยกำหนดอยู่ในเครื่องหมาย
                                                                  { } ซึ่งมีรูปแบบดังนี้

ชื่อคำสั่งใน HTML { คำสั่งกำหนดรูปแบบ : ค่าที่กำหนด ;
คำสั่งกำหนดรูปแบบ : ค่าที่กำหนด ; ...... }

โดยที่ คำสั่งกำหนดรูปแบบ : ค่าที่กำหนด ให้ไปดูที่คุณสมบัติต่างๆ ที่ใช้ได้ในสไตล์ชีทและการคั่น
แต่ละคำสั่งให้ใช้เครื่องหมายเซมิโคลอน (semicolon)

2. สร้างจุดเชื่อมโยงไปยังไฟล์สไตล์ต้นแบบ

                  เมื่อมีการสร้างไฟล์สไตล์ต้นแบบเสร็จแล้ว ต่อไปก็คือการสร้างไฟล์ของเอกสาร HTML ปกติ ณ. ตรง
                  ส่วนบริเวณใดที่ต้องการรูปแบบสไตล์จากไฟล์สไตล์ต้นแบบ ก็ให้ทำการกำหนดการเชื่อมโยง ณ. จุด
                  นั้นไปยังไฟล์สไตล์ต้นแบบ

รูปแบบในการสร้างจุดเชื่อมโยง

<LINK REL = STYLESHEET HREF = "ชื่อไฟล์สไตล์ต้นแบบ.CSS"
TYPE = "Text/Css">

การกำหนดคำสั่ง <LINK> ให้กำหนดอยู่ในส่วนของคำสั่ง <HEAD> อยู่ใต้คำสั่ง </TITLE>

โดยที่

               LINK                                    หมายถึง           คำสั่งเชื่อมโยงระหว่างเอกสาร
                  REL = STYLESHEET       หมายถึง           เป็นการแสดงความสัมพันธ์ระหว่างเอกสารในที่นี้คือ
                                                                                      STYLESHEET
                HREF                                  หมายถึง           เป็นการบอกตำแหน่งและชื่อของไฟล์ที่จะติดต่อหรือ
                                                                     เป็นการกำหนดตำแหน่ง URL ที่ต้องการ
                  TYPE = "Text/Css"         หมายถึง        เป็นการบอกชนิดของสื่อที่จะติดต่อ ในที่นี้คือ Text/Css

ตัวอย่างการกำหนดการใช้สไตล์จากภายนอก

สร้างไฟล์สไตล์ต้นแบบ มีชนิดเป็น .CSS

wpe1A.jpg (111836 bytes)

สร้างส่วนของการเชื่อมโยง

ผลที่ได้บนบราวเซอร์

wpe26.jpg (95312 bytes)