การจัดรูปแบบเว็บเพจด้วย Cascading style Sheet (CSS) : พื้นฐาน
CSS ย่อมาจาก Cascading style Sheet
... เป็นชุดคำสั่งสาหรับจัดรูปแบบการแสดงผลที่นิยมนามาใช้กับเว็บเพจ เพื่อเสริมคุณสมบัติของ HTMLซึ่งจะช่วยให้คุณจัดรูปแบบของเนื้อหาต่างๆบนเว็บเพจได้อย่างสะดวก รวดเร็ว มีประสิทธิภาพ และเที่ยงตรงตามที่ได้ออกแบบไว้
การจัดลาดับความสาคัญของสไตล์ (Cascading)
CSS ยอมให้มีการใช้สไตล์ได้หลายระดับ โดยแต่ละระดับจะสืบทอดคุณสมบัติเดิมลงมาเป็นชั้นๆแต่ในกรณีที่เกิดความขัดแย้งกันก็จะยึดตามระดับของสไตล์เหล่านั้น ตามลักษณะการใช้งานสไตล์ CSS
ลักษณะการใช้งานสไตล์ CSS
แบ่งออกเป็น 3 แบบคือ
- External Style Sheet คือการนำสไตล์ที่เก็บอยู่ในไฟล์ .css เข้ามาใช้บนเว็บเพจ
- Embedded Style Sheet คือการใช้สไตล่ที่เก็บอยู่ภายในเว็บเพจนั้นเอง
- Inline Style คือการใช้คาสั่ง CSS กำกับไว้กับแท็ก HTML โดยตรง
บนเว็บเพจหนี่งๆอาจมีการใช้สไตล์ทั้ง 3 แบบก็ได้ โดยคุณสมบัติจากสไตล์ทุกแบบจะถูกนำมาผสมกัน แต่ถ้าเกิดความขัดแย้งก็จะดูตามระดับความสาคัญ คือ
- Inline style มีระดับสูงสุด รองลงไปคือ
- Embedded sytle sheet และ
- External style sheet
รูปแบบของคาสั่ง CSS
คำสั่ง CSS ที่ใช้กำหนดคุณสมบัติของสไตล์จะประกอบด้วย 2 ส่วน คือ Selector และ Declaration
- Selector คือชื่อสไตล์
- Declaration เป็นส่วนประกอบไปด้วยคุณสมบัติ (Property) และค่าของคุณสมบัตินั้น (Value) เช่น
- รูปแบบ : selector{property:value}
- คำสั่ง : table{border:1px solid #C00;}
ดูเพิ่มเติมจาก CSS Syntax
ประเภทของสไตล์ CSS
สไตล์ CSS ที่คุณสามารถใช้ใน Dreamweaver แบ่งออกเป็น 4 ประเภท คือ
- Class style,
- ID style,
- Tag style และ
- Compound style ซึ่งมีคุณสมบัติที่แตกต่างกันดังนี้
Class Style
เป็นสไตล์ที่สามารถนาไปใช้ร่วมกับแท็กใดๆ ก็ได้ เพื่อทำให้แท็กนั้นมีคุณสมบัติตามที่กำหนดไว้โดยจะไม่มีผลต่อแท็กเดียวกันที่อยู่ในส่วนอื่นๆ
วิธีใช้สไตล์ประเภทนี้จะใช้แอดทริบิวต์ class ตัวอย่างเช่น
*1* ใช้กับแท็ก <p> เพื่อกำหนดคุณสมบัติของข้อความทั้งย่อหน้า เช่น ถ้าคาสั่งปกติเป็นดังนี้
- <p>ลงทะเบียนสมาชิก</p>
เมื่อคุณกาหนด class style ที่ชื่อ page_bodyให้กับย่อหน้าข้างต้น คาสั่งจะเปลี่ยนเป็น
- <p class=”page_body”>ลงทะเบียน</p>
*2* ในกรณีที่คุณใช้สไตล์กับข้อความ เพียงบางส่วนของย่อหน้า โปรแกรมจะสร้างแท็ก <span> ขึ้นมารองรับเพื่อกาหนดแอตทริบิวต์ class เช่น
ถ้าคาสั่งปกติเป็น
- <p>ลงทะเบียนสมาชิก</p>
เมื่อคุณกาหนด Class style ให้กับข้อความ “ลงทะเบียน” คำสั่งจะเปลี่ยนเป็น
- <p><span class=”page_body”>ลงทะเบียน</span>สมาชิก</p>
ID Style
คุณจะสามารถใช้สไตล์นี้ร่วมกับออบเจ็คใดๆ ก็ได้ โดยจะต้องระบุชื่อสไตล์ด้วยแอดทริบิวต์ ID และจะต้องไม่มีออบเจ็คอื่นที่มีชื่อซ้ากันอีกบนเว็บเพจนั้น ชื่อของสไตล์จะมีเครื่องหมาย # นำหน้า
Tag Style เป็นการใช้คาสั่ง CSS เพื่อดัดแปลงคุณสมบัติของแท็ก HTML โดยตรง ซึ่งจะทำให้มีผลต่อทุกๆ องค์ประกอบบนเว็บเพจที่ใช้แท็กนี้ เช่น ถ้าต้องการให้ข้อความหัวเรื่อง-1 (Heading 1)เป็นสีแดงก็ดัดแปลงแท็ก<h1>ข้อความหัวเรื่อง-1 ทุกๆจุดบนเว็บเพจจะมีคุณสมบัติตามนี้ทันที
Compound Style กรณีที่ต้องการดัดแปลงคุณสมบัติของแท็กบางชุดที่ใช้ร่วมกัน คุณก็ตั้งชื่อสไตล์ให้ตรงกับชุดแท็กนั้น เช่น ถ้าจะให้ข้อความหัวเรื่อง-1 (แท็ก<h1>)ที่อยู่ในเซลของตาราง (แท็ก<td>) มีคุณสมบัติเฉพาะ ก็สร้างสไตล์ชื่อ td h1 แล้วกาหนดคุณสมบัติตามต้องการ ผลก็คือหัวเรื่อง-1 ที่อยู่ในตารางจะมีรูปแบบตามที่กาหนด และจะแตกต่างจากหัวเรื่อง 1 ที่อยู่นอกตารางอ่านเพิ่มเติม ...
สมัครสมาชิก:
ส่งความคิดเห็น
(
Atom
)
ไม่มีความคิดเห็น :
แสดงความคิดเห็น