Internal CSS
Dreamweaver
ในบทนี้จะเป็นเนื้อหาการเขียน 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 ใหม่ได้
เกี่ยวกับบทความนี้
- ระดับความยาก : พื้นฐาน
- คะแนนของบทความนี้ : 5
- สร้างเมื่อ : 15-05-2010
- จำนวนครั้งที่เปิด : 1,012
- เนื้อหาที่เกี่ยวข้อง :
- -
คลิกที่ เจ๋งเป้ง! เพื่อโหวตให้กับบทความนี้หากคิดว่าน่าสนใจ
บทความอื่นๆในหมวดลองทำเว็บไซต์ แบบง่ายๆ (13 เรื่อง)
เริ่มต้นกับ CSS
บทนี้เป็นพื้นฐานของเรื่อง CSS บอกพื้นฐานของการใช้งาน CSS แบบคร่าวๆ (สามารถอ่านเรื่อง CSS พื้นฐานได้ที่หัวข้อ สร้าง web page )
สร้างเมื่อ : 15-05-2010 22:43 | จำนวนครั้งที่เปิด : 1,771
Internal CSS
ในบทนี้จะเป็นเนื้อหาการเขียน CSS แบบ Internal คือ เราจะเขียน CSS ไว้ใน
ของเว็บเพจนั้นเลย ซึ่งการแสดงผลของ CSS ก็จะมีผลเฉพาะในเว็บเพจนี้เท่านั้นสร้างเมื่อ : 15-05-2010 22:43 | จำนวนครั้งที่เปิด : 1,012
External CSS
การเขียน CSS เป็นไฟล์แยกออกจากเว็บเพจ การเขียนด้วยวิธีนี้จะทำให้สามารถแก้ไขหน้าเว็บเพจได้ดี และเป็นที่นิยมใช้
สร้างเมื่อ : 15-05-2010 22:44 | จำนวนครั้งที่เปิด : 1,069
การใช้งาน CSS
หลังจากที่เราเขียน CSS กันมาแล้วในบทนี้จะเป็นการกำหนด CSS style ให้กับวัตถุต่างๆในเว็บเพจ
สร้างเมื่อ : 15-05-2010 23:29 | จำนวนครั้งที่เปิด : 999
เปลี่ยนสีของตัวอักษรที่เป็น Hyperlink
เราสามารถเปลี่ยนสี ขนาด การขีดเส้นใต้ ของตัวอักษรที่เป็น Hyperlink ได้ตามขั้นตอนในบทนี้
สร้างเมื่อ : 16-05-2010 4:56 | จำนวนครั้งที่เปิด : 1,139
รายละเอียด Type category
ในบทก่อนเราเคยลองเขียน CSS กันแล้วแต่ยังไม่ได้ลงรายละเอียดกัน ในหมวดนี้เราจะลงรายละเอียดในหมวดของ Type category
สร้างเมื่อ : 15-05-2010 22:49 | จำนวนครั้งที่เปิด : 780
รายละเอียด Background category
ในบทก่อนเราเคยลองเขียน CSS กันแล้วแต่ยังไม่ได้ลงรายละเอียดกัน ในหมวดนี้เราจะลงรายละเอียดในหมวดของ Background category
สร้างเมื่อ : 15-05-2010 22:51 | จำนวนครั้งที่เปิด : 893
รายละเอียด Block category
ในบทก่อนเราเคยลองเขียน CSS กันแล้วแต่ยังไม่ได้ลงรายละเอียดกัน ในหมวดนี้เราจะลงรายละเอียดในหมวดของ Block category
สร้างเมื่อ : 15-05-2010 22:52 | จำนวนครั้งที่เปิด : 738
รายละเอียด Box category
ในบทก่อนเราเคยลองเขียน CSS กันแล้วแต่ยังไม่ได้ลงรายละเอียดกัน ในหมวดนี้เราจะลงรายละเอียดในหมวดของ Box category
สร้างเมื่อ : 15-05-2010 22:53 | จำนวนครั้งที่เปิด : 707
รายละเอียด Border category
ในบทก่อนเราเคยลองเขียน CSS กันแล้วแต่ยังไม่ได้ลงรายละเอียดกัน ในหมวดนี้เราจะลงรายละเอียดในหมวดของ Border category
สร้างเมื่อ : 15-05-2010 23:56 | จำนวนครั้งที่เปิด : 651
รายละเอียด List category
ในบทก่อนเราเคยลองเขียน CSS กันแล้วแต่ยังไม่ได้ลงรายละเอียดกัน ในหมวดนี้เราจะลงรายละเอียดในหมวดของ List category
สร้างเมื่อ : 15-05-2010 22:54 | จำนวนครั้งที่เปิด : 667
รายละเอียด Positioning category
ในบทก่อนเราเคยลองเขียน CSS กันแล้วแต่ยังไม่ได้ลงรายละเอียดกัน ในหมวดนี้เราจะลงรายละเอียดในหมวดของ Positioning category
สร้างเมื่อ : 15-05-2010 22:55 | จำนวนครั้งที่เปิด : 696
รายละเอียด Extensions category
ในบทก่อนเราเคยลองเขียน CSS กันแล้วแต่ยังไม่ได้ลงรายละเอียดกัน ในหมวดนี้เราจะลงรายละเอียดในหมวดของ Extensions category
สร้างเมื่อ : 15-05-2010 22:55 | จำนวนครั้งที่เปิด : 580
