บทที่ 1 เบื้องต้นเกี่ยวกับ CSS3 fileCSS...

: How to use CSS with your webpage.

รายวิชาการพัฒนาสารสนเทศบนอินเทอร์เน็ต โดย อ.วิชาญ ทุมทอง

1

บทที่ 1 เบื้องต้นเกี่ยวกับ CSS3

CSS คืออะไร

CSS ย่อมาจาก Cascading Style Sheets เป็นอีกหนึ่งภาษาสไตล์ชีตที่มีรูปแบบการเขียน Syntax ที่เฉพาะ เหมือนกันกับ HTML และ XHTML ซึ่งเป็นภาษาที่ใช้สําหรับการจัดรูปแบบและตกแต่งเอกสาร HTML หรือ XHTML ไม่ว่าจะเป็นหน้าตา สีสัน ตัวอักษร เส้นขอบ พ้ืนหลัง ระยะห่าง เพื่อให้เว็บเพจมีความยืดหยุ่น มีความน่าสนใจ รวมไปถึงการควบคุมลักษณะของข้อมูลในการนําเสนอ ซึ่งผู้นาเว็บสามารถที่จะทําการแก้ไข ได้โดยง่าย และสะดวกรวดเร็ว ซึ่ง CSS นี้จะถูกกําหนดมาตรฐานโดย W3C (World Wide Web Consortium) ในการกําหนดค่าต่างๆ ให้กับเอกสาร HTML หรือ XHTML นั้น เราสามารถดึงเอา Element ของ HTML เช่น <body>, <p>, <h1> มากําหนดคุณสมบัติต่างๆ ได้ตามท่ีเราต้องการ ซึ่งทําให้เว็บไซต์ของเรามีความเป็นมาตรฐานมากยิ่งขึ้น และลดจํานวนขนาดของซอร์จโค๊ด ที่เขียนขึ้น ยกตัวอย่างเช่น การตกแต่งเว็บเพจโดยใช้ HTML

การตกแต่งเว็บเพจโดยใช้ CSS ตัวอย่างการแสดงผลเอกสาร HTML

<html> <head><title>CSS</title></head> <body background=”back_head.png”> <h2><font color="red" face="Arial">CSS คืออะไร</font></h2> <p><font color=" green" face="Arial"><b>CSS ยอมาจาก Cascading Style Sheets </b></font></p> <h2><font color=" green" face="Arial">ประโยชนของ CSS</font></h2> <p><font color="green" face="Arial"><b>CSS ใชสําหรับการตกแตงขอความในเอกสาร HTML</b></font></p> </body> </html>

<html> <head><title>CSS</title> <style type="text/css"> body { background: url("back_head.png"); } h2 {color:red; font-family:Arial; } p {color: green; font-family:Arial; font-weight:bold } </style> </head> <body> <h2>CSS คืออะไร</h2> <p>CSS ยอมาจาก Cascading Style Sheets</p> <h2>ประโยชนของ CSS</h2> <p>CSS ใชสําหรับการตกแตงขอความในเอกสาร HTML</p> </body> </html>



2

จากการแสดงผลจะเห็นได้ว่ามีลักษณะที่เหมือนกัน แต่การตกแต่งเว็บเพจ โดยใช้ CSS นั้น ทําให้ซอร์จโค๊ดที่เขียนมีความเป็นระเบียบมากขึ้น ซึ่งจะทําให้ซอร์จโค๊ดอ่านง่าย และสามารถที่จะทําการแก้ไขได้อย่างรวดเร็ว เช่น ต้องการแก้ไข สีของหัวเรื่องของข้อความ h1 ให้มีสีเป็นสีเขียว จะเห็นได้ว่า CSS สามารถที่จะแก้ไขแค่ที่เดียว และแก้ไขได้อย่างรวดเร็ว ต่างจากการตกแต่งหน้าเว็บเพจโดยใช้ HTML ที่ต้องแก้ไขหลายๆ ที่ ลองคิดดูว่า ถ้ามีการจัดหัวเรื่องของข้อความ h1 ในเว็บเพจสัก 10 หัวเรื่อง การแก้ไขจาก HTML จะยากกว่า CSS แค่ไหน

ประโยชน์ของ CSS ในการใช้งาน CSS ซึ่งไม่ใช่เพียงแต่นํามาใช้กับการตกแต่งเอกสาร HTML หรือเว็บเพจ เท่านั้น แต่ CSS ยังสามารถที่จะใช้ในการตกแต่งข้อมูลที่ได้มาจาก XML ได้อีกด้วย สําหรับประโยชน์ของ CSS นั้นมีอยู่มากมาย ขึ้นอยู่กับว่าเราต้องการที่จะนําเอาไปประยุกต์ใช้ในด้านใหน ในที่นี้ขอกล่าวถึงประโยชน์ของ CSS ในการนําเอามาใช้ในการพัฒนาเว็บเพจ ในปัจจุบัน ซึ่งประโยชน์ของ CSS มีดังนี้

1. ในการใช้ CSS จัดรูปแบบการแสดงผล จะช่วยให้เว็บเพจของเราลดการใช้ภาษา HTML ทําให้ซอร์จโค๊ดภายในเอกสาร HTML ลดน้อยลง ซึ่งจะเหลือเพียงส่วนที่เป็นเนื้อหา ทําให้เข้าใจง่ายย่ิงขึ้น และสามารถทําการแก้ไขเอกสารทําได้ง่ายและรวดเร็ว

2. เนื่องจากซอร์จโค๊ดมีจํานวนที่ลดลง ทําให้ขนาดของไฟล์ที่เขียนขึ้นมีขนาดเล็กลงด้วย ซึ่งจะทําให้การโหลดหน้าเว็บไซต์มีความเร็วเพิ่มขึ้น

3. การเขียน CSS ไว้ชุดคําสั่งเดียว มีผลต่อเอกสาร HTML ทั้งหน้า ซึ่งสามารถที่จะกําหนดรูปแบบในการแสดงผลได้ทั้งหน้าเดียวหรือหลายหน้าก็ได้ ทําให้ง่ายต่อการปรับปรุงแก้ไข และไม่ต้องตามหาที่แก้ไขทั้งหน้าเอกสารนั่นเอง

4. การนํา CSS มาสร้างเลเอาท์ในเว็บเพจ จะมีผลให้เว็บเพจของเราโหลดได้เร็วมากยิ่งขึ้น และซอร์จโค๊ดมีความเป็นระเบียบมากย่ิงขึ้น

5. CSS ทําให้เราสามารถที่จะเปลี่ยนแปลงการแสดงผลในหน้าเว็บเพจได้อย่างง่ายดาย โดยที่เราไม่ต้องไปยุ่งเกี่ยวกับข้อมูลในเอกสาร HTML

6. Web Browser หลายตัวที่รองรับการแสดงผลของ CSS ซึ่งทําให้เราสามารถควบคุมการแสดงผลให้เหมือนกัน หรือใกล้เคียงกัน

7. CSS สามารถกําหนดการแสดงผลในรูปแบบที่เหมาะกับสื่อหลากหลายชนิด เช่น PDA, โทรศัพท์มือถือ, สื่อสิ่งพิมพ์ หรือทางหน้าจอ เป็นต้น

8. ในการนําเอา CSS มาใช้งานนั้น ทําให้เว็บไซต์ของเรามีมาตรฐาน เนื่องจาก W3C แนะนําให้ใช้ CSS แทนการตกแต่งเว็บเพจโดยใช้ HTML

มีอะไรใหม่ใน CSS3 หลังจาก CSS3 ได้เปิดตัวแล้ว แต่ก็ยังไม่เป็นที่นิยมเท่าที่ควรเนี่องจากคนส่วนมากอาจจะนึกว่าเป็นเรื่องยากที่จะเปลี่ยนแปลงเว็บไซต์ หรือเริ่มต้นเรียนรู้เกี่ยวกับ CSS3 โดยหลักการจริงๆ จะไม่แตกต่างจาก CSS เวอร์ช่ันเดิมมากนั้ก โดยจะเพิ่มเติมคุณสมบัติ หรือฟังก์ช่ันใหม่ๆ เข้ามาเท่านั้นเอง ซึ่งฟังก์ช่ันใหม่ๆ ที่มีเพิ่มเข้ามาใน CSS 3 นี้ คือ



3

1. RGBA CSS3 ได้เพิ่มเติมการกําหนดค่าสีขึ้นมาซึ่ง RGBA เป็นหมวดสีที่ใช้กับงานกราฟิก ซึ่ง A ที่เพิ่มเข้ามาจะหมายถึง Alpha ซึ่งนั่นก็คือการทําให้สีมีความโปร่งใสนั่นเอง (Transparency) โดยการกําหนดค่า

จะอยู่ในช่วงที่ 0 ไปจนถึง 1 ซึ่งหากกําหนดค่าเป็น 0 จะหมายถึงโปร่งใสจนมองไม่เห็นอะไรเลย แต่หากกําหนดค่าเป็น 1 เป็นการแสดงค่าสีที่สามารถเห็นได้ตามปกติ ไม่มีความโปร่งใสนั่นเอง 2. Text Shadow เ ป็นการใส่ เงาให้ กับตัวอักษร ซึ่ ง ในการกําหนดค่านี้จะเป็นการกําหนดเงาในรูปแบบที่เป็นแนวแกน X และแกน Y ให้กับตัวข้อความที่เราต้องการกําหนดค่า

3. Box Shadow จะมีรูปแบบที่เหมือนกับ Text Shadow ซึ่งเป็นรูปแบบการกําหนดค่าเงาให้กับ Box ในรูปแบบแนวแกน X และแกน Y ให้กับ Box ที่เราต้องการกําหนดค่า

4. Round corners CSS3 มีการเพิ่มฟังก์ช่ัน Round Corner ซึ่งเป็นการทําขอบกล่องให้โค้งมน โดยทั่วไปจะนิยมนําเอามาทํา Box ของข้อความ ซึ่งเป็นการทํามุมของ Box ให้โค้ง

นอกจากนี้ยังใช้ในการทําลิงค์ให้น่าสนใจ เราสามารถระบุค่ามุมที่เป็นค่าของรัศมีของความโค้ง ลงใน border-radius ซึ่งหากค่าที่ระบุย่ิงมากโค้งที่อยู่ตรงมุมก็จะยิ่งโค้งมาก 5. Opacity 6. Multi Column Layout 7. Layout 8. Multiple backgrounds 9. Border images 10. Transitions 11. New selectors: 12. Media Queries



4

ไวยากรณ์ของ CSS ไวยากรณ์ของ CSS นั้น มีโครงสร้างหลักของภาษาอยู่ 4 ส่วนด้วยกัน ซึ่งทั้งหมดมีความสําคัญต่อการกําหนดค่าและการใช้งาน CSS ซึ่งรูปแบบการกําหนดค่าจะประกอบไปด้วย property ตามด้วยเครื่องหมายโคลอน (:) เพื่อกําหนดค่าลงไปซึ่งอาจจะเป็นตัวเลข คีย์เวิร์ด หรือ URL และสุดท้ายของการกําหนดค่าคือ เซมิ-โคลอน (;) ที่ใช้ในการระบุว่าสิ้นสุดการกําหนดค่าให้กับ property ดังตัวอย่าง ส่วนประกอบของโครงสร้างของ CSS มีดังนี้ 1. Selector สามารถเป็น HTML Tag ต่างๆ ก็ได้เช่น <body>, <p> หรือเป็น Class name หรือ ID ที่เราตั้งชื่อให้ก็ได้ ซึ่งจะเรียนรู้ในหัวข้อถัดไป 2. เครื่องหมายปีกกาที่ครอบ Properties กับ Value ที่ต้องการกําหนดค่า 3. ช่ือของ Properties เป็นคุณสมบัติในการจัดรูปแบบการแสดงผล เช่น color สําหรับกําหนดสี, font-size สําหรับกําหนดขนาดตัวอักษร 4. ค่า Value ที่ต้องการจะกําหนดให้กับแต่ละ Properties เช่น color: black, font-size:12px ตัวอย่างซอร์จโค๊ด CSS

จากซอร์จโค๊ดข้างต้นนี้ เราสามารถพิจารณา ตามรูปแบบโครงสร้างของ CSS ได้ ดังนี้คือ Selector ของ CSS คือ h1, Properties ของ CSS คือ color และ background, Value ของ CSS คือ red และ yellow

จะสังเกตุเห็นได้ว่าจะมีเครื่องหมาย Colon (:) ที่เป็นตัวคั่นระหว่างชื่อ Properties กับ Value ที่เป็นการกําหนดค่าให้กับ Properties นันๆ ซึ่งเมื่อสิ้นสุดแล้ว แต่ละ Properties จะจบด้วยเครื่องหมาย semi-colon (;) เสมอ ซึ่งเป็นข้อบังคับของการเขียน CSS นั่นเอง

Selector { Properties: Value; }

Selector { Properties: Value; Properties: Value; Properties: Value; }



5

Selector และชนิดของ Selector Selector คือตัวบ่งชี้ที่ใช้เป็นตัวเลือกว่าจะนําเอาค่าของ CSS ที่เราได้กําหนดค่าต่างๆ เอาไว้นั้น ไปใช้งานกับ Elements หรือ tag ใดได้บ้าง ในเอกสารเว็บเพจที่สร้างขึ้น โดยมีการเขียน Selector ไว้และมีการกําหนด Value ให้กับ Properties ใน Selector นั้นๆ เราควรจดจําและนําไปใช้งานให้ถูกต้อง ซึ่ง Selector เป็นส่วนที่มีความสําคัญเป็นอย่างมากในการเขียน CSS ซึ่งเราควรทําความเข้าใจ เนื่องจากต้องนําเอาไปใช้งานในการกําหนดค่าต่างๆ เพื่อให้เอกสาร HTML สามารถที่จะนําเอาไปใช้งานได้อย่างถูกต้อง โดยทั่วไปแล้ว Selector ใน CSS จะมีรูปแบบการใช้งาน ดังนี้ 1. Universal Selector เป็นการกําหนดคุณสมบัติให้ทุกๆ element หรือแสดงผลทั้งเว็บเพจนั่นเอง ซึ่งจะดึงเอาคุณสมบัติที่ผู้พัฒนากําหนดค่าเอาไว้ ซึ่งจะมีประโยชน์ตรงที่เราไม่จําเป็นต้องกําหนดค่าไว้ในทุก element หากต้องการให้แสดงผลคุณสมบัติเดียวกันทั้งเว็บเพจก็สามารถที่จะกําหนดค่าเป็นแบบ Univeral ได้ ซึ่งรูปแบบการกําหนดค่า จะใช้เครื่องหมาย ดอกจันทร์ (*) ในการระบุ ดังนี้ ตัวอย่างโค้ด

* {font:10px Arial;} ตัวอย่างซอร์จโค๊ด

ตัวอย่างการแสดงผล

จากตัวอย่างซอร์จโค๊ด จะเห็นว่าหากเรากําหนดค่าโดยใช้ Universal Selector เป็นการกําหนดให้ทั้งเว็บเพจมีฟอนท์รูปแบบ Arial ขนาด 14px ซึ่งจะส่งผลให้ทุกๆ element ที่ไม่ได้กําหนดค่า font ในเว็บเพจ แสดงผลตามที่เรากําหนดค่าเอาไว้

2. Type Selector หรือ Element Selector เป็นการกําหนดคุณสมบัติการแสดงผลให้กับ tag ของ HTML หรือ XHTML ที่ต้องการ ซึ่งรูปแบบการเขียนแบบ Element Selector นี้ จะเป็นการเขียนโดยอ้างอิงตามช่ือ tag ต่าง ๆ ที่

<html> <head><title>CSS</title> <style type="text/css"> * {font: 14px Arial ; } </style> </head> <body> <h2>CSS คืออะไร</h2> <p>CSS ยอมาจาก Cascading Style Sheets</p> <div>CSS ยอมาจาก Cascading Style Sheets</div> </body> </html>

¡ÒÃ¡íÒË¹´ Universal Selector



6

ต้องการที่จะกําหนดคุณสมบัติให้เช่น h2 {…}, body {…} ซึ่งผลที่ได้จากการกําหนดค่าแบบนี้ จะทําให้ tag ทั้งหมดที่ประกาศไว้ใน CSS ของเว็บเพจนั้นๆ มีคุณสมบัติตามท่ีเรากําหนดค่าไว้ทันที ตัวอย่างการใช้งาน

h2 { color: red; } ตัวอย่างซอร์จโค๊ด

3. Group Selector กรณีที่ selector มีค่า properties เหมือนกันก็คือมีการกําหนดคุณสมบัติเดียวกันหากซึ่งจะ

ทําให้เราไม่จําเป็นต้องกําหนดค่าในทุก ๆ selector แต่เราสามารถเขียนรวมกันได้ โดยใช้เครื่องหมาย Comma "," คั่นระหว่างSelector ที่ต้องการที่จํากรุ๊ปรวม

ตัวอย่างการใช้งาน การเขียนโค๊ดแบบปกติ

การเขียนโค๊ดแบบ Group Selector

จากตัวอย่างจะเห็นว่าเป็นการกําหนดให้ข้อความใน Tag <h1>, <h2> และ <h3> มี

รูปแบบฟอนท์เป็น Arial และการแสดงผลเป็นสีแดง หากเรากําหนดค่าแบบปกติจะทําให้การเขียนโค๊ดมีขนาดที่ยาว การใช้งาน Group Selector จะเห็นว่าคุณสมบัติที่แสดงผลเหมือนกัน สามารถที่จะรวมกันได้ ทําให้ซอร์จโค๊ดสั้นและง่ายมากย่ิงขึ้น

4. Class Selector เป็นการประกาศคําสั่ง CSS เพื่อกําหนดคุณสมบัติแบบเฉพาะเจาะจง ให้กับ HTML

element หรือ tag ผ่าน class attribute โดยเราสามารถตั้งชื่อ class ได้เอง class selector ใช้เมื่อ

<style type="text/css"> h2 { color: red; } P { color: yellow; } </style>

h1 { font: Arial; color: red; } h2 { font: Arial; color: red; } h3 { font: Arial; color: red; }

µaÇoÂ�Ò§¡ÒÃæÊ´§¼Å

¡ÒÃ¡íÒË¹´ Element Selector

h1, h2, h3 { font: Arial; color: red; }



7

ต้องการใช้แสดงผลรูปแบบนั้นซ้ําหลายๆ ครั้ง ซึ่งเราสามารถเรียกใช้ Class กับ element หลายๆ อันในหน้าเพจเดียวกันได้ โดยให้เราทําการสร้างชื่อ class ขึ้นมา ใน Class Selector นี้ ช่ือ Class ที่สร้างขึ้นมานี้จะนําหน้าด้วยเครื่องหมาย Dot ( . ) เช่น .fontShow {…} เป็นต้น ซึ่งเมื่อสร้าง Class ขึ้นมาแล้ว จะไม่มีผลต่อการแสดงผลบนหน้าเว็บเพจ ถ้าหากต้องการให้แสดงผลกับข้อมูลใด เราจะต้องเรียกใช้งาน โดยการเรียกผ่าน Attribute Class ซึ่งเราสามารถระบุไปพร้อมกับ tag ที่ใช้ในการกํากับข้อมูลนั้น เช่น ตัวอย่างซอร์จโค๊ด


จากตัวอย่างสังเกตได้ว่า class fontShow ถูกเรียกใช้หลายใน tag <p> และ ถูกใช้ในหลาย element ได้ คือ <p> และ <div> แต่ถ้าต้องการกําหนดให้ class topic ใช้งานเฉพาะกับ <p> เท่านั้น ทําได้โดยใส่ "p." นําหน้าช่ือ class จะมีผลทําให้ข้อความใน <div class="topic">บทความ</div> ไม่สามารถแสดงผลตามรูปแบบที่กําหนดใน class topic ได้

5. ID Selector

ID Selector เป็นการประกาศคําสั่ง Style Sheet เพื่อกําหนดคุณสมบัติแบบเฉพาะเจาะจง ให้กับ HTML Element ผ่าน Attribute ID จะคล้ายๆ กันกับ Class ซึ่งเราสามารถสร้าง Attribute ID ขึ้นมาเองได้ เว็บเพจสามารถแสดงผลได้จากการอ้างตามช่ือ ID ที่สร้างขึ้น โดยต้องอ้างให้ช่ือตรงกันกับที่ประกาศไว้ ซึ่ง Attribute ID ที่สร้างขึ้นนั้นจะต้องกําหนดค่า CSS ต่างๆ ที่ต้องการที่จะให้แสดงผล รูปแบบการเขียนจะต้องมีเครื่องหมายชาร์ป (#) นําหน้าช่ือ ID เช่น #showbody {…} เป็นต้น ซึ่ง ID ใดบนเว็บเพจตรงกับที่ประกาศไว้ หน้าเว็บก็จะนําเอาค่าคุณสมบัติของ CSS นั้นไปใช้งาน

<html> <head><title>CSS</title> <style type="text/css"> .fontShow { color: red; font-size: 14px; } </style> </head> <body> <h2>CSS คืออะไร</h2> <p class="fontShow">CSS ยอมาจาก Cascading Style Sheets</p> <div class="fontShow">CSS ยอมาจาก Cascading Style Sheets</div> </body> </html>

การนําเอา Class ไปใชงาน

การสราง Class fontShow



8

ตัวอย่างซอร์จโค๊ด


ข้อควรระวังในการกําหนดชื่อ Class และ ID ใน CSS ในการกําหนดชื่อให้กับ Class และ ID นั้น จะต้องกําหนดชื่อให้ถูกต้องตามข้อกําหนดของการเขียน CSS ซึ่งหากกําหนดค่าไม่ถูกต้องแล้ว อาจจะทําให้รูปแบบที่กําหนดและนําเอาไปใช้งานนั้น ไม่สามารถแสดงผลผ่านทางหน้าเว็บเพจได้ ซึ่งในการตั้งชื่อให้กับ Class และ ID มีข้อกําหนดดังนี้ 1. Selector ตัวพิมพ์เล็ก และตัวพิมพ์ใหญ่ ถือว่าเป็นคนละชื่อกัน เช่น #MyWeb กับ #myweb 2. ในการกําหนดชื่อห้ามใช้ตัวเลขนําหน้าช่ือของ Class และ ID เช่น #2myweb ถือว่าผิดเพราะชื่อ ID ขึ้นต้นด้วยตัวเลข 3. ห้ามเว้นวรรคภายในชื่อของ Class และ ID 4. ห้ามใช้อักขระพิเศษใดๆ กับช่ือของ Class และ ID ยกเว้นเครื่องหมาย Dash (-) และ Underline (_) 5. ช่ือของ Class Selector และ ID Selector ไม่ควรเป็นภาษาไทย

เทคนิควิธีการเลือกใช้ Selector ในการใช้งาน Selector ที่กล่าวมาข้างต้นหลายคนอาจสงสัยว่าจะนําเอา Selector ต่าง ๆ นี้ไปใช้งานได้อย่างไรบ้าง และต้องใช้งานเมื่อไร ซึ่งในการใช้งาน Selector พิจารณาดังนี้ 1. หากมีการใช้งานคุณสมบัติของ CSS ในหน้าเว็บเพจ มากกว่าหนึ่งครั้ง ให้เราเลือกใช้ Class Selector 2. หากมีการใช้งานคุณสมบัติของ CSS ที่เรากําหนดขึ้นในหน้าเว็บเพจแค่ครั้งเดียว ให้เราเลือกใช้ แบบ ID Selector สําหรับใช้เป็นเอกลักษณ์ในหนา้เว็บเพจเท่านั้น 3. หากต้องการเปลี่ยนคุณสมบัติของ tag ต่างๆ ของ HTML/XHTML ทั้งหน้าเว็บนั้นๆ ให้เราเลือกใช้งานเป็นแบบ Element Selector เช่น <h2>, <body> ซึง่ทุกๆ tag ในหน้าเว็บ จะแสดงตามท่ีเรากําหนดค่าเข้าไปใน CSS ของตัว tag

<html> <head><title>CSS</title> <style type="text/css"> #showbody { color: red; font-size: 14px; } </style> </head> <body> <h2>CSS คืออะไร</h2> <div id="showbody">CSS ยอมาจาก Cascading Style Sheets</div> </body> </html>

การนําเอา ID ไปใชงาน

การสราง ID showbody



9

การนําเอา CSS ไปใช้งานกับ เว็บเพจ เราสามารถนําเอา CSS เข้ามาใช้ในการตกแต่งเว็บเพจของเรา โดยการเขียน CSS ร่วมกับเอกสาร HTML ของเรานั่นเอง ซึ่งวิธีการนําเอา CSS มาใช้งานก็มีอยู่ด้วยกัน 3 รูปแบบ ดังต่อไปนี้ 1. Inline Style

วิธีการนําเอา CSS มาใช้แบบนี้ควรใช้ในกรณีที่ต้องการกําหนด style ให้กับ element ของ HTML เพียง tag เดียวเป็นการเฉพาะ โดยการแทรกคําสั่ง style sheet ใน HTML Tag อยู่ในคําสั่ง style="" ดังนี้ ตัวอย่างซอร์จโค๊ด ตัวอย่างการแสดงผล

ซึ่งโดยทั่วไปแล้วเราควรหลีกเลี่ยงการเขียน style="" ฝังลงใน HTML Tag เพราะการเขียนแบบนี้จะทําให้อ่านยาก และนําไปใช้ต่อไม่ได้ และเป็นการยากที่จะแก้ไข แต่ไว้ใช้ในกรณีที่เราเจาะจงที่จะเปลี่ยนแปลง รูปแบบการแสดงผลเฉพาะ tag 2. Internal Style ในการใช้งาน CSS วิธีการนี้ควรใช้ในกรณีที่มีเพียง HTML ไฟล์เดียวที่ใช้ style นี้ เมื่อประกาศคําสั่ง Style Sheet เพื่อกําหนดคุณสมบัติ ให้กับ HTML Tag ใดๆ แล้ว จะมีผลกับเอกสาร HTML ทั้งหน้า โดยทั่วไปแล้วจะนิยมใส่ส่วนของคําสั่ง Style Sheet ไว้ระหว่าง <head>...</head>

ซึ่งจะทําการเขียน CSS เข้าไปในไฟล์โดยตรงที่ไฟล์ หรือเอกสาร HTML โดยการเขียนไว้ระหว่าง tag <style type="text/css">….</style>

คําสั่งที่ใช้เริ่มต้น และจบ Style Sheet แบบ Internal Style มีโครงสร้างดังนี้

<html> <head><title>CSS</title> </head> <body> <h2>CSS คืออะไร</h2> <div style="color: red; font-size:18;">CSS ยอมาจาก Cascading Style Sheets</div> </body> </html> การใช CSS แบบ Inline Style

<style type="text/css"> selector { properties: value; properties: value; } </style>



10

ตัวอย่างซอร์จโค๊ด


สําหรับ Web Browser รุ่นเก่าที่ไม่สนับสนุนคําสั่ง Style Sheet หรือ Disable Style Sheet ไว้นั้น ให้ใส่ Comment ของ ภาษา HTML ไว้ด้วย เพื่อให้เว็บเบราเซอร์นั้นทราบว่าไม่ใช่คําสั่งภาษา HTML 3. External Style เป็นการเขียน CSS โดยการแยกไฟล์ออกจาก เอกสาร HTML ซึ่งจะเก็บเป็นไฟล์ไว้เฉพาะอยู่ด้านนอก เมื่อเว็บเพจต้องการนําเอาคุมบัติที่กําหนดไว้มาใช้งาน จะมีการประกาศเรียกใช้งานไปยังไฟล์ CSS ที่สร้างขึ้น และแยกเก็บไว้นั้น โดยวิธีนี้เอกสาร HTML หลายเอกสาร สามารถที่จะเรียกไฟล์ CSS ไฟล์เดียวกันได้

CSS แบบ External ไฟล์อ่ืนสามารถเรียกเอาไปใช้งานได้

โดยทั่วไปแล้วจะทําการผนวกไฟล์ของ CSS นี้ลงไปในเอกสาร HTML ที่ต้องการใช้งาน Style

Sheet ชุดนี้ ไว้ในส่วน <head>...</head> ซึ่งการเรียกใช้ CSS วิธีนี้สามารถทําได้ 2 รูปแบบด้วยกัน คือ

<html> <head><title>CSS</title> <style type="text/css"> h2 { color: red; } P { color: yellow; } </style> </head> <body> <h2>CSS คืออะไร</h2> <p>CSS ยอมาจาก Cascading Style Sheets</p> <div>CSS ยอมาจาก Cascading Style Sheets</div> </body> </html>

การเรียกใช CSS แบบ Internal Style



11

3.1 แบบ linking เป็นการเรียกใช้งาน CSS เมื่อเพจใดต้องการใช้งานหรือต้องการคุณสมบัติจาก CSS ที่กําหนดในไฟล์ ก็จะทําการเรียกใช้โดยใช้คําสั่ง <link rel="stylesheet" type="text/css" href="ช่ือไฟล์.css"> ตัวอย่างเช่น ตัวอย่างซอร์จโค๊ดไฟล์ mystyle.css ตัวอย่างซอร์จโค๊ดไฟล์ page_01.html 3.2 แบบ import เป็นการเรียกใช้งานไฟล์ CSS จากภายนอกโดยใช้ tag <style>…</style> ซึ่งเป็นการนําเอาไฟล์ CSS มาใช้งานโดยใช้ @import ซึ่งการนําเอา CSS มาใช้งานวิธีนี้เรายังสามารถเพิ่มหรือสร้าง CSS ใหม่เข้าไปเพิ่มเติมได้เลยทันที ตัวอย่างเช่น ตัวอย่างซอร์จโค๊ดไฟล์ mystyle.css

การ Comment ในเอกสาร CSS ใน Style Sheet เราสามารถที่จะ Comment ได้โดยการใช้เครื่องหมาย "/*" เป็นการเปิด

และ "*/" เป็นการปิด ซึ่งเป็นการใส่ข้อความเพื่อบรรยาย เกี่ยวกับซอร์จโค๊ดที่เขียนขึ้น หรือเกี่ยวกับหน้าเอกสารที่ทําอยู่ ทําให้เราสามารถที่จะกลับมาทําการแก้ไข หรือเพิ่มเติมได้ถูกที่ และหาได้ไม่ยาก พูดง่ายๆ คือ ป้องกันการลืมนั่นเอง ซึ่งการ Comment นอกจากจะมีประโยชน์เฉพาะผู้เขียนแล้ว ยัง

h2 { color: red; } P { color: yellow; }

<html> <head><title>CSS</title> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head> <body> <h2>CSS คืออะไร</h2> <p>CSS ยอมาจาก Cascading Style Sheets</p> <div>CSS ยอมาจาก Cascading Style Sheets</div> </body> </html>

การเรียกใช CSS แบบ linking

h2 { color: red; } P { color: yellow; }

<html> <head><title>CSS</title> <style type=”text/css”>

@import url(“mystyle.css”); </style> </head> <body> <h2>CSS คืออะไร</h2> <p>CSS ยอมาจาก Cascading Style Sheets</p> <div>CSS ยอมาจาก Cascading Style Sheets</div> </body> </html>

การเรียกใช CSS แบบ import



12

มีประโยชน์สําหรับบุคคลอ่ืนที่ต้องการจะแก้ไข ด้วยซึ่งอาจจะเป็นการบอกข้อมูลผู้เขียน CSS การระบุตําแหน่ง หรือ เทคนิค ในการใช้งานเอกสาร CSS ที่สร้างขี้น เป็นต้น ซึ่งข้อความที่อยู่ใน Comment จะไม่มีผลต่อการแสดงผลในหน้าเอกสารที่เรียกไปใช้งาน

ตัวอย่าง การใส่ข้อความ Comment ในเอกสาร CSS

/* นี่คือ comment กําหนดสีตัวอักษรเปนสีดํา ขนาด14px */ body { color:#000000; font-size:14px }

/* เอกสาร CSS สรางโดย วิชาญ ทุมทอง แกไขไดตามสะดวกไดเลยครับ */ h1 { color:#000000; font-size:14px }

บทที่ 1 เบื้องต้นเกี่ยวกับ CSS3 fileCSS...

Documents

Transcript of บทที่ 1 เบื้องต้นเกี่ยวกับ CSS3 fileCSS...