CodingBasic

CSS คืออะไร?

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

ประโยชน์ของ CSS

แยกเนื้อหาออกจากการแสดงผล
ควบคุมการแสดงผลได้อย่างละเอียด
ปรับเปลี่ยนการแสดงผลได้ง่ายโดยไม่ต้องแก้ไข HTML
ลดการทำงานซ้ำซ้อน
ลดขนาดไฟล์และทำให้เว็บไซต์โหลดเร็วขึ้น
รองรับการแสดงผลบนอุปกรณ์ที่หลากหลาย (responsive design)

วิธีการใช้ CSS

มี 3 วิธีในการใช้ CSS กับเอกสาร HTML:

1. Inline CSS

ใช้ attribute style ในแท็ก HTML:

<p style="color: blue; font-size: 16px;">นี่คือข้อความสีฟ้า</p>

2. Internal CSS

ใช้แท็ก <style> ในส่วน <head> ของเอกสาร HTML:

<head>
    <style>
        p {
            color: blue;
            font-size: 16px;
        }
    </style>
</head>

3. External CSS

สร้างไฟล์ CSS แยกต่างหากและเชื่อมโยงกับเอกสาร HTML:

<head>
    <link rel="stylesheet" href="styles.css">
</head>

ไฟล์ styles.css:

p {
    color: blue;
    font-size: 16px;
}

โครงสร้างของ CSS

CSS ประกอบด้วย selector และ declaration block:

selector {
    property: value;
    property: value;
}

ตัวอย่าง:

p {
    color: blue;
    font-size: 16px;
}

ในตัวอย่างนี้:

p คือ selector (เลือกแท็ก <p> ทั้งหมด)
color และ font-size คือ properties
blue และ 16px คือ values

ตัวอย่าง CSS ที่ใช้บ่อย

การจัดการข้อความ

p {
    color: #333;
    font-family: Arial, sans-serif;
    font-size: 16px;
    line-height: 1.6;
    text-align: justify;
}

การจัดการพื้นหลังและขอบ

div {
    background-color: #f5f5f5;
    border: 1px solid #ddd;
    border-radius: 5px;
    padding: 15px;
    margin: 10px 0;
}

การจัดการตำแหน่ง

.container {
    position: relative;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

.absolute {
    position: absolute;
    top: 20px;
    left: 20px;
}

Flexbox

.flex-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
}

.flex-item {
    flex: 1 1 300px;
    margin: 10px;
}

Grid

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

.grid-item {
    padding: 20px;
    background-color: #f0f0f0;
}

Media Queries (Responsive Design)

@media (max-width: 768px) {
    .container {
        padding: 10px;
    }
    
    .grid-container {
        grid-template-columns: 1fr;
    }
}

CSS ขั้นสูง

CSS มีคุณสมบัติและเทคนิคขั้นสูงมากมาย ต่อไปนี้เป็นตัวอย่างบางส่วน:

CSS Variables (Custom Properties)

:root {
    --primary-color: #0066cc;
    --secondary-color: #ff6600;
    --font-size-base: 16px;
}

h1 {
    color: var(--primary-color);
    font-size: calc(var(--font-size-base) * 2);
}

CSS Animations

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.fade-in {
    animation: fadeIn 1s ease-in-out;
}

CSS Transforms

.rotate {
    transform: rotate(45deg);
}

.scale {
    transform: scale(1.5);
}

.skew {
    transform: skew(10deg, 10deg);
}

CSS Transitions

button {
    background-color: #0066cc;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    transition: background-color 0.3s ease;
}

button:hover {
    background-color: #0055aa;
}

ลิงก์ไปยังหน้าที่เกี่ยวข้อง

Fonts - การใช้ฟอนต์ใน CSS
Center - การจัดตำแหน่งกึ่งกลางด้วย CSS
Text Shadow - การสร้างเงาให้กับข้อความ
Shadows - การสร้างเงาให้กับองค์ประกอบ
CSS Button - การสร้างปุ่มด้วย CSS
Style Attribute Conversion - การแปลง Style Attribute เป็น CSS