CSS (Cascading Style Sheets) คือภาษาที่ใช้ในการจัดรูปแบบและตกแต่งเว็บไซต์ที่สร้างด้วย HTML เพื่อทำให้หน้าเว็บดูสวยงามและน่าสนใจมากขึ้น ในการเขียน CSS มีโครงสร้างหลัก ๆ ดังนี้
โครงสร้าง CSS
selector {
property: value;
property: value;
...
}
- Selector (ตัวเลือก) คือส่วนที่บอกว่าเราต้องการให้กฎ CSS นี้ใช้กับองค์ประกอบไหนใน HTML เช่น
pสำหรับแท็ก<p>,.classสำหรับ class,#idสำหรับ id - Property (คุณสมบัติ) คือสิ่งที่เราต้องการเปลี่ยนแปลง เช่น สีของตัวอักษร (color), ขนาดของตัวอักษร (font-size), ระยะห่าง (margin/padding) เป็นต้น
- Value (ค่า) คือค่าที่เรากำหนดให้กับคุณสมบัติ เช่น
redสำหรับสี,16pxสำหรับขนาดตัวอักษร
ประเภทของ Selectors
Element Selector ใช้เลือกทุกองค์ประกอบที่เป็นแท็กนั้น ๆ
p {
color: blue;
}
ทั้งหมดของแท็ก <p> ในหน้าเว็บจะถูกเปลี่ยนสีเป็นสีน้ำเงิน
Class Selector ใช้เลือกองค์ประกอบที่มี class เฉพาะ
.intro {
font-size: 20px;
}
ทุกองค์ประกอบที่มี class=”intro” จะถูกเปลี่ยนขนาดตัวอักษรเป็น 20px
ID Selector ใช้เลือกองค์ประกอบที่มี id เฉพาะ
#header {
background-color: yellow;
}
องค์ประกอบที่มี id=”header” จะถูกเปลี่ยนพื้นหลังเป็นสีเหลือง
Universal Selector ใช้เลือกทุกองค์ประกอบในหน้าเว็บ
* {
margin: 0;
padding: 0;
}
รีเซ็ต margin และ padding ของทุกองค์ประกอบให้เป็น 0
Group Selector ใช้กำหนดกฎเดียวกันกับหลายองค์ประกอบ
h1, h2, p {
color: green;
}
แท็ก <h1>, <h2> และ <p> จะมีสีเป็นสีเขียวทั้งหมด
Descendant Selector ใช้เลือกองค์ประกอบที่อยู่ภายในอีกองค์ประกอบหนึ่ง
div p {
color: red;
}
ทุกแท็ก <p> ที่อยู่ภายในแท็ก <div> จะถูกเปลี่ยนสีเป็นสีแดง
ตัวอย่างการใช้ Properties และ Values
Color เปลี่ยนสีตัวอักษร
p {
color: red;
}
Font-size เปลี่ยนขนาดตัวอักษร
h1 {
font-size: 36px;
}
Background-color เปลี่ยนสีพื้นหลัง
body {
background-color: lightgray;
}
Margin & Padding กำหนดระยะห่าง
div {
margin: 20px;
padding: 15px;
}
Border เพิ่มกรอบให้กับองค์ประกอบ
img {
border: 2px solid black;
}
การเรียงลำดับของกฎ CSS (Cascading)
CSS จะทำงานตามลำดับจากบนลงล่าง ซึ่งหมายความว่ากฎที่อยู่ด้านล่างจะทับกฎที่อยู่ด้านบน ถ้าทั้งสองกฎใช้กับองค์ประกอบเดียวกัน ตัวอย่างเช่น
p {
color: blue;
}
p {
color: red;
}
ในกรณีนี้ ตัวอักษรในแท็ก <p> จะมีสีแดงเพราะกฎที่กำหนดไว้ล่าสุดจะทับกฎก่อนหน้า
ความสำคัญของ CSS
Inline CSS ความสำคัญสูงสุด ใช้ style ในแท็ก HTML
<p style="color: green;">ข้อความนี้มีสีเขียว</p>
Internal CSS ความสำคัญรองลงมา ใช้ <style> ภายใน <head>
<style>
p {
color: blue;
}
</style>
External CSS ความสำคัญต่ำสุด ใช้ไฟล์ .css แยกออกไป
<link rel="stylesheet" href="styles.css">
นี่คือโครงสร้างหลักของ CSS ที่ใช้ในการจัดการรูปแบบและตกแต่งเว็บไซต์ให้ดูน่าสนใจ