Dreamweaver CS

เริ่มต้นกับ CSS

เรียนรู้พื้นฐานของ css เพื่อที่จะใช้งานร่วมกับ dreamweaver ได้อย่างมีประสิทธิภาพ

บทนี้เป็นพื้นฐานของเรื่อง CSS บอกพื้นฐานของการใช้งาน CSS แบบคร่าวๆ สำหรับผู้ไม่มีพื้นฐานจะทำให้ยากแก่การเข้าใจ (สามารถอ่านเรื่อง CSS พื้นฐานได้ที่หัวข้อ สร้าง web page จะเป็นการปูพื้นฐานที่ดีเรื่อง CSS)


พื้นฐานของ CSS

เริ่มจาก style selectors เราจะกำหนดคุณสมบัติต่างๆ เช่นขนาดตัวอักษร สีตัวอักษร พื้นหลัง ต่างๆไว้ ใน style selectors เมื่อนำไปใช้ก็จะอ้างอิงตาม selectors ที่กำหนดไว้ รูปแบบของ selectors มีรายละเอียดด้านล่าง


Class selectors
การประกาศใช้จะขึ้นต้นด้วยเครื่องหมาย (.) เช่น .title{font-size: 15px} ถ้า element ใดใช้ class title ก็จะแสดงตัวอักษรขนาด 15px

Tag selectors
เป็นการอ้างอิงโดยใช้ HTML tags เช่น h1{font-size: 15px} เป็นการกำหนดให้ <h1> แสดงผลขนาดตัวอักษรเป็น 15px

ID selectors
การประกาศจะขึ้นต้นด้วยเครื่องหมาย (#) นิยมใช้กับ สิ่งที่มีเพียงอันเดียว มักใช้กับส่วนที่เป็น layout เช่น #header #content #footer (อ่านเรื่องนี้ในหัวข้อ CSS layout)



การใช้งาน CSS

การใช้งาน CSS จะใช้ได้ 3 แบบคือ

1. เขียน CSS ไว้เว็บเพจนั้น (Internal) เราจะเขียน CSS ไว้ใน <head> ของเว็บเพจนั้นเลย ซึ่งการแสดงผลของ CSS ก็จะมีผลเฉพาะในเว็บเพจนี้เท่านั้น

2. เขียนไฟล์ CSS แยกออกมา (External) แล้วใช้คำสั่ง เพื่อนำไฟล์ CSS ที่เขียนไว้ไปใช้ในแต่ละหน้า เขียนแบบนี้จะเป็นที่นิยมใช้มากกว่า เพราะสามารถแก้ไขได้ง่าย

3. เขียน CSS ใน HTML เลย (Inline) ซึ่งจะทำให้ใช้ได้แต่เฉพาะใน tag ที่เราเขียนเท่านั้น

ตัวอย่าง CSS code

.imagecaption { 
    font-family: 'Times New Roman', Times, serif;
    font-size: small;
    font-style: italic;
    font-weight: bold;
}


H1 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: large;
}

class imagecaption จะทำงานดังนี้ ให้แสดง font > Times New Roman , Times, serif โดยใช้ตัวอักษรขนาดเล็ก เป็นแบบตัวเอียง และหน้า

H1 tag จะแสดงผลดังนี้ ใช้ font > Arial, Helvetica, sans-serif โดยใช้ตัวอักษรขนาดใหญ่


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