embed

การใช้งานสไตล์ชีท

การใช้งานสไตล์ชีท มีอยู่ 3 ลักษณะ คือ

        1. การกำหนดสไตล์ร่วม (Embedded Style Sheet)
        2. การกำหนดสไตล์เฉพาะที่ (Inline Style Sheet)
        3. การใช้สไตล์ชีทจากภายนอก (Linked Style Sheet)

การกำหนดสไตล์ร่วม (Embedded Style Sheet)

          เป็นการกำหนดรูปแบบที่ต้องการโดยใช้คำสั่งหลัก STYLE ในการกำหนดรูปแบบให้กับคำสั่ง HTML
      ใดๆ เพื่อให้แสดงผลแตกต่างไปจากค่าปกติเดิม โดยส่วนที่กำหนดนี้จะถูกกำหนดไว้ล่วงหน้าในส่วนต้นก่อน
      ที่จะเข้าสู่ส่วนของ <BODY> เพื่อที่ว่าจะสามารถอ้างอิงถึงสไตล์ที่กำหนดไว้นี้ได้เมื่อต้องการในภายหลัง
            การกำหนดคำสั่ง <STYLE> ....... </STYLE> ให้วางคำสั่งไว้ระหว่างคำสั่ง <HTML> กับ <BODY> โดย
      เขียนต่อจากคำสั่ง </HEAD> มีรูปแบบดังนี้

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

โดยที่

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

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

โดยที่

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

การเรียกใช้ชื่อของคำสั่ง ให้เขียนอยู่ในลักษณะของแท็กดังนี้

<ชื่อคำสั่งใน HTML> ข้อมูลเอกสาร ... </ชื่อคำสั่งใน HTML>

ตัวอย่างการกำหนดรูปแบบสไตล์ร่วมด้วยคำสั่ง STYLE

embed1.jpg (35012 bytes)

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

wpe2.jpg (47433 bytes)