Make a Home with HTML : สร้างบ้านสวยด้วยภาษา HTML

การสร้างความโดดเด่นด้วยสไตล์ชีท | การเพิ่มเทคนิคพิเศษ | การสร้างเฟรม

เว็บไซต์มีความแตกต่างจากเอกสารสิ่งพิมพ์ ในแง่ของเทคนิคการนำเสนอ ที่มีความน่าสนใจ สามารถเพิ่มเติมเทคนิคพิเศษ ทำให้มีการโต้ตอบกับผู้ชมด้วยลูกเล่นต่างๆ การเพิ่มเสียงประกอบ การใช้ภาพเคลื่อนไหว เช่น คลิปภาพยนต์สั้น การ์ตูน เข้ามาเป็นตัวแทนนำเสนอเนื้อหา หรือเล่าเรื่องต่าง

เทคนิคที่นำมาใช้จะต้องเลือกให้เหมาะสมกับยุคสมัย เพราะเทคโนโลยีเปลี่ยนแปลงเร็วมาก การเร่งศึกษาในเรื่องที่คาดหวังไม่ได้ว่า จะได้รับความนิยมเพียงใด จะเป็นการสูญเปล่าถ้าความนิยมนั้นหดหายไป เทคนิคบางอย่างอาจจะเหมาะสมกับ ผู้ชมที่มีการเชื่อมต่ออินเทอร์เน็ตความเร็วสูง จึงควรระมัดระวังหรือมีทางเลือกให้กับผู้ใช้งานความเร็วต่ำด้วย

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

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

Cascading Style Sheet : การกำหนดสไตล์ให้กับหน้าเว็บเพจ

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

ประโยชน์ที่ได้จากการใช้สไตล์ชีตในการควบคุมการแสดงผลในหน้าเว็บเพจ

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

CSS Structure : โครงสร้างของสไตล์ชีต

โครงสร้างของการเขียนสไตล์ชีต HTML Tag {Property : Value; Property : Value; ...}

HTML Tag	คำสั่งในภาษา HTML
Property	ชื่อของคุณสมบัติที่เป็นส่วนขยายของคำสั่งภาษา HTML หากมีหลายค่าแต่ละค่าจะคั่นด้วยเครื่องหมายเซมิโคล่อน (;)
Value	ค่าของ Property ที่กำหนด
เครื่องหมาย {...}	ทำหน้าที่เหมือนกับเครื่องหมาย <...> ในภาษา HTML

ตัวอย่าง การกำหนดการแสดงผลบนเว็บเพจด้วยคำสั่ง H1 และมีฟอนต์เป็น Angsana UPC สีแดง เราจะเขียนด้วยคำสั่งภาษา HTML และแบบสไตล์ชีตได้ดังนี้

HTML Style	Cascading Style Sheet
<FONT COLOR="red" FACE="AngsanaUPC"> <H1>หัวเรื่อง ตัวอักษรแบบ AngsanaUPC สีแดง</H1> </FONT> ....	H1 {font-family: AngsanaUPC; Color: red} ...... <H1>หัวเรื่อง ตัวอักษรแบบ AngsanaUPC สีแดง</H1> ....

Inline CSS : การใช้สไตล์ชีตในบรรทัดคำสั่ง HTML

Inline Style Sheet เป็นการกำหนดสไตล์ชีตให้กับคำสั่ง HTML โดยตรงในบรรทัด ด้วยการแทรกค่าคุณสมบติหลังคำสั่ง ดังตัวอย่าง กำหนดให้ข้อความบางส่วนเน้นขนาดและสี

คำสั่ง : ย่อหน้านี้<FONT STYLE="color: red; font-size:14pt">ตัวอักษรสีแดงขนาด 14 พอยท์</FONT>

ผลลัพธ์ : ย่อหน้านี้ตัวอักษรสีแดงขนาด 14 พอยท์

Embeded CSS : การใช้สไตล์ชีตในไฟล์ HTML

Embeded Style Sheet เป็นการกำหนดสไตล์ชีตไว้ภายในคำสั่ง <STYLE>...</STYLE> อยู่ระหว่างส่วนหัว (HEAD) ของไฟล์ HTML โดยมีรูปแบบการเขียนดังนี้

<HEAD>
<TITLE>Embeded Style Sheet</TITLE>
<STYLE>
HTML Tag {Property: Value; Property: Value; ... }
</STYLE>
</HEAD>

ตัวอย่าง การกำหนดสไตล์ชีต ที่กำนหดให้ พื้นหลังของหน้าเว็บเป็นสีเขียวอ่อน หัวเรื่องสีน้ำเงินขนาด 16 พอยต์จัดกึ่งกลาง หัวเรื่องรองสีเขียวเข้มขนาด 12 พอยต์ และย่อหน้าข้อความเยื้องครึ่งนิ้ว ตัวอักษรขนาด 10 พอยต์ จัดชิดขอบซ้าย-ขวา

<HTML>
<HEAD>
<TITLE>
Embeded Style Sheet Example
</TITLE>
<Style>
BODY {background: #99ffcc; margin-top: .25in; margin-left: 1in; margin-right: 1in;}
H1 {font-size: 16pt; font-family: "MS Sans Serif"; color: #0000ff; text-align: center;}
H2 {font-size: 12pt; font-family: "MS Sans Serif"; color: #006600; text-align: left;}
P {font-size: 10pt; font-family: "MS Sans Serif"; color: #000066; text-align: justify; text-indent: 0.5in;}
</Style>
</HEAD>
<BODY>
<H1>เทคนิคของการใช้สไตล์ชีตแบบ Embeded</H1>
<H2>คำสั่งและคุณสมบัติของสไตล์</H2>
<P>คำสั่ง BODY จะมีสไตล์ในการกำหนดสีคือ background: ชื่อสี; ระยะห่างจากขอบบราวเซอร์บนคือ margin-top: ระยะ (พิกเซล,นิ้ว,เซนติเมตร) ระยะห่างจากขอบบราวเซอร์ซ้ายและขวาคือ margin-left:ระยะ; margin-right:ระยะ </P>
<P>คำสั่ง H และ P จะเหมือนกันคือกำหนดขนาดฟอนต์ด้วย font-size:ขนาด (px,pt) รูปแบบฟอนต์ด้วย font-family: ชื่อฟอนต์ (ถ้าชื่อฟอนต์มีช่องว่างต้องใช้เครื่องหมาย ("...") ครอบไว้ กำหนดสีด้วย color: ชื่อสี และการจัดตำแหน่งข้อความด้วย text-align: ตำแหน่ง (left/center/right/justify) เฉพาะคำสั่งย่อหน้าจะมีการกำหนดระยะเยื้องในบรรทัดแรกด้วย text-indent: ระยะ; </P>
</BODY>
</HTML>

External (linked) CSS : การอ้างถึงสไตล์ชีตในแยกต่างหาก

Linking Style Sheet เป็นการสร้างแฟ้มไฟล์สไตล์ชีตแยกออกมาจากไฟล์ HTML โดยแฟ้มนี้จะมีส่วนขยายเป็น .css ไฟล์ HTML ที่เรียกไฟล์สไตล์ชีตมาใช้งานต้องสร้างการเชื่อมโยงด้วย <LINK> ไว้ในส่วน <HEAD>...</HEAD> เพื่อเรียกใช้แฟ้มสไตล์ชีต

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

<LINK REL="StyleSheet" HREF="mystyle.css" TYPE="text/css">

เขียนไฟล์ตามตัวอย่างด้านล่างแล้วจัดเก็บในชื่อ mystyle.css

BODY {background: #99ffcc; margin-top: .25in; margin-left: 1in; margin-right: 1in;}
A:LINK { color: #0000cc; text-decoration: none}
A:VISITED { color: #990099; text-decoration: none}
A:ACTIVE { color: #006600; text-decoration: underline}
A:HOVER { color: #006600; text-decoration: underline; font-weight: bold}
H1 {font-size: 16pt; font-family: "MS Sans Serif"; color: #0000ff; text-align: center;}
H2 {font-size: 12pt; font-family: "MS Sans Serif"; color: #006600; text-align: left;}
P {font-size: 10pt; font-family: "MS Sans Serif"; color: #000066; text-align: justify; text-indent: 0.5in;}

Cascading Style Editor : เครื่องมือสำหรับการเขียนสไตล์ชีต

เราสามารถใช้ Text Editor ใดๆ ก็สามารถเขียนสไตล์ชีตได้ และโปรแกรมสร้างเว็บสำเร็จรูปบางโปรแกรม ก็จะมีความสามารถในการเขียนสไตล์ชีตได้ เช่น DreamWeaver, FrontPage แต่ถ้าเราใช้การเขียนภาษา HTML โดยการใช้โปรแกรม Notepad ก็สามารถเขียนได้โดยตรง หรือจะใช้โปรแกรมสำหรับเขียนสไตล์ชีตโดยเฉพาะก็ได้ เช่น TopStyle Lite 3.10 ของบริษัท Bradbury Software ซึ่งสามารถดาวน์โหลดได้ฟรี คลิกที่นี่

ยังมีเทคนิคขั้นสูงที่ควรรู้เกี่ยวกับการใช้งาน Cascading Style Sheet ให้สามารถควบคุมเว็บไซต์ได้ดังใจปรารถนา ที่ควรศึกษาเพิ่มเติม

More Technics of StyleSheet » » Class & ID | Grouping | Refference Properties

Your visitor no.

Create & Design Web Page with Basic HTML & Tools
Author : KruMontree Kotkanta e-M@il : webmaster at krumontree.com