About DwThai.Com 00

DwThai.Com Logo

DwThai.Com

Tip and Trick Dreamweaver

ก่อตั้งเมื่อปีพุทธศักราช ๒๕๔๖





ค้นหาข้อมูลใน DwThai.Com

การกำหนด 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 ก็จะนำคลาสตามที่เลือกไว้ไปใช้งาน ดังรูป

เป็นอันเสร็จสิ้นการใช้ Class Selectors ของ CSS ในแบบ Multiple Classes ด้วยโปรแกรม Adobe Dreamweaver อย่างไรลองใช้ดู...
About the Author
Mr.Sittichai Raksasuk

Mr.Sittichai Raksasuk

Sittichai is a Web Developer and Web Technology Instructor for over 10 yrs. He is also a webmaster of dwthai.com and author jQuery with Dreamweaver (2010). DwThai.Com is a website for web developer using Adobe Dreamweaver.

Contact with him : dwthai@gmail.com



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

เปิดใช้งานไม้บรทัด (Rulers) และเส้น Guides Line ไว้ใช้กะระยะแนวเส้น

เรื่อง : เปิดใช้งานไม้บรทัด (Rulers) และเส้น Guides Line ไว้ใช้กะระยะแนวเส้น ในการออกแบบเว็บเพจ บางครั้งเราจำเป็นต้อง...  

วิธีการทำรูปพื้นหลัง (Background Image) ของเว็บเพจไม่ให้กระทำซ้ำ

เรื่อง : การทำรูปภาพ Background ไม่ให้กระทำซ้ำ (Background No Repeat) บางครั้งของการออกแบบ Web Page เราต้องการใส่รูปภาพเป...  

การตั้งไซต์เพื่อใช้งานกับ Server Side Script

เรื่อง : การตั้งไซต์เพื่อใช้งานกับ Server Side Script (PHP/MySQL) การตั้งไซต์หรือการ New Sit...  

สร้าง Popup Menu ด้วย Spry Menu Bar (CS Only)

เรื่อง : การสร้างเมนูเว็บไซต์ด้วย Spry Menu Bar *Dreamweaver CC ไม่มีให้ใช้ครับ Spry เป็น Framework...  


Copyright ©2003-2019 dwthai.com. All rights reserved.
This website was created by : S.raksasuk.

ติดต่อ DwThai.Com

e-mail : dwthai@gmail.com
mobile: 08-9495-7296

เขียน Guestbook : DwThai.Com

*
*
*