แต่งเว็บด้วย CSS แบบละเอียด

CSS (Cascading Style Sheets) เป็นภาษาที่ใช้ควบคุมรูปแบบการแสดงผลของเว็บเพจ เช่น สี ตัวอักษร และเค้าโครง บทความนี้จะแนะนำการใช้ CSS แต่งเว็บแบบละเอียด

1. พื้นฐาน CSS

1.1 โครงสร้าง

โค้ด CSS เขียนเป็นกฎ ประกอบด้วย 2 ส่วน:

Selector: กำหนดองค์ประกอบที่จะจัดรูปแบบ
Declaration: กำหนดคุณสมบัติ

ตัวอย่าง:

CSS
h1 {
color: red;
font-size: 24px;
}
ใช้โค้ดอย่างระมัดระวัง
1.2 Selector

Selector กำหนดองค์ประกอบที่จะจัดรูปแบบ ตัวอย่าง selector:

แท็ก: h1, p, img
Class: .button, .container
ID: #header, #footer
Pseudo-class: :hover, :focus
1.3 Declaration

Declaration กำหนดคุณสมบัติ ตัวอย่าง property:

สี: color
ขนาดตัวอักษร: font-size
พื้นหลัง: background-color
การจัดวาง: margin, padding

2. ตัวอย่างการใช้งาน

2.1 เปลี่ยนสีตัวอักษร

CSS
h1 {
color: red;
}
ใช้โค้ดอย่างระมัดระวัง
2.2 เปลี่ยนขนาดตัวอักษร

CSS
p {
font-size: 16px;
}
ใช้โค้ดอย่างระมัดระวัง
2.3 เพิ่มพื้นหลัง

CSS
body {
background-color: #f0f0f0;
}
ใช้โค้ดอย่างระมัดระวัง
2.4 ปรับ margin และ padding

CSS
.container {
margin: 20px;
padding: 10px;
}
ใช้โค้ดอย่างระมัดระวัง

3. เทคนิคเพิ่มเติม

3.1 Media queries

ใช้ปรับรูปแบบเว็บให้เหมาะกับอุปกรณ์ต่างๆ เช่น โทรศัพท์มือถือ

CSS
@media (max-width: 768px) {
body {
font-size: 14px;
}
}
ใช้โค้ดอย่างระมัดระวัง
3.2 CSS animations

ใช้สร้าง animation บนเว็บเพจ

CSS
@keyframes example {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}

.button {
animation: example 2s ease-in-out;
}
ใช้โค้ดอย่างระมัดระวัง

4. แหล่งข้อมูล

W3Schools CSS Tutorial: https://www.w3schools.com/css/
CSS Diner: https://flukeout.github.io/
Khan Academy HTML/CSS: https://www.khanacademy.org/computing/computer-programming/html-css

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