การกำหนดสไตล์ย่อยด้วย CLASS และ ID

     การกำหนดรูปแบบของสไตล์ชีท นอกจากวิธีการที่กำหนดมาแล้วข้างต้นแล้วนั้น เรายังสามารถกำหนด
รูปแบบของสไตล์ด้วยการใช้ค่าเสริมเพิ่มได้อีก เพื่อสร้างความหลากหลายให้กับสไตล์ ด้วยการกำหนดรูปแบบ
สไตล์ในวิธีนี้ คำสั่งต่างๆ ของ HTML จะสามารถเรียกใช้สไตล์ที่กำหนดไว้ได้ โดยการอ้างอิงชื่อสไตล์ย่อยที่
กำหนด ด้วยค่าเสริม 2 ตัว คือ

               สไตล์ย่อยแบบ CLASS
               สไตล์ย่อยแบบ ID

        สไตล์ย่อยแบบ CLASS

               เป็นการกำหนดรูปแบบของสไตล์ขึ้นก่อน โดยกำหนดอยู่ภายในคำสั่งหลัก <STYLE>

               การกำหนดชื่อสไตล์จะใช้จุด " . " (full stop) นำหน้าชื่อสไตล์ เพื่อเป็นตัวกำหนดชื่อ CLASS ซึ่งมีการ
        กำหนดรูปแบบ ดังนี้

        รูปแบบ

                    <STYLE>

                                .ชื่อของสไตล์ class { คำสั่งกำหนดรูปแบบ
                                                                ....................
                                                                ....................                          }

                </STYLE>

       โดยที่

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

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

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

       ตัวอย่างการกำหนดสไตล์ย่อยแบบ class

                    <style>
                          .Para1   { font-family : AngsanaUPC ; font-weight : bold ;
                                          font-size : 20px ; color : red }
                    </style>

       สไตล์ย่อยแบบ ID

            เป็นอีกทางเลือกหนึ่งของคำสั่งเสริมที่ใช้ในการกำหนดรูปแบบของสไตล์ขึ้นก่อนเหมือนกับสไตล์ย่อย
         แบบ Class โดยกำหนดอยู่ภายในคำสั่ง <STYLE> แต่การกำหนดชื่อสไตล์จะใช้สัญลักษณ์ # นำหน้าชื่อ
         สไตล์ เพื่อเป็นตัวกำหนดชื่อ ID โดยมีการกำหนดรูปแบบ ดังนี้

         รูปแบบ

                  <STYLE>
                         

                           #ชื่อของสไตล์ id  { คำสั่งกำหนดรูปแบบ
                                                      ......................
                                                      ......................                       }

                  </STYLE>

       โดยที่

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

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

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

     ตัวอย่างการกำหนดสไตล์ย่อยแบบ id

               <style>
               #Para2   { color : blue ; font-weight : bold ; margin-left : 1in }
                   </style>

     การเรียกใช้สไตล์ย่อยแบบ CLASS และ ID

         1.การเรียกใช้สไตล์ย่อยแบบ CLASS

         รูปแบบ
            <คำสั่งใน HTML   CLASS = "ชื่อสไตล์ย่อยแบบ Class">

                     ข้อความเอกสาร .....
                                     ..........................

                     </คำสั่งใน HTML>

             2.การเรียกใช้สไตล์ย่อยแบบ ID

         รูปแบบ

                     <คำสั่งใน HTML   ID = "ชื่อสไตล์ย่อยแบบ Id">

                              ข้อความเอกสาร .....
                                      ..........................

                     </คำสั่งใน HTML>

       โดยมีรายละเอียดของคำสั่ง ดังนี้

         คำสั่งใน HTML                         เป็นคำสั่งใดๆ ใน HTML ที่ใช้กำหนดรูปแบบ เช่น
                                                             คำสั่ง <P>                เป็นคำสั่งหลักเพื่อขึ้นย่อหน้าใหม่
                                                             คำสั่ง <DIV>            เป็นคำสั่งหลักที่มีผลต่อเอกสารทั้งหมดที่อยู่ในช่วง
                                                                                             ของแท็กคำสั่งนี้
        ชื่อสไตล์ย่อย                        ขึ้นอยู่กับว่าเรียกใช้สไตล์ย่อยแบบ CLASS หรือ ID

         ตัวอย่างการใช้งานสไตล์ย่อยแบบ CLASS

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

         ตัวอย่างการใช้งานสไตล์ย่อยแบบ ID

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

หน้าแรก | คุณสมบัติเกี่ยวกับตัวอักษร | คุณสมบัติเกี่ยวกับสีและพื้นฉากหลัง | คุณสมบัติเกี่ยวกับข้อความ | คุณสมบัติเกี่ยวกับกรอบ | คุณสมบัติเกี่ยวกับหน่วยวัด | การกำหนดสไตล์ร่วม | การกำหนดสไตล์เฉพาะที่ | การใช้สไตล์ชีทจากภายนอก |
การกำหนดสไตล์ย่อยด้วย CLASS และ ID | การใช้คำสั่ง SPAN |