วิธีการใส่โค้ด CSS ในเว็บเพจ

| ไอที | CSS | 17256

เรามาดูวิธีการใส่โค้ด CSS(Cascading Style Sheets) ในเว็บเพจกัน

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

- External style sheet
- Internal style sheet
- Inline style


วิธีการใส่โค้ด CSS แบบ External style sheet

การใส่โค้ดแบบ External style sheet เป็นวิธีที่เหมาะกับการใส่โค้ด CSS ที่นำมาใช้หลาย ๆ หน้า ที่บอกว่าเหมาะสำหรับนำมาใช้หลาย ๆ หน้า ก็เพราะว่า เราสามารถเปลี่ยนโค้ดที่ไฟล์ไฟล์เดียว แต่สามารถแสดงผลได้หลาย ๆ หน้า ซึ่งหน้าที่เปลี่ยนจะต้อง ทำการเชื่อมโยงไปยังไฟล์ CSS ด้วย ในวิธีการเชื่อมโยงไปยังไฟล์นั้น สามารถใช้แท็กที่มีชื่อว่า link กำหนดไว้ในส่วนหัวของไฟล์ ในวิธีการใช้แท็ก link ในการเชื่อมโยงไฟล์นั้น มี Syntax ตัวอย่างด้านล่างครับ

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>

mystyle.css ก็คือ ไฟล์ CSS นั่นแหละครับ ซึ่งไฟล์จะมีนามสกุลเป็น .CSS ในไฟล์ CSS จะเขียนเป็นเท็กธรรมดา ซึ่งไม่ต้องมีแท็ก html ในไฟล์ ตัวอย่างการเขียนสคิปในไฟล์ CSS นั้น ดูตัวอย่างด้านล่างครับ

.sx_f4129e{width:11px;height:11px;background-position:-314px -30px}
.sx_e3be3f{width:11px;height:11px;background-position:-326px -30px}
#sx_5eb597{width:11px;height:14px;background-position:-320px -5px}

วิธีการใส่โค้ด CSS แบบ Internal style sheet

วิธีการใส่โค้ด CSS แบบ Internal style sheet เป็นวิธีที่นำมาใช้ในการกำหนด Style แบบไฟล์เดียว นั่นคือ กำหนด Style หน้าที่ใส่สคลิปหน้านั้นหน้าเดียว และการกำหนดนั้น จะกำหนดไว้ในส่วน Head ของหน้าเอกสาร โดยในการกำหนดนั้น จะใช้แท็กที่เรียกว่า Style ดังตัวอย่างด้านล่างครับ


วิธีการใส่โค้ด CSS แบบ Inline style

วิธีการใส่โค้ด CSS แบบ Inline style เป็นวิธีที่นำมาใช้กำหนดลักษณะของแท็ก ที่เหมาะสำหรับกำหนดลักษณะเพียงแท็กเดียว ตัวอย่างการใส่ Style แบบนี้ มีตัวอย่าง ดังด้านล่างครับ

กำหนดลักษณะ div ให้มีกรอบเป็น groove

ถ้าจะใส่หลาย ๆ ลักษณะในแท็กเดียว ก็ให้ใส่แบบนี้

กำหนดลักษณะ div ให้มีกรอบเป็น groove และมีตัวหนังสือเป็นสีแดง
comments




เว็บเพื่อนบ้าน
DoesystemDevcodeMathMySelfHowToClicksBlogJavaExample