About DwThai.Com 00

DwThai.Com Logo

DwThai.Com

Tip and Trick Dreamweaver

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





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

การเขียน CSS ใน 3 รูปแบบ [Article ID : 195]


เรื่อง : รูปแบบการเขียน CSS กับเว็บเพจ

การเขียน CSS มีได้หลายรูปแบบในการจัดเก็บโค้ด หลัก ๆ ก็จะมีอยู่ 3 รูปแบบ ดังนี้
1. Inline Style Sheet
2. Embed Style Sheet
3. External Style Sheet

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

Inline Style Sheet

เป็นรูปแบบการเขียน CSS โดยการฝังลงไปใน line บรรทัดของ TAG HTML โดยการใช้ Attribute  style แล้วตามด้วย value ดังตัวอย่าง เช่น

จากตัวอย่าง เมื่อมีการแสดงผลที่หน้า Web Browser จะได้เป็น

ตัวอย่างการใช้ Inline Style Sheet

นั้นคือจะแสดงผลตัวอักษรในโทนสีแดง และมีลักษณะตัวอักษรตัวหนา (bold) ดังตัวอย่างข้างต้น

การเขียนในรูปแบบ Inline นี้จะให้ผลเฉพาะกับข้อมูลหรือ Object ที่ถูกกำกับโดย Tag ที่มีการเขียน CSS ลงไปเท่านั้น จะไม่ส่งผลต่อข้อมูลอื่นที่อยู่นอก Tag นั้น

Embed Style Sheet

เป็นการเขียน CSS โดยการฝังรวมไปกับโค้ดของ HTML ซึ่งโค้ดของ CSS จะอยู่ในไฟล์เดียวกันกับเว็บเพจที่มีการเรียกใช้งาน CSS นั้น แต่มีการแยกออกมาอยู่ภายใน TAG style ดังตัวอย่าง ต่อไปนี้

การเขียน CSS ในรูปแบบ Embed นี้ เราจะสามารถอ้างถึง CSS ได้จากทุก Tag ของ HTML ภายในไฟล์นั้น และ 1 ชื่อของ CSS หรือ 1 Class จะสามารถเรียกซ้ำ ๆ ใช้งานได้ตามต้องการ (กรณีเป็นการประกาศ Selector ในแบบคลาส)

External Style Sheet

สำหรับรูปแบบการเขียนในลักษณะ External Style Sheet จะเป็นรูปแบบที่เราสามารถเขียนโค้ดของ CSS แยกเก็บออกไปเป็นไฟล์เก็บไว้ภายนอกไฟล์เว็บเพจได้ โดยที่เราสามารถเรียกใช้ CSS ที่แยกเก็บไว้ได้ใน 2 รูปแบบ คือ

1. Linking Style Sheet
2. Import Style Sheet

ไฟล์ CSS ที่เราแยกเก็บไว้นี้จะมีนามสกุลไฟล์เป็น *.css เช่น my-style.css เป็นต้น

การเรียกใช้ CSS ในแบบ Linking Style Sheet

เราสามารถเรียกใช้ไฟล์ CSS ที่แยกเก็บเป็นไฟล์ต่างหากได้ในรูปแบบ Link โดยใช้โค้ดดังต่อไปนี้

ที่ไฮไลท์ไว้ดังรูป คือ ตัวอย่างโค้ดการอ้างถึงไฟล์ CSS ในรูปแบบ Linking เมื่อมีการอ้างถึงไฟล์ CSS แล้ว เว็บเพจที่อ้างถึงไฟล์ CSS นั้นจะสามารถเรียกใช้งาน CSS หรือ Selectors ต่าง ๆ ที่มีอยู่ภายในไฟล์ CSS นั้นได้ เปรียบเสมือนมีโค้ด CSS นั้นฝั่งอยู่ในไฟล์เว็บเพจที่เรียกใช้งาน

การเรียกใช้ CSS ในแบบ Import Style Sheet

การเรียกใช้งานไฟล์ CSS ในแบบ Import มีหลักการ และ Concept เช่นเดียวกับการใช้ในแบบ Linking ข้างต้น กล่าวคือ มีการแยกโค้ด CSS ออกมาเก็บไว้เป็นไฟล์ เมื่อต้องการจะเรียกใช้งาน CSS ที่ไฟล์เว็บเพจใด ก็ให้ทำการอ้างถึงไฟล์ CSS นั้น การอ้างถึงในแบบ Import จะกระทำภายใต้ Tag Style ดังรูป

เมื่อเรามีการ Import เข้ามาภายในไฟล์เว็บเพจแล้ว หากเราต้องการสร้าง Style เพิ่มเติม เราสามารถทำการเพิ่มเติมลงไปได้ทันทีภายใน Tag Style นั้น ดังรูปข้างต้น ซึ่งในจุดนี้นี่เองที่ทำให้ การเรียกใช้งานไฟล์ CSS ในแบบ Linking และ Import มีการใช้งานที่แตกต่างกัน

การใช้งาน CSS ในแบบ External จะทำให้เราสามารถสร้าง CSS ใน 1 ชุด แต่สามารถเรียกใช้งานได้ในหลายเว็บเพจ เมื่อต้องการแก้ไข ก็สามารถแก้ไขได้จากไฟล์ CSS ไฟล์เดียวเท่านั้น เมื่อแก้ไขแล้วจะส่งผลต่อทุกเว็บเพจที่มีการเรียกใช้ CSS จากไฟล์นี้ ซึ่งเป็นประโยชน์มากกับนักพัฒนาเว็บไซต์

บทสรุปของการใช้งาน CSS ใน 3 รูปแบบ

1. หากต้องมีการใช้ CSS ในจุดใดจุดหนึ่งเพียงจุดเดียวบนหน้าเว็บเพจ การใช้แบบ Inline อาจจะเป็นทางเลือกที่ดี
2. หากต้องการใช้คุณสมบัติของ CSS คุณสมบัติแบบเดียวกันจากหลาย ๆ จุดบนหน้าเว็บเพจ ในเว็บเพจเดียว การใช้ CSS ในแบบ Embed อาจจะเป็นทางเลือกที่เหมาะสม
3. หากมีเว็บเพจเป็นจำนวนมาก ต้องการใช้งานคุณสมบัติ CSS ในรูปแบบหรือสไตร์เหมือนๆ กัน การใช้ CSS ในแบบ External อาจจะเป็นทางเลือกที่ดูเข้าท่ากว่า
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



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

รูปแบบไวยากรณ์ของ CSS เบื้องต้น

เรื่อง : ไวยากรณ์ของ CSS เบื้องต้น (CSS Syntax) CSS ไม่ว่าคุณจะเขียนด้วยรูปแบบใดก็ตาม ต้องยึดหลักไวยากรณ์ข...  

Layout เว็บเพจด้วย CSS Step 2

ออกแบบเว็บเพจด้วย CSS Step2 บทความ Step ที่ 2 นี้ก็ยังคงอยู่ในเรื่องเดิม นั้นก็คือ การนำเอา CSS มาใช้งานแทนการใช้ TAG Table ของ HTML ซ...  

ทำไมต้องเลย์เอาท์ด้วย CSS ?

อย่างที่ผมจั่วหัวไปว่า..วัตถุประสงค์ที่ dwthai.com เปิด section นี้ขึ้นมาใหม่ภายใต้ชื่อ ...  

การกำหนด CSS Selectors กับโปรแกรม Dreamweaver

เรื่อง : CSS Selectors กับ Dreamweaver *Dreamweaver CC มีวิธีการที่แตกต่างจากบทความนี้ในการใช้งาน CSS ...  


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

*
*
*