Cascading Style Sheet

บทที่ 1 การใช้ Cascading Style Sheet

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

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

การใส่ CSS ใน <HEAD>

การใช้ CSS แบบแรกที่ผมจะแนะนำก็คือการใส่มันลงไปในส่วน <HEAD>...</HEAD> ซึ่งจะทำให้ มีผลทั่วทั้งเพจ

<HTML> <HEAD> <TITLE>ตัวอย่างการใช้ CSS</TITLE> <STYLE TYPE="text/css"> BODY {background:black; color:white; } H1 { font-size:24pt; font-family:Comic Sans Ms,Cursive; text-align :center } </STYLE> </HEAD> <BODY> <H1>CSS Example</H1> CSS Cool! </BODY> </HTML> การใส่ Style Sheet ทำได้โดยใช้แท็ก <STYLE TYPE="text/css">...</STYLE> และภายในนี้เราจะใส่ Style Sheet ลงไป โดยมีไวยากรณ์ดังนี้

element { attribute : value; attribute : value; attribute : value; ... } จากตัวอย่างข้างต้น element ตัวแรกคือ BODY มีการกำหนด attribute 2 ตัวคือ background และ color และ element อีกตัวคือ H1 ที่ถูกกำหนดฟอนต์ , ขนาดอักษร และการวางตัวให้อยู่ตรงกลาง

การใช้ CSS แบบ Import File

เอาล่ะ เพื่อให้การใช้ CSS ของเรามีประสิทธิภาพยิ่งขึ้น แทนที่เราจะใส่มันไว้ใน Head ของแต่ละเพจ เราจะแยกมันออกมาจากไฟล์หลักเลย เพื่อให้มันเป็นไฟล์ Style Sheet 100% หลังจากนั้นค่อยดึงมันเข้าไปใช้ในแต่ละเพจ ที่นี้เราเขียน Style Sheet เพียงครั้งเดียวก็สามารถใช้ได้ทั้งเวบไซต์เลย สะดวกดีไหมล่ะ

วิธีการก็คือ แยกส่วนที่เป็น Style Sheet ออกมา แล้วเซฟไว้โดยมีส่วนขยายเป็น .css

BODY {background:black; color:white; } H1 { font-size:24pt; font-family:Comic Sans Ms,Cursive; text-align :center } ข้างบนนี้ผมขอเซฟในชื่อ style.css นะครับ หลังจากนั้นผมก็จะ Import มันเข้ามาโดยใช้ โค้ดนี้ครับ <link rel="stylesheet" type="text/css" href="style.css" > ดังนั้น ไฟล์ใหม่ของผมก็จะเป็นแบบนี้ ถ้ากด view ดูก็จะได้ผลแบบเดิมครับ <HTML> <HEAD> <TITLE>ตัวอย่างการใช้ CSS</TITLE> <link rel="stylesheet" type="text/css" href="style.css" > </HEAD> <BODY> <H1>CSS Example</H1> CSS Cool! </BODY> </HTML>

การใช้ CSS แบบ inline

นอกจากวิธีใช้ 2 แบบที่แนะนำไปแล้ว ยังมีวิธีใช้อีกแบบหนึ่งครับ ใช้กำหนดใน Tag แต่ละตัวเลย (คล้ายๆการใช้ <FONT> แบบเก่าแต่มีประสิทธิภาพมากกว่า)

วิธีการก็คือใช้ Attribute ชื่อ style ซึ่งมีอยู่ในแท็กของ HTML เกือบทุกตัว ซึ่งมีวิธีใช้ดังนี้ครับ

<TAGname STYLE="attribute:value;attribute:value;attribute:value;attribute:value;"> ข้างล่างนี้เป็นตัวอย่างการใช้ StyleSheet แบบ Inline ครับ <H1 STYLE=" font-size:24pt; font-family:Comic Sans Ms,Cursive; text-align :center">CSS Cool!</H1>

Back top top | Next Charpter >>

		© copyright 2001 Sorrawut Korsuwansiri