Dreamweaver CS

Internal CSS

การประกาศ CSS สามารถทำได้หลายที่เราสามารถประกาศไว้ในหน้าเว็บเพจ หรือจะแยกเป็นไฟล์ CSS ออกมาแล้วสั่งให้นำไปใช้กับ HTML ที่เราสร้างไว้ก็ได้ ในบทความนี้จะเป็นการประกาศ CSS ไว้ในหน้าเว็บเพจ

ในบทนี้จะเป็นเนื้อหาการเขียน CSS แบบ Internal คือ เราจะเขียน CSS ไว้ใน <head> ของเว็บเพจนั้นเลย ซึ่งการแสดงผลของ CSS ก็จะมีผลเฉพาะในเว็บเพจนี้เท่านั้น ข้อเสียก็อย่างที่บอกไปแล้วว่า ทำให้ยากต่อการแก้ไข เนื่องจากเราต้องตามแก้ไขรายละเอียดทั้งหมดทีละหน้า

เริ่มขั้นตอนการเขียน Internal CSS

1. เปิดเว็บเพจที่ต้องการใช้งาน CSS ขึ้นมา

2. ไปที่ Menu เลือก Text > CSS style > New จะมีหน้าต่างดังรูปด้านล่าง



3. หน้าต่างที่แสดงผลมีรายละเอียดดังนี้

3.1 Select type ในตัวอย่างเลือก Class

กำหนดแบบ Class ใช้ได้กับทุกวัตถุในหน้าเว็บเพจ จะใช้กี่ครั้งก็ได้การเขียนจะเริ่มต้นด้วย (.) เสมอ

กำหนดแบบ Tag ใช้กำหนด HTML tag การเขียนจะเขียน tag ที่ต้องการกำหนด เช่น h1

กำหนดแบบ Advance ใช้สร้าง id จะเขียนขึ้นต้นด้วย (#) 1 หน้าจะใช้แค่ครั้งเดียว นิยมใช้กับ Css layout

3.2 Name เขียนชื่อของ style (selector) เช่น .content ในกรณีที่เราเลือก Advance จะต้องใส่ (#) ไปในชื่อด้วย ส่วนถ้าเลือกแบบ Class ไม่ต้องใส่ (.) เพราะโปรแกรมจะใส่ให้เอง

3.3 ในช่อง Define in เลือก This document only

4. คลิก OK จะมีหน้าต่างดังรูปด้านล่าง



5. หน้าต่างที่แสดงขึ้นมา ใช้ในการกำหนดรายละเอียดของ CSS ของเราเช่น

5.1 font กำหนด font ที่ใช้แสดง

5.2 size ใช้เลือกขนาดของตัวอักษร

5.3 Style กำหนดรูปแบบของตัวอักษร เช่น ตัวเอียง ตัวหนา

5.4 Weight กำหนดความหนาของตัวอักษร

5.5 color กำหนดสีที่ใช้กับตัวอักษร

นี่เป็นตัวอย่างการกำหนดค่าให้ CSS เท่านั้นรายละเอียดสามารถอ่านได้ในบทต่อไป

6. คลิก OK ก็จะทำการสร้าง CSS เรียบร้อย

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

ดังตัวอย่างเป็นชื่อ .content เมื่อเราคลิกที่ชื่อจะมีหน้าต่างดังข้อที่ 5 ให้เราเปลี่ยนรายละเอียด แก้ไข หรือเพิ่มรายละเอียดได้



หาต้องการเพิ่ม style ให้คลิกดังรูปที่วงกลมไว้จะมีหน้าต่างดังข้อ 3 ให้เลือก ให้เราทำตามขั้นตอน 3-6 ก็จะสามารถเพิ่ม style ใหม่ได้


เลื่อนขึ้นด้านบน