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



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

การนำ Code ภาษา HTML/JavaScript แทรกลงใน Web Page

เรื่อง : นำโค้ด HTML หรือ JavaScript แทรกลงในเว็บเพจด้วย Dreamweaver บ้างครั้งเราทำเว็บไซต์ อาจจะต้องมีการไปสมัครเป็นสม...  

CSS Layout ด้วย Dreamweaver ตอนที่ 2

เรื่อง : CSS Layout ด้วย Dreamweaver ตอนที่ 2เมื่อเราได้ทำการกำหนดโครงสร้างของเว็บเพจเราไปจากในตอนที่ 1 ของบทความนี้แล้ว ต...  

มาสร้างปุ่มปิด Web Browser กัน (Snippets Panel)

เรื่อง : การสร้างปุ่มปิด Web Browser บางครั้งเราเข้าไปชมเว็บเพจของบางเว็บไซต์ คุณเคยสังเกตไหมครับว่า บางหน้าเว็บเขาจะแสดง...  

สร้างโปรแกรม Guestbook ด้วย Dreamweaver + PHP + MySQL ตอนที่ 1

เริ่มต้นพัฒนาโปรแกรม Guestbook ด้วย Dreamweaver + PHP + MySQL เรียกร้องกันเข้ามาเยอะมากสำหรับบทความการสร้าง Web Applicati...  


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

*
*
*