การกำหนด Class ของ CSS มากกว่า 1 คลาสด้วย Apply Multiple Classes [Article ID : 230]

เรื่อง : การกำหนดคลาส CSS ให้แก่ Element ที่ต้องการใช้ Class มากกว่า 1 คลาส

Class Selector ของ CSS นั้น เราสามารถกำหนดได้มากกว่า 1 คลาสต่อ 1 อิลิเมนต์ ซึ่งวัตถุประสงค์ของการกำหนดคลาสมากกว่า 1 ให้แก่ Element ใด ๆ นั่น เนื่องจากว่า อิลิเมนต์นั้นต้องการคุณสมบัติที่แตกต่างกัน โดยที่ถ้าใช้เพียงคลาส 1 คลาสอาจให้คุณสมบัติไม่ครบตามที่อิลิเมนต์นั้นต้องการนำไปใช้ เช่น

<style>
.myborder{ border: solid 1px #C00; }
.mypadding{ padding: 20px; }
</style>

<div class="myborder mypadding">
	DwThai.Com Website
</div>

ดังโค้ดตัวอย่างข้างต้น จะพบว่าอิลิเมนต์ DIV ต้องการใช้คุณสมบัติเส้นกรอบที่ได้จากคลาส .myborder และต้องการคุณสมบัติ Padding ที่ได้จาก .mypadding ด้วยเช่นเดียวกัน ดังนั้น จึงต้องมีการเรียกใช้คลาสถึง 2 คลาสภายใน Tag เดียว ซึ่งเราเรียกการใช้คลาสมากกว่าหนึ่งนี้ว่า Multiple Classes

การกำหนดคลาสแบบ Multiple Classes ด้วย Dreamweaver

โปรแกรม Dreamweaver มี Option ที่ทำให้ผู้ใช้งานโปรแกรมสามารถเลือกกำหนดคลาสในแบบ Multiple Classes ได้อย่างง่ายดาย โดย Option นี้เรียกว่า Apply Multiple Classes... ซึ่งมีวิธีการใช้งาน ดังนี้

1. สร้าง CSS ในแบบ Class ที่ต้องการใช้ และเลือกข้อมูลที่ต้องการกำหนด Class ในส่วนของ Document
2. มาที่ Properties Panel จากนั้นที่ Option ที่ชื่อว่า Class ทำการเลือกไปที่ Apply Multiple Classes... ดังรูป *ตำแหน่งของออปชั่น Class อาจอยู่แตกต่างกันไป ขึ้นอยู่กับข้อมูล หรือ Element ที่เลือกใช้

3. โปรแกรมจะทำการเปิดหน้าต่าง Multiclass Selection ขึ้นมาให้เลือกคลาสที่ต้องการใช้งานกับข้อมูลหรือ Element ที่เลือกไว้ในข้อ 1 ดังรูป จากรูปเลือกใช้คลาส 2 คลาสตามที่ต้องการ ซึ่งคลาสที่ปรากฎต้องเป็นคลาสที่ผู้ใช้งานโปรแกรมสร้างไว้แล้วกับโปรแกรม

4. จากนั้นกดที่ OK ข้อมูลหรือ Elements ที่เลือกไว้ในข้อ 1 ก็จะนำคลาสตามที่เลือกไว้ไปใช้งาน ดังรูป

---

บทความอื่นที่คุณอาจสนใจ