EP7 คำสั่ง CSS พื้นฐานที่ควรรู้

คำสั่ง CSS พื้นฐานที่ควรรู้

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

แนะนำให้อ่าน CSS คืออะไร ก่อนเพื่อความเข้าใจที่ดียิ่งขึ้น

การเลือกใช้ Selectors

Element Selector

Element Selector เป็น คำสั่ง CSS ที่ใช้เลือก HTML elements ทั้งหมดที่มีชื่อเหมือนกัน เช่น p, h1, div ตัวอย่างการใช้:

p {
    color: blue;
}

ในตัวอย่างนี้ ทุก <p> ในเอกสาร HTML จะถูกเปลี่ยนสีข้อความเป็นสีน้ำเงิน

Class Selector

Class Selector ใช้เลือก elements ที่มี class เดียวกัน โดยใช้เครื่องหมายจุดนำหน้า เช่น .classname ตัวอย่างการใช้:

.highlight {
    background-color: yellow;
}

ทุก element ที่มี class highlight จะมีพื้นหลังเป็นสีเหลือง

ID Selector

ID Selector ใช้เลือก elements ที่มี id เฉพาะเจาะจง โดยใช้เครื่องหมาย # นำหน้า เช่น #header ตัวอย่างการใช้:

#main {
    font-size: 20px;
}

เฉพาะ element ที่มี id เป็น main จะถูกกำหนดขนาดฟอนต์เป็น 20px

การจัดการสีและพื้นหลัง

การกำหนดสีของข้อความ

การกำหนดสีของข้อความเป็นคำสั่งพื้นฐานที่ใช้บ่อย ช่วยให้ข้อความในเว็บไซต์โดดเด่นขึ้น ตัวอย่างการใช้:

.text-red {
    color: red;
}

ข้อความภายใน element ที่มี class text-red จะถูกเปลี่ยนเป็นสีแดง

การกำหนดสีพื้นหลัง

การกำหนดสีพื้นหลังเป็นอีกหนึ่งคำสั่งที่ใช้บ่อย ตัวอย่างการใช้:

.bg-blue {
    background-color: blue;
}

element ที่มี class bg-blue จะมีพื้นหลังเป็นสีน้ำเงิน

การใช้รูปภาพเป็นพื้นหลัง

นอกจากการกำหนดสีพื้นหลังแล้ว เรายังสามารถใช้รูปภาพเป็นพื้นหลังได้ด้วยคำสั่งตัวอย่างการใช้:

.background-image {
    background-image: url('image.jpg');
}

element ที่มี class background-image จะมีรูปภาพ image.jpg เป็นพื้นหลัง

การกำหนดขนาดและระยะห่าง

การกำหนดความกว้างและความสูง

การกำหนดขนาดของ elements เป็นคำสั่งที่สำคัญในการจัด Layout ของเว็บไซต์ ตัวอย่างการใช้:

.box {
    width: 100px;
    height: 100px;
}

element ที่มี class box จะมีความกว้างและความสูง 100px

การกำหนดระยะห่างภายใน (padding)

การกำหนดระยะห่างภายในหรือ padding เป็นคำสั่งที่ช่วยให้เนื้อหาภายใน element ไม่ชิดขอบเกินไป ตัวอย่างการใช้:

.padding {
    padding: 20px;
}

element ที่มี class padding จะมีระยะห่างภายใน 20px

การกำหนดระยะห่างภายนอก (margin)

การกำหนดระยะห่างภายนอกหรือ margin เป็นคำสั่งที่ช่วยจัดระยะห่างระหว่าง elements ตัวอย่างการใช้:

.margin {
    margin: 20px;
}

element ที่มี class margin จะมีระยะห่างภายนอก 20px

การจัด Layout

การใช้ Flexbox

Flexbox เป็นคำสั่งที่ช่วยในการจัด Layout ของ elements ให้ง่ายและยืดหยุ่นมากขึ้น ตัวอย่างการใช้:

.flex-container {
    display: flex;
}

container ที่มี class flex-container จะถูกกำหนดให้เป็น Flexbox

การจัดตำแหน่ง elements ภายใน Flexbox

การจัดตำแหน่ง elements ภายใน Flexbox สามารถทำได้หลายรูปแบบ ตัวอย่างการใช้:

.flex-container {
    justify-content: center;
    align-items: center;
}

elements ภายใน flex-container จะถูกจัดให้อยู่ตรงกลางทั้งแนวนอนและแนวตั้ง

การใช้ Grid

Grid เป็นอีกหนึ่งคำสั่งที่ช่วยในการจัด Layout โดยแบ่งพื้นที่ออกเป็นช่อง ๆ อย่างมีระเบียบ ตัวอย่างการใช้:

.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

container ที่มี class grid-container จะถูกแบ่งเป็น 3 คอลัมน์ที่มีขนาดเท่ากัน

การจัดตำแหน่ง elements ภายใน Grid

การจัดตำแหน่ง elements ภายใน Grid สามารถใช้คำสั่ง gap เพื่อกำหนดระยะห่างระหว่างช่องได้ ตัวอย่างการใช้:

.grid-container {
    gap: 10px;
}

elements ภายใน grid-container จะมีระยะห่างระหว่างกัน 10px

การตอบสนองต่อขนาดหน้าจอด้วย Media Queries

การใช้ Media Queries

Media Queries เป็นคำสั่งที่ช่วยให้เว็บไซต์ตอบสนองตามขนาดหน้าจอของอุปกรณ์ต่าง ๆ ตัวอย่างการใช้:

@media (max-width: 600px) {
    .responsive {
        flex-direction: column;
    }
}

เมื่อหน้าจอมีความกว้างไม่เกิน 600px elements ภายใน class responsive จะถูกจัดเรียงในแนวตั้ง

การสร้าง Animation

การสร้าง Animation เบื้องต้น

การสร้าง Animation ด้วย คำสั่ง CSS ช่วยเพิ่มความน่าสนใจให้กับเว็บไซต์ ตัวอย่างการใช้:

.animate {
    animation: example 5s infinite;
}

@keyframes example {
    0% {background-color: red;}
    50% {background-color: yellow;}
    100% {background-color: red;}
}

element ที่มี class animate จะเปลี่ยนสีพื้นหลังจากสีแดงเป็นสีเหลืองและกลับมาเป็นสีแดงในเวลา 5 วินาที และจะทำซ้ำตลอดเวลา

สรุป

การเรียนรู้และเข้าใจ คำสั่ง CSS เป็นสิ่งจำเป็นสำหรับการพัฒนาเว็บไซต์ที่มีประสิทธิภาพ การใช้ในการกำหนดรูปแบบต่าง ๆ ของเว็บไซต์ ไม่ว่าจะเป็นการเลือกใช้ Selectors การกำหนดสีและพื้นหลัง การกำหนดขนาดและระยะห่าง การจัด Layout ด้วย Flexbox และ Grid การตอบสนองต่อขนาดหน้าจอด้วย Media Queries และการสร้าง Animation จะช่วยให้เว็บไซต์ของคุณมีความสวยงาม น่าใช้งาน และตอบสนองตามอุปกรณ์ที่หลากหลายได้ดี การศึกษาคำสั่ง CSS อย่างละเอียดและการนำไปใช้จริงจะช่วยให้คุณสามารถพัฒนาเว็บไซต์ได้อย่างมืออาชีพ