CSS พื้นฐาน: บทนำและไวยากรณ์

CSS(Cascading Style Sheets) เป็นองค์ประกอบพื้นฐานของการพัฒนาเว็บที่มีบทบาทสำคัญในการควบคุมรูปลักษณ์ขององค์ประกอบ HTML ในเว็บไซต์ของคุณ มีชุดกฎและคุณสมบัติที่มีประสิทธิภาพที่กำหนดวิธีแสดงองค์ประกอบ จัดรูปแบบ และวางตำแหน่ง ทำให้คุณสามารถปรับแต่งรูปลักษณ์ของหน้าเว็บของคุณได้

 

เริ่มต้นด้วยการทำความเข้าใจแนวคิดของตัวเลือก

ตัวเลือกใช้เพื่อกำหนดเป้าหมายองค์ประกอบ HTML เฉพาะสำหรับการจัดรูปแบบ หนึ่งในตัวเลือกพื้นฐานที่สุดคือตัวเลือกองค์ประกอบ ซึ่งจะเลือกอินสแตนซ์ทั้งหมดขององค์ประกอบ HTML เฉพาะ

ตัวอย่างเช่น กฎ CSS ต่อไปนี้กำหนดเป้าหมายย่อหน้าทั้งหมดในเอกสาร:

p {  
  color: blue;  
}  

ในตัวอย่างนี้ p ตัวเลือกจะเลือกองค์ประกอบทั้งหมด <p> และตั้งค่าสีข้อความเป็นสีน้ำเงิน

 

ตัวเลือกทั่วไปอื่นคือตัวเลือกคลาส

คลาสใช้เพื่อจัดกลุ่มองค์ประกอบที่มีลักษณะคล้ายกัน ด้วยการกำหนดคลาสให้กับองค์ประกอบ HTML คุณสามารถกำหนดเป้าหมายและจัดรูปแบบร่วมกันได้

นี่คือตัวอย่าง:

.blue-text {  
  color: blue;  
}  

ในกรณีนี้ .blue-text ตัวเลือกจะกำหนดเป้าหมายองค์ประกอบทั้งหมดที่มีคลาส blue-text และใช้สีน้ำเงินกับข้อความ

นอกจากนี้ ID ตัวเลือกยังช่วยให้คุณกำหนดเป้าหมายองค์ประกอบเฉพาะด้วยตัวระบุเฉพาะ ID โดยทั่วไปถูกกำหนดให้กับแต่ละองค์ประกอบในหน้า

นี่คือตัวอย่าง:

#header {  
  background-color: gray;  
}  

ในตัวอย่างนี้ #header ตัวเลือกจะเลือกองค์ประกอบด้วย ID header  และใช้สีพื้นหลังสีเทากับองค์ประกอบนั้น

 

ไปที่ไวยากรณ์ของ CSS กฎ CSS แต่ละข้อประกอบด้วยตัวเลือกและบล็อกการประกาศ

บล็อกการประกาศอยู่ในวงเล็บปีกกา {} และมีการประกาศอย่างน้อยหนึ่งรายการ การประกาศประกอบด้วยคุณสมบัติและค่าที่เกี่ยวข้อง

นี่คือตัวอย่าง:

h1 {  
  font-size: 24px;  
  color: #333;  
}  

ในข้อมูลโค้ดนี้ h1 ตัวเลือกจะเลือกองค์ประกอบทั้งหมด <h1> และตั้งค่าขนาดตัวอักษรเป็น 24 พิกเซลและสีข้อความเป็นสีเทาเข้ม(#333)

 

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