Show CSS ย่อมาจาก Cascading Style Sheets ใช้สำหรับกำหนดว่าอีลิเมนต์ของ HTML แต่ละอีลิเมนต์ จะแสดงผลอย่างไรบนหน้าจอหรือสื่ออื่น ๆ อีกทั้งยังช่วยย่นระยะเวลาในการตกแต่งอีลิเมนต์ต่าง ๆ ได้อย่างมาก เพราะเราสามมรถใช้ CSS ตกแต่งอีลิเมนต์ในหลาย ๆ เว็บเพจได้จากที่เดียว หรือการเขียนโค้ดเพียงครั้งเดียว เราสามารถใช้งาน CSS ใน HTML ได้ 3 ทาง ดังนี้
โดยวิธีที่นิยมที่สุดคือวิธีที่ 3 คือแบบ External เขียน CSS ไว้ในไฟล์อื่นแยกต่างหาก แล้วค่อยนำเข้ามาใช้ในหน้าเว็บเพจแต่ละหน้า จะทำให้เกิดความสะดวกสบาย เพราะเราสามารถเขียนโค้ด CSS เพียงครั้งเดียว แต่สามารถนำไปใช้งานได้หลายที่ Inline CSSInline CSS ใช้สำหรับกำหนดสไตล์ให้กับอีลิเมนต์แต่ละตัว โดยไม่มีผลกับอีลิเมนต์ตัวอื่น ๆ เช่น <h2 style="color:red;">This is a Red Heading</h2> Internal CSSInternal CSS ใช้สำหรับเขียน CSS เพื่อใช้งานในหน้าเว็บเพจหนึ่ง ๆ โดยจะเขียนไว้ในส่วน <head></head> ของหน้าเว็บเพจนั้น ๆ โดยโค้ด CSS จะต้องอยู่ภายในแท็ก <style></style> อีกที เช่น <!DOCTYPE html> <html> <head> <style> body {background-color: powderblue;} h2 {color: blue;} p {color: red;} </style> </head> <body> <h2>นี่คือส่วนหัว</h2> <p>นี่คือพารากราฟ</p> </body> </html> บรรทัดที่ 4-8 เป็นการเขียน CSS ไว้ในเว็บเพจ CSS ที่เขียนไว้ในหน้าเว็บเพจลักษณะนี้ จะมีผลต่ออีลิเมนต์ในหน้าเว็บเพจนั้นเท่านั้น External CSSExternal CSS คือการสร้างไฟล์ CSS ไว้นอกเว็บเพจ แล้วค่อยเรียกใช้ไฟล์ CSS ที่เขียนไว้นั้นในเว็บเพจอีกที่ ข้อดีคือ สามารถเรียกใช้ไฟล์ดังกล่าวได้จากทุกเว็บเพจในเว็บไซต์ ทำให้ประหยัดเวลาในการพัฒนาและการแก้ไข โดยการใช้งาน External CSS นั้น เราต้องเพิ่มแท็ก <link> เข้าไปยังส่วน <head></head> ของเว็บเพจ แล้วอ้างอิงไปยังไฟล์ CSS ที่ต้องการใช้งาน ดังตัวอย่าง <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="styles.css"> </head> <body> <h2>This is a heading</h2> <p>This is a paragraph.</p> </body> </html> บรรทัดที่ 4 เป็นการอ้างอิงไฟล์ CSS จากภายนอก ไฟล์ CSS ที่สร้างขึ้น สามารถเขียนด้วยโค้ด CSS ได้เลย โดยไม่ต้องมีโค้ด HTML ใด ๆ ทั้งสิ้น และต้องบันทึกเป็นรูปแบบไฟล์ CSS คือไฟล์จะมีนามสกุลเป็น .css ซึ่งลักษณะของโค้ด CSS จะเป็นดังนี้ body { background-color: powderblue; } h2 { color: blue; } p { color: red; } CSS Fontsเมื่อต้องการกำหนดรูปแบบอักษร Fonts ให้กับอีลิเมนต์ใด ๆ เราสามารถใช้พร็อพเพอร์ตี้ ดังนี้
ตัวอย่างการใช้ CSS กำหนดฟอนต์ <!DOCTYPE html> <html> <head> <style> h2 { color: blue; font-family: verdana; font-size: 300%; } p { color: red; font-family: courier; font-size: 160%; } </style> </head> <body> <h2>นี่คือส่วนหัวเรื่อง</h2> <p>นี่คือส่วนย่อหน้าหรือพารากราฟ</p> </body> </html> CSS Borderเราสามารถกำหนดลักษณะของเส้นขอบให้อีลิเมนต์ได้ โดยใช้พร็อพเพอร์ตี้ border ดังนี้ p { border: 1px solid powderblue; } CSS Paddingพร็อพเพอร์ตี้ padding ใช้สำหรับกำหนดระยะห่างระหว่างตัวอักษรกับเส้นขอบด้านใน โดยต้องกำหนดเป็นพิกเซล โดยมีการใช้งานดังนี้ p { border: 1px solid powderblue; padding: 30px; } CSS Marginพร็อพเพอร์ตี้ margin ใช้สำหรับกำหนดระยะห่างระหว่างขอบอีลิเมนต์ด้านนอกกับขอบของอีลิเมนต์อื่น ๆ ดังนี้ p { border: 1px solid powderblue; margin: 50px; } แอททริบิวต์ idแอททริบิวต์ id ใช้สำหรับระบุรหัสที่เฉพาะเจาะจงสำหรับอีลิเมนต์หนึ่ง ๆ ใน HTML เหมือนเลขประจำตัวประชาชน เช่น <p id="paragraph2">I am different</p> จากโค้ด เราได้ระบุ id ให้กับแท็ก p เป็น paragraph2 เมื่อใดก็ตามที่มีการอ้างอิงถึงไอดี paragraph2 ย่อมจะหมายถึงอีลิเมนต์นี้เพียงตัวเดียวเท่านั้น เมื่อต้องการระบุ CSS ให้กับอีลิเมนต์ที่มีการตั้งค่า id ไว้ สามารถทำได้โดยใช้เครื่องหมาย # ตามด้วย id ของอีลิเมนต์นั้น ๆ เช่น #paragraph2 ดังนี้ #paragraph2 { color: blue; } จากโค้ดด้านบน จะมีผลกับอีลิเมนต์ที่มี id เป็น paragraph2 เท่านั้น จะไม่มีผลกับอีลิเมนต์อื่น แอททริบิวต์ classใน HTML เราสามารถระบุแอททริบิวต์ class ให้กับอีลิเมนต์ใด ๆ ก็ได้ เพื่อความสะดวกในการตกแต่งด้วย CSS ในภายหลัง และชื่อ class เดียวกัน สามารถกำหนดให้กับอีลิเมนต์มากกว่าหนึ่ง ดังนี้ <p class="redtext">I am HTML</p> <p class="redtext">I am HTML</p> <p class="redtext">I am HTML</p> เมื่อต้องการกำหนด CSS ให้กับอีลิเมนต์ที่มีการระบุคลาดไว้ สามารถทำได้โดยการใช้เครื่องหมาย . ตามด้วยชื่อคลาส ดังนี้ โค้ดด้านบน จะมีผลกับอีลิเมนต์ที่มีชื่อคลาสเป็น redtext เท่านั้น การอ้างอิง CSS จากภายนอกเราสามารถอ้างอิงไปยังไฟล์ CSS จากภายนอกได้ ไม่ว่าจะเป็น CSS ที่อยู่ในเว็บไซต์อื่น หรือเว็บไซต์เดียวกัน โดยใช้แท็ก <link> ดังนี้ การอ้างอิงค์ CSS จากเว็บไซต์ภายนอก <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"> การอ้างอิงไฟล์ CSS ในเว็บไซต์เดียวกัน แต่อยู่นอกเว็บเพจ <link rel="stylesheet" href="/html/styles.css"> หรือ <link rel="stylesheet" href="styles.css"> |