รู้จักกับ CSS

รู้จักกับ CSS

          CSS เป็นกลุ่มของรูปแบบการแสดงผลที่เราได้สร้างไว้เพื่อใช้กำหนดการแสดงผลของเนื้อ

หาในเว็บเพจ การนำ CSS เข้ามากำหนดการแสดงผลจะช่วยให้การกำหนดการแสดงผลของเนื้อ

หาที่อยู่ในเว็บเพจทำได้ง่ายและ ถูกต้องมากขึ้น นอกจากนี้ CSS ยังสามารถควบคุมการแสดงผล

บางอย่างที่ HTML ไม่สามารถควบคุมได้ด้วย อย่างเช่น ขนาดของตัวอักษรบนเว็บเพจใน CSS จะ

กำหนดขนาดเป็นพิกเซล ซึ่งจะทำให้การแสดงผลของตัวอักษรในทุกๆ เว็บเบราเซอร์เหมือนกัน

หรือ ตำแหน่งของเลเยอร์ซึ่งด้วย CSS เราสามารถที่จะกำหนดตำแหน่งการแสดงผลของมันได้

เป็นต้น

CSS จะประกอบด้วย 2 ส่วนด้วยกันคือ Selector และ Declaration

1. Selector เป็นชื่อของ CSS

2. Declaration เป็นส่วนที่ใช้กำหนดว่า CSS นี้มีรูปแบบอะไรบ้าง ซึ่งประกอบไปด้วย
คุณสมบัติและ ค่าของคุณสมบัติ
ประโยชน์ที่สำคัญของการนำ CSS มาใช้ก็คือ เมื่อเราเปลี่ยนแปลงรูปแบบที่กำหนดไว้ใน
CSS เมื่อใดแล้วรูปแบบการแสดงผลของข้อความหรือ วัตถุทั้งหมดที่ใช้ CSS ดังกล่าวจะเปลี่ยน
แปลงด้วย ซึ่งประเภทของ CSS มีดังนี้
1. Customer CSS Style หรือ Class Style เป็น CSS ที่สร้างขึ้นและ สามารถใช้ได้ทุกที่
ของเว็บเพจ
2. HTML Tag Style เป็น CSS ที่มีการกำหนดรูปแบบให้กับ HTML เดิมที่มีอยู่แล้ว
3. CSS Sector Style เป็น CSS ที่มีการกำหนดรูปแบบให้กับแท็กที่มีการผสมกันหรือ

ทุกแท็กที่มี id ตรงกับที่เรากำหนดใน CSS

 การใช้ CSS Style Panel

เราใช้ CSS Style Panel ในการสร้าง CSS ใหม่ แสดง CSS ที่มีอยู่และ กำหนด CSS ให้
กับข้อความหรือ วัตถุในเว็บเพจ เมื่อเราต้องการที่จะใช้ CSS Style Panel ให้เลือกเมนู Window -
> CSS Styles
ใน CSS Style Panel จะมีปุ่ม radio อยู่ 2 ปุ่มด้วยกันซึ่งใช้สลับมุมมองใน CSS Style
Panel ซึ่งมี 2 มุมมองด้วยกันคือ Apply Style และ Edit Style
เปิดโปรแกรม Dreamweaver MX ไปด้วย
มุมมอง Apply Style เป็นมุมมองที่ใช้ดู CSS Style ที่มีอยู่และ กำหนด CSS Style เหล่า

นั้นให้กับข้อความหรือ วัตถุที่ต้องการในเว็บเพจ ในมุมมองนี้จะแสดง CSS Style ประเภท Class
Style เท่านั้น เนื่องจาก HTML Tag Style และ Selector Style จะถูกใช้กับข้อความหรือ วัตถุที่
ตรงกับที่กำหนดไว้ใน Style ทั้งสองดังกล่าวอยู่แล้ว
มุมมอง Edit Style เป็นมุมมองที่ใช้ดูและ แก้ไข CSS Style ที่มีอยู่ในเอกสาร ซึ่งในมุม
มองนี้จะแสดง CSS Style ทั้ง 3 ประเภท
ใน CSS Style Panel ทางมุมขวาล่างจะประกอบไปด้วยปุ่มต่างๆ ที่ใช้ดำเนินการ ดังต่อ
ไปนี้
1. ปุ่ม Attach Style Sheet เปิดไดอะล็อก External Style Sheet เพื่อค้นหาไฟล์ที่
เก็บ Style Sheet ไว้แล้วเชี่อมโยงไฟล์ดังกล่าวกับเอกสารหรือ นำเข้า Style Sheet ดัง
กล่าวในเอกสารที่เราทำงานอยู่
2. ปุ่ม New CSS Style ใช้เปิดไดอะล็อก New CSS Style ซี่งใช้ในการสร้าง Style
ใหม่
3. ปุ่ม Edit Style Sheet ใช้เปิดไดอะล็อก CSS Style Definition ซึ่งใช้ในการแก้ไข

Style ที่มีอยู่ในเอกสารที่เราทำงานอยู่หรือ เอกสารที่เชื่อมโยงจากภายนอก
4. ปุ่ม Delete CSS Style ใช้ลบ CSS Style ที่อยู่ใน Panel และ ข้อความหรือ วัตถุที่
ใช้ Style ดังกล่าว

การสร้าง CSS Style ใหม่


1. ทำตามขั้นตอนใดขั้นตอนหนึ่งต่อไปนี้

• เปิด CSS Panel คลิกที่ปุ่ม + ใน Panel หรือใน Property Inspector คลิกที่ไอ
คอน ที่อยู่ทางมุมบนขวาแล้วเลือก CSS Mode เพื่อเปลี่ยน Property
Inspector ให้อยู่ใน CSS Mode ดังรูป

• ในป๊อปอัพเมนู CSS Style เลือก New CSS Style

• เลือกที่เมนู Text -> CSS -> New CSS จะปรากฎไดอะล็อกที่ให้กรอกข้อมูลเพื่อ
สร้าง CSS ใหม่ ดังรูป

2. พิมพ์ชื่อของ Style ในฟิลด์

3. ใน Type เลือกประเภทของ Style ที่จะสร้างซึ่งมี 3 ประเภทดังที่กล่าวไว้ข้างต้น

4. ใน Define In เลือกไฟล์ที่จะเก็บ Style ที่สร้างไว้ ซึ่งมีดังนี้
• เลือก This Document Only เมื่อต้องการเก็บ Style ไว้ในไฟล์เดียวกับไฟล์ที่
กำลังทำงานอยู่
• เลือก New Style Sheet File ในป๊อปอัพเมนูเมื่อต้องการเก็บ Style ในไฟล์ภาย
นอกที่สร้างขึ้นมาใหม่
• เลือกรายการไฟล์ที่อยู่ในป๊อปอัพเมนู เพื่อเก็บ Style ที่สร้างขึ้นใหม่ในไฟล์ดัง
กล่าว
5. กดปุ่ม OK เพื่อดำเนินการในขั้นตอนต่อไป
6. จะปรากฎไดอะล็อก CSS Style Definition ดังรูปซึ่งในไดอะล็อกจะแสดงคุณ
สมบัติต่างๆ ที่เราสามารถเลือกใช้กับ Style ได้ เมื่อเราเลือกคุณสมบัติต่างๆ ที่
ต้องการเสร็จแล้วกดปุ่ม OK เพื่อจบการสร้าง CSS Style

การใช้ Class Style


Class Style เป็น Style ชนิดเดียวที่สามารถใช้กับข้อความหรือ วัตถุใดๆ ที่อยู่ในเอกสาร

ได้ทั้งหมด เมื่อเราใช้ Class Style กับข้อความหรือ วัตถุ จะมีบางคุณสมบัติที่ไม่สามารถแสดงผล

ใน Document Window ได้จำเป็นต้องดูผ่านเว็บเบราเซอร์เท่านั้น

ขั้นตอนการใช้ Class Style มีดังนี้

1. เลือกข้อความหรือ วัตถุที่ต้องการ
2. เปิด CSS Style Panel เปลี่ยนมุมมองเป็นมุมมอง Apply Style แล้วเลือก Style ที่
ต้องการในรายการ CSS Style ที่แสดงอยู่ในกล่องแสดงรายการดังรูปหรือ ใน
Property Inspector เปลี่ยนเป็น CSS Mode แล้วเลือก Style ที่ต้องการในป๊อปอัพ
เมนู CSS Style หรือ เลือกเมนู Text -> CSS Styles และ เลิก Style ที่ต้องการในเมนู
ย่อย

3. การยกเลิกใช้ Style ทำได้โดยเลือกข้อความหรือ วัตถุที่ต้องการยกเลิกใช้ Style แล้ว

ในCSS Style Panel เลือก No CSS Style หรือ ใน Property Inspector ใน CSS
Mode เลือก none ในป๊อปอัพเมนู CSS
การสร้างและ เชื่อมโยงไปยัง CSS Style Sheet

CSS Style Sheet เป็นไฟล์ที่เก็บรูปแบบของ CSS ที่เราสร้างไว้ เมื่อเราต้องการใช้ CSS ที่
อยู่ในไฟล์ดังกล่าว ก็เพียงแค่นำเข้าหรือ เชื่อมโยงไฟล์ดังกล่าวเข้ากับไฟล์ที่เราทำงานอยู่ เมื่อใดก็
ตามที่เราแก้ไข Style ที่อยู่ใน CSS Style Sheet แล้ว ไฟล์อื่นๆ ที่ทำการเชื่อมโยงมายังไฟล์ดัง
กล่าวและ ใช้ Style ที่อยู่ในไฟล์ก็จะเปลี่ยนการแสดงผลตามที่เราแก้ไขด้วย
ขั้นตอนการเชื่อมโยงและ นำเข้า CSS Style Sheet มีดังนี้
1. เปิด CSS Style Panel

2. คลิกที่ปุ่ม Attach Style
3. คลิกที่ปุ่ม Browse เพื่อหา CSS Style Sheet ที่ต้องการ
4. เลือก Link เพื่อทำการเชื่อมโยง CSS Style Sheet เข้ากับไฟล์ที่เรากำลังทำงานอยู่
การแก้ไข CSS Style

การแก้ไข CSS Style เราสามารถทำได้กับ CSS Style ทั้งที่อยู่ในไฟล์เดียวกันกับไฟล์ที่เรา
กำลังทำงานอยู่และ ไฟล์ภายนอกที่เราเชื่อมโยงด้วย โดยขั้นตอนการแก้ไขมีดังนี้
1. ใน CSS Style Panel เปลี่ยนมุมมองเป็นแบบ Edit Style
2. เลือก Style ที่ต้องการแก้ไขในกล่องรายการแล้วดับเบิลคลิกที่เมาปุ่มซ้าย
3. จะปรากฎไดอะล็อก CSS Style Definition ให้แก้ไข Style เมื่อแก้ไขเสร็จแล้วกด OK
เพื่อจบการแก้ไข 

เป็นไงบ้างครับกับ CSS  ลองศึกษากันดูนะครับ วันนี้แค่นี้ก่อนครับ