กำหนดรูปแบบการแสดงผล HTML ด้วย CSS
CSS ย่อมาจาก Cascading Style Sheets ใช้สำหรับกำหนดว่าอีลิเมนต์ของ HTML แต่ละอีลิเมนต์ จะแสดงผลอย่างไรบนหน้าจอหรือสื่ออื่น ๆ อีกทั้งยังช่วยย่นระยะเวลาในการตกแต่งอีลิเมนต์ต่าง ๆ ได้อย่างมาก เพราะเราสามมรถใช้ CSS ตกแต่งอีลิเมนต์ในหลาย ๆ เว็บเพจได้จากที่เดียว หรือการเขียนโค้ดเพียงครั้งเดียว
เราสามารถใช้งาน CSS ใน HTML ได้ 3 ทาง ดังนี้
- Inline คือ การใช้งานแอททริบิวต์ CSS ภายในอีลิเมนต์ HTML แต่ละอีลิเมนต์ได้เลย
- Internal คือ การใช้งาน CSS ในหน้าเว็บหนึ่ง ๆ โดยการเขียน CSS ไว้ในส่วนหัวของเว็บเพจ ภายในอีลิเมนต์ <style></style>
- External คือ การเขียน CSS ไว้ในไฟล์อื่น แล้วเรียกเข้ามาใช้งานภายในเว็บเพจอีกที
โดยวิธีที่นิยมที่สุดคือวิธีที่ 3 คือแบบ External เขียน CSS ไว้ในไฟล์อื่นแยกต่างหาก แล้วค่อยนำเข้ามาใช้ในหน้าเว็บเพจแต่ละหน้า จะทำให้เกิดความสะดวกสบาย เพราะเราสามารถเขียนโค้ด CSS เพียงครั้งเดียว แต่สามารถนำไปใช้งานได้หลายที่
Inline CSS
Inline CSS ใช้สำหรับกำหนดสไตล์ให้กับอีลิเมนต์แต่ละตัว โดยไม่มีผลกับอีลิเมนต์ตัวอื่น ๆ เช่น
<h1 style="color:red;">This is a Red Heading</h1>
Internal CSS
Internal CSS ใช้สำหรับเขียน CSS เพื่อใช้งานในหน้าเว็บเพจหนึ่ง ๆ โดยจะเขียนไว้ในส่วน <head></head> ของหน้าเว็บเพจนั้น ๆ โดยโค้ด CSS จะต้องอยู่ภายในแท็ก <style></style> อีกที เช่น
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}
</style>
</head>
<body>
<h1>นี่คือส่วนหัว</h1>
<p>นี่คือพารากราฟ</p>
</body>
</html> บรรทัดที่ 4-8 เป็นการเขียน CSS ไว้ในเว็บเพจ
CSS ที่เขียนไว้ในหน้าเว็บเพจลักษณะนี้ จะมีผลต่ออีลิเมนต์ในหน้าเว็บเพจนั้นเท่านั้น
External CSS
External CSS คือการสร้างไฟล์ CSS ไว้นอกเว็บเพจ แล้วค่อยเรียกใช้ไฟล์ CSS ที่เขียนไว้นั้นในเว็บเพจอีกที่ ข้อดีคือ สามารถเรียกใช้ไฟล์ดังกล่าวได้จากทุกเว็บเพจในเว็บไซต์ ทำให้ประหยัดเวลาในการพัฒนาและการแก้ไข
โดยการใช้งาน External CSS นั้น เราต้องเพิ่มแท็ก <link> เข้าไปยังส่วน <head></head> ของเว็บเพจ แล้วอ้างอิงไปยังไฟล์ CSS ที่ต้องการใช้งาน ดังตัวอย่าง
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="styles.css"> </head> <body> <h1>This is a heading</h1> <p>This is a paragraph.</p> </body> </html>
บรรทัดที่ 4 เป็นการอ้างอิงไฟล์ CSS จากภายนอก
ไฟล์ CSS ที่สร้างขึ้น สามารถเขียนด้วยโค้ด CSS ได้เลย โดยไม่ต้องมีโค้ด HTML ใด ๆ ทั้งสิ้น และต้องบันทึกเป็นรูปแบบไฟล์ CSS คือไฟล์จะมีนามสกุลเป็น .css ซึ่งลักษณะของโค้ด CSS จะเป็นดังนี้
body {
background-color: powderblue;
}
h1 {
color: blue;
}
p {
color: red;
}CSS Fonts
เมื่อต้องการกำหนดรูปแบบอักษร Fonts ให้กับอีลิเมนต์ใด ๆ เราสามารถใช้พร็อพเพอร์ตี้ ดังนี้
- color ใช้กำหนดสีฟ้อนต์
- font-family ใช้กำหนดรูปแบบฟอนต์
- font-size ใช้กำหนดขนาดฟอนต์
ตัวอย่างการใช้ CSS กำหนดฟอนต์
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: blue;
font-family: verdana;
font-size: 300%;
}
p {
color: red;
font-family: courier;
font-size: 160%;
}
</style>
</head>
<body>
<h1>นี่คือส่วนหัวเรื่อง</h1>
<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="paragraph1">I am different</p>
จากโค้ด เราได้ระบุ id ให้กับแท็ก p เป็น paragraph1 เมื่อใดก็ตามที่มีการอ้างอิงถึงไอดี paragraph1 ย่อมจะหมายถึงอีลิเมนต์นี้เพียงตัวเดียวเท่านั้น
เมื่อต้องการระบุ CSS ให้กับอีลิเมนต์ที่มีการตั้งค่า id ไว้ สามารถทำได้โดยใช้เครื่องหมาย # ตามด้วย id ของอีลิเมนต์นั้น ๆ เช่น #paragraph1 ดังนี้
#paragraph1 {
color: blue;
}จากโค้ดด้านบน จะมีผลกับอีลิเมนต์ที่มี id เป็น paragraph1 เท่านั้น จะไม่มีผลกับอีลิเมนต์อื่น
แอททริบิวต์ 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 {
color: red;
}โค้ดด้านบน จะมีผลกับอีลิเมนต์ที่มีชื่อคลาสเป็น 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">
