Css2 Chapter2: How to Insert a Style Sheet
 |
| Css2 |
External Style Sheet
ความเหมาะสม : งานที่ต้องทำหน้า web page มากๆ....
วิธีนี้เป็นทางออกที่ยอดเยี่ยมสำหรับคนที่ต้องทำหน้าเพจมากๆครับ เพราะสมมุติเราทำเวบเพจมา 20 หน้าแล้ว แต่เราอยากเปลี่ยนสีตัวอัษรใหม่ทุกหน้า คงแทบคลั่งตายพอดี แต่ถ้าเราใช้วิธีนี้ เราเพียงแค่เข้าไปแก้ที่ไฟล์ CSS ของเราเพียงแค่จึ๋งเดียว หน้าเวบเพจทุกหน้าของเราก็จะเปลี่ยนสีตัวอักษรให้หน้าเวบเพจที่เราเรียกใช้ CSS นั้นโดยอัตโนมัติแล้วครับ...ยอดมั้ยล่ะ ^^
วิธีการทำ External Style Sheet
1.ทำการสร้างไฟล์ CSS ของเราเอง ....เล่นไม่ยากครับตัวนี้
วิธีการก็คือ แยกส่วนที่เป็น Style Sheet ออกมา แล้วเซฟไว้โดยมีส่วนขยายเป็น .css
| CODE |
| body {background:black; color:orange } h1 { font-size:15pt; font-family:tahoma } |
ผมจะเซฟ code นี้แล้วเซฟเป็นไฟล์ .css ไว้นะครับ ในที่นี่ผมขอเซฟชื่อไฟล์ว่า style.css นะครับ
2.ต่อมาเราก็มาเรียนเรียกใช้ไฟล์ css ที่เราสร้างแล้วครับ
วิธีการก็คือ ทำการใส่ tag <link> นี้เข้าไปในส่วนของ <head> เท่านั้นเองครับ
| CODE |
| <link rel="stylesheet" type="text/css"href="style.css" /> |
ตัวอย่าง External Style sheet
ถ้าเพื่อนๆตั้งชื่อไฟล์ css ของตัวเองว่ายังไงก้ต้องแก้ตามนั้นด้วยนะครับ เช่นของผมตั้งชื่อไฟล์ css ของผมว่า style ผมก้ต้องกำหนดค่าใน href=”..” ว่า style.css ด้วยครับผม แล้วต้องระวังถึงตำแหน่งของการอ้างอิงไฟล์ด้วยครับ เพราะชอบมีปัญหาในส่วนนี้กันเยอะ....
Internal Style Sheet
ความเหมาะสม : ใช้สำหรับหน้า web page ที่พิเศษกว่าตัวอื่น หรือใช้ทำเพียงแค่ไม่กี่หน้าเท่านั้น...
ตัวอย่าง Internal Style sheet
วิธีการทำ External Style Sheet
1.เล่นไม่ยากครับตัวนี้ วิธีการก็คือ..สร้าง tag <style> ไว้ภายใน tag <head> ภายในหน้าเว็บเพจเลยครับผม อย่างตัวอย่างแรกที่ผมทำให้ดูเลยครับ...
Inline Style Sheet
นอกจากวิธีใช้ 2 แบบที่แนะนำไปแล้ว ยังมีวิธีใช้อีกแบบหนึ่งครับ ใช้กำหนดใน Tag แต่ละตัวเลย (คล้ายๆการใช้ <FONT> แบบเก่าแต่มีประสิทธิภาพมากกว่า)
วิธีการก็คือใช้ property ชื่อ style ซึ่งมีอยู่ในแท็กของ HTML เกือบทุกตัวกำหนดลักษณะพิเศษเฉพาะตัวเลยครับ ซึ่งมีวิธีใช้ดังนี้ครับ
| CODE |
| <h1 STYLE=" font-size:24pt; font-family:Tahoma; text-align :center">Internal Style Sheet By Affreck.</h1> |
ตัวอย่าง Inline Style sheet
ข้างบนนี้เป็นตัวอย่างการใช้ Style Sheet แบบ Inline ครับ
Multiple Style Sheets
ส่วนนี้เป็นส่วนความรู้เพิ่มเติมครับ คือถ้าเกิดเราประกาศ CSS ทั้งในไฟล์เว็บเพจและยังไป import ไฟล์ CSS เข้ามาทับอีก แล้วถ้าเกิดมีส่วนของ selector หรือเพื่อนบางคนอาจจะเรียก element ซ้ำกัน ในส่วนของ element นั้นก้จะทำการ inherited มาจากทั้งสอง element ที่ชื่อซ้ำกันเลยครับ อาจจะยังมองไม่ค่อยออกเท่าไหร่ มาดูตัวอย่างหน่อยดีกว่า....
ด้านล่างนี้คือส่วนของ element แรก ที่ผมสร้างไว้เป็น style sheet ชื่อ style.css ผมจะทำการ import เข้ามาใช้ในเว็บเพจโดยใช้วิธี External Style Sheet นะครับ...
| CODE |
| body {background:black; color:orange } h1 { font-size:15pt; font-family:tahoma } |
ส่วนตัวด้านล่างนี้ ผมได้ประกาศไว้ที่ tag <head> ซึ่งก้หมายถึงวิธี Internal Style Sheet นะครับ
| CODE |
| h1 { font-size:10pt; font-family:arial } |
พอดูแล้วจะเห็นว่า มี element h1 ซ้ำกันใช่มั้ยครับ ซึ่งผลลัพธ์ที่ได้ออกมา จะกลายเป็น style sheet ตัวใหม่ตัวนี้ครับ
| CODE |
| body {background:black; color:orange } h1 { font-size:10pt; font-family:arial } |
ถ้ามองดูแล้ว เราจะรู้ว่ามันจะมองตัว Internal เป็นตัวหลักนะครับ ก้คือ มันจะดึงเอาส่วนออก Internal มาให้หมดก่อน แล้วค่อยดึงในส่วนของ External มาเสริม ส่วนตัวที่ External ซ้ำกันกับ Internal (ก็คือ h1) มันก้จะไม่สนใจในส่วนของ External ที่ซ้ำเลย....
Chapter ต่อไป ...เด๋วจะพูดเรื่อง class ,id ให้ฟังต่อ วันนี้ไปก่อนครับ.. ติดตามตอนต่อไปใน Css3 หรือ Chapter3 นั้นเองครับสำหรับวันนี้ล่ากันไปก่อนเทคโนโลยีล้ำยุคล้ำสมัยติดตามได้อีกบทความต่อไป
|
