วิธี ในการแทรกคำสั่ง Style Sheets ไว้ในไฟล์ HTML ของเรา มีอยู่ 4 วิธี
- Document Style,
- Inline Style
- External Style
- Imported Style
วิธีที่ 1. Document style
Document style คือ การแทรก Styles เข้าไปในส่วนของ Header ใช้ Tag < Style > แทรกไว้ระหว่าง Tag < Head > และ < /Head > ดังนี้ :-
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
<STYLE type="text/css">
<!--
Style definitions;
-->
</STYLE>
</HEAD>
<BODY></BODY>
</HTML>
attribute type=”text/css” ใน tag < Style > ใช้เพื่อระบุประเภทของ Style ที่จะใช้
ส่วน tag < !-- และ -- > ใช้เพื่อไม่ให้ browser รุ่นเก่าๆ ซึ่งไม่รองรับ Style Sheet แสดงผลคำสั่งต่างๆในส่วนนี้ออกมา
วิธีที่ 2. Inline style
Inline style คือ การแทรก Styles เข้าไปเป็น Attribute ใน Tag ที่ต้องการใช้งานเลย ซึ่งเป็นวิธีที่ไม่แนะนำให้ใช้เป็นอย่างยิ่ง เพราะว่ามันเป็นการซ้ำซ้อน ที่จะแทรก Style ไว้ในทุกคำสั่ง เพราะหากเรามีคำสั่งคล้ายๆ กันมาก เราก็จะต้องแทรก Style เข้าไปในทุกคำสั่ง และถ้าจะเปลี่ยนอะไร ก็จะทำได้ยาก
อย่างไรก็ตาม การใช้วิธีก็ยังทำได้ หากเราต้องการเอามาใช้เพื่อวัตถุประสงค์บางอย่างเฉพาะตรงนั้นเท่านั้น และไม่อยากจะให้มีผลกระทบต่อ Style ในภาพรวม
การระบุ Style แบบนี้ ทำได้โดยการแทรก attribute Style เข้าไปใน Tag HTML ใดๆ ที่เราต้องการ ดังนี้ :-
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
...
</HEAD>
<BODY>
หมายเหตุ : - เราสามารถใช้วิธีนี้ กับ HTML Tag ใดก็ได้ ยกเว้น Tag BASE, BASEFONT, HEAD, HTML, META, PARAM, SCRIPT, STYLE, TITLE
มาดูตัวอย่างกัน :-
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
...
</HEAD>
<BODY>
...
<H1 Style="Font: 18px Verdana; font-weight:bold;"> Title </H1>
...
</BODY>
</HTML>
วิธีที่ 3. External style
External style คือ การพิมพ์ Styles ไว้อีกไฟล์หนึ่ง นามสกุล .css แล้วอ้างอิงมา เป็นวิธีที่ง่าย และสะดวก เพราะเราพิมพ์ Style เก็บไว้เป็นอีกไฟล์หนึ่ง และหากเราต้องการจะเปลี่ยนหน้าตาของเว็บไซด์เรา เราก็แค่แก้ไขไฟล์นี้ หน้าตาของเว็บไซด์เราทั้งหมด ก็จะเปลี่ยนได้ด้วย
เริ่มต้น เราจะต้องสร้าง Text ไฟล์ ระบุ Style Sheets ของเราขึ้นมา เป็นนามสกุล .css เช่น style.css ดังนี้ :-
<!--
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
body
{background-image: home.gif;}
LI
{font: 13px Verdana;}
B
{font: 14px Verdana; font-weight: bold;}
A
{
font:12px Verdana;
font-weight: bold;
color=black;
text-decoration: none;
}
H1
{font: 16px Arial;font-weight: bold;color=black;}
H2
{font: 14px Arial;font-weight: bold;color=black;}
-->
หลังจากนั้น เราก็แทรกการอ้างอิงไฟล์นี้ ไว้ใน HTML ไฟล์ ทุกๆ ไฟล์ที่เราต้องการจะใช้ Style นี้ ดังนี้ :-
<HTML>
<HEAD>
<LINK rel="stylesheet" type="text/css" href="style.css">
</HEAD>
วิธีที่ 4. Imported style
Imported style คือ การพิมพ์ Styles ไว้อีกไฟล์หนึ่ง นามสกุล .css แล้ว import ไฟล์เข้ามาเลย โดยใช้คำสั่ง @IMPORT ภายใน tag < Style > ในส่วนของ tag < Head > ดังนี้ :-
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
<STYLE type="text/css">
<!--
@IMPORT URL(url of the sheet to import);
Definition of document styles;
-->
</STYLE>
</HEAD>
<BODY></BODY>
</HTML>
Document style คือ การแทรก Styles เข้าไปในส่วนของ Header ใช้ Tag < Style > แทรกไว้ระหว่าง Tag < Head > และ < /Head > ดังนี้ :-
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
<STYLE type="text/css">
<!--
Style definitions;
-->
</STYLE>
</HEAD>
<BODY></BODY>
</HTML>
attribute type=”text/css” ใน tag < Style > ใช้เพื่อระบุประเภทของ Style ที่จะใช้
ส่วน tag < !-- และ -- > ใช้เพื่อไม่ให้ browser รุ่นเก่าๆ ซึ่งไม่รองรับ Style Sheet แสดงผลคำสั่งต่างๆในส่วนนี้ออกมา
วิธีที่ 2. Inline style
Inline style คือ การแทรก Styles เข้าไปเป็น Attribute ใน Tag ที่ต้องการใช้งานเลย ซึ่งเป็นวิธีที่ไม่แนะนำให้ใช้เป็นอย่างยิ่ง เพราะว่ามันเป็นการซ้ำซ้อน ที่จะแทรก Style ไว้ในทุกคำสั่ง เพราะหากเรามีคำสั่งคล้ายๆ กันมาก เราก็จะต้องแทรก Style เข้าไปในทุกคำสั่ง และถ้าจะเปลี่ยนอะไร ก็จะทำได้ยาก
อย่างไรก็ตาม การใช้วิธีก็ยังทำได้ หากเราต้องการเอามาใช้เพื่อวัตถุประสงค์บางอย่างเฉพาะตรงนั้นเท่านั้น และไม่อยากจะให้มีผลกระทบต่อ Style ในภาพรวม
การระบุ Style แบบนี้ ทำได้โดยการแทรก attribute Style เข้าไปใน Tag HTML ใดๆ ที่เราต้องการ ดังนี้ :-
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
...
</HEAD>
<BODY>
หมายเหตุ : - เราสามารถใช้วิธีนี้ กับ HTML Tag ใดก็ได้ ยกเว้น Tag BASE, BASEFONT, HEAD, HTML, META, PARAM, SCRIPT, STYLE, TITLE
มาดูตัวอย่างกัน :-
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
...
</HEAD>
<BODY>
...
<H1 Style="Font: 18px Verdana; font-weight:bold;"> Title </H1>
...
</BODY>
</HTML>
วิธีที่ 3. External style
External style คือ การพิมพ์ Styles ไว้อีกไฟล์หนึ่ง นามสกุล .css แล้วอ้างอิงมา เป็นวิธีที่ง่าย และสะดวก เพราะเราพิมพ์ Style เก็บไว้เป็นอีกไฟล์หนึ่ง และหากเราต้องการจะเปลี่ยนหน้าตาของเว็บไซด์เรา เราก็แค่แก้ไขไฟล์นี้ หน้าตาของเว็บไซด์เราทั้งหมด ก็จะเปลี่ยนได้ด้วย
เริ่มต้น เราจะต้องสร้าง Text ไฟล์ ระบุ Style Sheets ของเราขึ้นมา เป็นนามสกุล .css เช่น style.css ดังนี้ :-
<!--
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
body
{background-image: home.gif;}
LI
{font: 13px Verdana;}
B
{font: 14px Verdana; font-weight: bold;}
A
{
font:12px Verdana;
font-weight: bold;
color=black;
text-decoration: none;
}
H1
{font: 16px Arial;font-weight: bold;color=black;}
H2
{font: 14px Arial;font-weight: bold;color=black;}
-->
หลังจากนั้น เราก็แทรกการอ้างอิงไฟล์นี้ ไว้ใน HTML ไฟล์ ทุกๆ ไฟล์ที่เราต้องการจะใช้ Style นี้ ดังนี้ :-
<HTML>
<HEAD>
<LINK rel="stylesheet" type="text/css" href="style.css">
</HEAD>
• • • • |
วิธีที่ 4. Imported style
Imported style คือ การพิมพ์ Styles ไว้อีกไฟล์หนึ่ง นามสกุล .css แล้ว import ไฟล์เข้ามาเลย โดยใช้คำสั่ง @IMPORT ภายใน tag < Style > ในส่วนของ tag < Head > ดังนี้ :-
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
<STYLE type="text/css">
<!--
@IMPORT URL(url of the sheet to import);
Definition of document styles;
-->
</STYLE>
</HEAD>
<BODY></BODY>
</HTML>
ไม่มีความคิดเห็น:
แสดงความคิดเห็น