คนปั่น - ลั่นกล้อง

ฝันเล็กๆ ในการเดินทางท่องเที่ยวด้วยจักรยาน

การจัดรูปแบบเว็บเพจด้วย 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 แบบก็ได้ โดยคุณสมบัติจากสไตล์ทุกแบบจะถูกนำมาผสมกัน แต่ถ้าเกิดความขัดแย้งก็จะดูตามระดับความสาคัญ คือ

  1. Inline style มีระดับสูงสุด รองลงไปคือ 
  2. Embedded sytle sheet และ 
  3. External style sheet 
     นอกจากนี้ถ้ามีการใช้ไฟล์ .css หลายไฟล์ก็จะดูตามลำดับที่ไฟล์นั้นถูกรียกเข้ามาบนเว็บเพจ คุณสมบัติเช่นนี้จะทาให้คุณสามารถใช้ไฟล์ .css เพื่อควบคุมทั้งเว็บไซต์ แต่ในขณะเดียวกันก็ยังดัดแปลงรูปแบบบางอย่างให้มีผลเฉพาะบนเว็บเพจใดเว็บเพจหนึ่ง หรือจุดใดจุดหนึ่งที่ต้องการได้ ... ดูหัวข้อ วิธีการใส่โค้ด CSS

รูปแบบของคาสั่ง CSS
     คำสั่ง CSS ที่ใช้กำหนดคุณสมบัติของสไตล์จะประกอบด้วย 2 ส่วน คือ Selector และ Declaration
  • Selector คือชื่อสไตล์
  • Declaration เป็นส่วนประกอบไปด้วยคุณสมบัติ (Property) และค่าของคุณสมบัตินั้น (Value) เช่น
    - รูปแบบ : selector{property:value}
    - คำสั่ง : table{border:1px solid #C00;}
ดูเพิ่มเติมจาก CSS Syntax

ประเภทของสไตล์ CSS
     สไตล์ CSS ที่คุณสามารถใช้ใน Dreamweaver แบ่งออกเป็น 4 ประเภท คือ 
  1. Class style, 
  2. ID style,
  3. Tag style และ 
  4. 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 ที่อยู่นอกตาราง
อ่านเพิ่มเติม ...

ไม่มีความคิดเห็น :