เริ่มต้นกับ 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 โดยใช้ตัวอักษรขนาดใหญ่

เกี่ยวกับบทความนี้

  • ระดับความยาก : พื้นฐาน
  • คะแนนของบทความนี้ : 6
  • สร้างเมื่อ : 15-05-2010
  • จำนวนครั้งที่เปิด : 1,771
  • เนื้อหาที่เกี่ยวข้อง :
      -

คะแนนความน่าสนใจ

53

คลิกที่ โดนใจ! เพื่อโหวตให้กับบทความนี้หากคิดว่าน่าสนใจ

บทความอื่นๆในหมวดลองทำเว็บไซต์ แบบง่ายๆ (13 เรื่อง)

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

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

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

สร้างเมื่อ : 15-05-2010 22:43 | จำนวนครั้งที่เปิด : 1,771


Internal CSS

Internal CSS

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

สร้างเมื่อ : 15-05-2010 22:43 | จำนวนครั้งที่เปิด : 1,011


External CSS

External CSS

การเขียน CSS เป็นไฟล์แยกออกจากเว็บเพจ การเขียนด้วยวิธีนี้จะทำให้สามารถแก้ไขหน้าเว็บเพจได้ดี และเป็นที่นิยมใช้

สร้างเมื่อ : 15-05-2010 22:44 | จำนวนครั้งที่เปิด : 1,068


การใช้งาน CSS

การใช้งาน CSS

หลังจากที่เราเขียน CSS กันมาแล้วในบทนี้จะเป็นการกำหนด CSS style ให้กับวัตถุต่างๆในเว็บเพจ

สร้างเมื่อ : 15-05-2010 23:29 | จำนวนครั้งที่เปิด : 999


เปลี่ยนสีของตัวอักษรที่เป็น Hyperlink

เปลี่ยนสีของตัวอักษรที่เป็น Hyperlink

เราสามารถเปลี่ยนสี ขนาด การขีดเส้นใต้ ของตัวอักษรที่เป็น Hyperlink ได้ตามขั้นตอนในบทนี้

สร้างเมื่อ : 16-05-2010 4:56 | จำนวนครั้งที่เปิด : 1,138


รายละเอียด Type category

รายละเอียด Type category

ในบทก่อนเราเคยลองเขียน CSS กันแล้วแต่ยังไม่ได้ลงรายละเอียดกัน ในหมวดนี้เราจะลงรายละเอียดในหมวดของ Type category

สร้างเมื่อ : 15-05-2010 22:49 | จำนวนครั้งที่เปิด : 780


รายละเอียด Background category

รายละเอียด Background category

ในบทก่อนเราเคยลองเขียน CSS กันแล้วแต่ยังไม่ได้ลงรายละเอียดกัน ในหมวดนี้เราจะลงรายละเอียดในหมวดของ Background category

สร้างเมื่อ : 15-05-2010 22:51 | จำนวนครั้งที่เปิด : 893


รายละเอียด Block category

รายละเอียด Block category

ในบทก่อนเราเคยลองเขียน CSS กันแล้วแต่ยังไม่ได้ลงรายละเอียดกัน ในหมวดนี้เราจะลงรายละเอียดในหมวดของ Block category

สร้างเมื่อ : 15-05-2010 22:52 | จำนวนครั้งที่เปิด : 737


รายละเอียด Box category

รายละเอียด Box category

ในบทก่อนเราเคยลองเขียน CSS กันแล้วแต่ยังไม่ได้ลงรายละเอียดกัน ในหมวดนี้เราจะลงรายละเอียดในหมวดของ Box category

สร้างเมื่อ : 15-05-2010 22:53 | จำนวนครั้งที่เปิด : 707


รายละเอียด Border category

รายละเอียด Border category

ในบทก่อนเราเคยลองเขียน CSS กันแล้วแต่ยังไม่ได้ลงรายละเอียดกัน ในหมวดนี้เราจะลงรายละเอียดในหมวดของ Border category

สร้างเมื่อ : 15-05-2010 23:56 | จำนวนครั้งที่เปิด : 651


รายละเอียด List category

รายละเอียด List category

ในบทก่อนเราเคยลองเขียน CSS กันแล้วแต่ยังไม่ได้ลงรายละเอียดกัน ในหมวดนี้เราจะลงรายละเอียดในหมวดของ List category

สร้างเมื่อ : 15-05-2010 22:54 | จำนวนครั้งที่เปิด : 667


รายละเอียด Positioning category

รายละเอียด Positioning category

ในบทก่อนเราเคยลองเขียน CSS กันแล้วแต่ยังไม่ได้ลงรายละเอียดกัน ในหมวดนี้เราจะลงรายละเอียดในหมวดของ Positioning category

สร้างเมื่อ : 15-05-2010 22:55 | จำนวนครั้งที่เปิด : 696


รายละเอียด Extensions category

รายละเอียด Extensions category

ในบทก่อนเราเคยลองเขียน CSS กันแล้วแต่ยังไม่ได้ลงรายละเอียดกัน ในหมวดนี้เราจะลงรายละเอียดในหมวดของ Extensions category

สร้างเมื่อ : 15-05-2010 22:55 | จำนวนครั้งที่เปิด : 580