CSS Chapter1: Cascading Style Sheet Introduction

CSS Chapter1: Cascading Style Sheet Introduction

Chapter1: Cascading Style Sheet Introduction

CSS

            เพื่อนๆอาจจะเคยจัดฟอนต์และสีของตัวอักษรและตารางต่างๆด้วย HTML กันมาบ้างแล้ว ลองนึกถึงความยุ่งยากในการทำเว็บจำนวนมากกว่า 20 เพจที่ต้องมีรูปแบบของตัวอักษรทั้งส่วนที่เป็นตัวอักษรธรรมดา และหัวข้อต่างๆ เหมือนๆกัน แบบเดียวกันทั้งสี ขนาด และฟอนต์ ซึ่งเพื่อนๆจะต้องใส่tag <FONT> ในทุกๆตำแหน่ง ที่จะกำหนด Font แม้ว่ามันจะซ้ำๆกันเป็นร้อยเป็นพันครั้งก็ตาม แต่สิ่งที่ยุ่งยากยิ่งกว่านั้นก็คือการแก้ไขรูปแบบที่ทำไปแล้ว สมมุติว่าเจ้านายของเพื่อนๆเปิดเว็บมาชม แล้วเพื่อนๆก็ถูกตำหนิว่า "ส่วนที่เป็นหัวข้อน่าจะใช้ตัวอักษรขนาดใหญ่กว่านี้นะ" สิ่งที่เพื่อนๆต้องทำก็คือ เปิดเว็บทั้ง 20 หน้านั้นมาแก้ไข ถ้ามีหน้าละ 10 หัวข้อ ก็เท่ากับว่าเพื่อนๆต้องแก้ไข 200 จุด เหนื่อยมั้ยล่ะครับ 

แต่ถ้าเพื่อนๆใช้ CSS (Cascading Style Sheet) จำนวนครั้งที่เพื่อนจะแก้ไขจะลดลงมาเหลือเพียง 1 จุดเท่านั้นครับ แนวคิดของ CSS ก็คือ สมมุติว่าผมกำหนดให้ Style A หมายถึง Font MS Sans Serif ขนาด 10px และมีสีดำ ทุกๆตำแหน่งที่ผมใช้ Style Aก็จะมีรูปแบบตัวอักษรเป็นแบบนั้นหมด ... แนวคิดมีแค่นี้เองครับ ง่ายไหมล่ะ ทีนี้เรามาดูวิธีใช้บ้างดีกว่า 

CSS

ในกระทู้นี้ ผมจะให้เพื่อนๆได้เรียนรู้ว่า อะไรคือ CSS , CSS ทำงานอย่างไร.... หรือเราจะควบคุมมันได้ยังไง... มันมีประโยชน์ยังไง.... เราจะได้มาเรียนรู้กันในกระทู้นี้ครับผม
CSS คืออะไร?? มันช่วยอะไรเรา??....

•CSS ย่อมาจาก Cascading Style Sheets
•CSS จะช่วยเข้ามาควบคุมลักษณะต่างๆภายใน HTML ให้ง่ายขึ้น
•โดยปกติคุณสมลักษณะของ HTML จะถูกเก็บไว้ที่ CSS เพื่อความสะดวกในการจัดการ
•CSS จะช่วยเข้ามาแก้ปัญหาความยุ่งยากใน HTML
•CSS จะช่วยให้งานที่มีขนาดใหญ่ควบคุมได้ง่ายดาย
•สามารถใช้งาน CSS ได้ง่ายดาย เพียงแค่ประกาศเรียกใช้งานสั้นๆ
•สามารถใช้หลากหลายคุณลักษณะผ่าน CSS เพียงแค่ไฟล์เดียว

CSS

หลักไวยากรณ์ของ CSS (CSS Syntax)

selector { property : value }
การสร้าง Style Sheet ทำได้โดยใช้แท็ก <STYLE TYPE="text/css">...</STYLE> และภายในนี้เราจะใส่ Style Sheet ของเราลงไป
ตัวอย่าง

CODE

<STYLE TYPE="text/css"> body {background:black; color:orange } h1 { font-size:15pt; font-family:tahoma } </STYLE>

ตัวอย่าง เริ่มต้นกับ CSS

จากตัวอย่างข้างต้น selector ตัวแรกคือ body มีการกำหนด property 2 ตัวคือ background และ color และ selector อีกตัวคือ h1 ที่ถูกกำหนดฟอนต์ , ขนาด


Note
เพิ่มเติมเป็นเกร็ดความรู้ครับ คือต้องระวังเคาะเว้นวรรคในตอนประกาศค่า value นิดนึงนะครับ เช่น...ถ้าเกิดเราประกาศค่าตามนี้

CODE

p {margin-left: 20px}

code ด้านบนนี้เป็นการประกาศที่ถูกต้อง ซึ่งจะมีผลทำให้ code นี้ทำงานได้กับทุกบราวเซอร์เลยครับ แต่ถ้าเราเผลอไปเว้นวรรคในส่วนของหน่วยของมัน ซึ่งในที่นี่เป็น px มันก้จะทำให้เกิดข้อแตกต่างทันทีครับ

CODE

p {margin-left: 20 px}

code ด้านบนนี้จะทำงานแค่กับ IE เท่านั้น แต่จะไม่ทำงานกับ Firefox และ Netscape ครับ จึงต้องระวังให้เคาะเว้นวรรคให้ดีครับ...


Chapter แรก ขอจบตรงนี้แล้วกันครับ Chapter ต่อไปเรามาดูวิธีการใช้งานกัน... ติดตามตอนต่อไปใน Css2 หรือ Chapter2 นั้นเองครับสำหรับวันนี้ล่ากันไปก่อนเทคโนโลยีล้ำยุคล้ำสมัยติดตามได้อีกบทความต่อไป

ติดตาม เพิ่มเพื่อนและติดตาม Webmaster Pocky GunSanguine.