CSS Cheat Sheet - สรุปคำสั่ง CSS

Selectors (ตัวเลือก)

/* Element Selector */
p { color: blue; }

/* Class Selector */
.classname { color: red; }

/* ID Selector */
#idname { color: green; }

/* Universal Selector */
* { margin: 0; }

/* Descendant Selector */
div p { color: blue; }

/* Child Selector */
div > p { color: blue; }

/* Adjacent Sibling */
h1 + p { margin-top: 0; }

/* General Sibling */
h1 ~ p { color: gray; }

/* Attribute Selector */
input[type="text"] { border: 1px solid #ccc; }
a[href^="https"] { color: green; }
a[href$=".pdf"] { color: red; }
a[href*="example"] { color: blue; }

/* Pseudo-classes */
a:hover { color: red; }
a:active { color: blue; }
a:visited { color: purple; }
input:focus { border-color: blue; }
li:first-child { font-weight: bold; }
li:last-child { margin-bottom: 0; }
li:nth-child(2) { color: red; }
li:nth-child(odd) { background: #f0f0f0; }
li:nth-child(even) { background: white; }

/* Pseudo-elements */
p::first-line { font-weight: bold; }
p::first-letter { font-size: 2em; }
p::before { content: "→ "; }
p::after { content: " ←"; }
::selection { background: yellow; }

Box Model

.box {
    /* Content */
    width: 300px;
    height: 200px;

    /* Padding (ช่องว่างภายใน) */
    padding: 20px;                    /* ทุกด้าน */
    padding: 10px 20px;               /* บน-ล่าง ซ้าย-ขวา */
    padding: 10px 20px 30px 40px;    /* บน ขวา ล่าง ซ้าย */
    padding-top: 10px;
    padding-right: 20px;
    padding-bottom: 30px;
    padding-left: 40px;

    /* Border (เส้นขอบ) */
    border: 2px solid #333;
    border-width: 2px;
    border-style: solid;              /* solid, dashed, dotted, double */
    border-color: #333;
    border-radius: 10px;              /* มุมโค้ง */
    border-radius: 10px 20px 30px 40px;

    /* Margin (ช่องว่างภายนอก) */
    margin: 20px;
    margin: 10px auto;                /* จัดกึ่งกลาง */
    margin-top: 10px;

    /* Box Sizing */
    box-sizing: border-box;           /* รวม padding และ border ใน width */
}

Typography (ตัวอักษร)

.text {
    /* Font Family */
    font-family: 'Sarabun', Arial, sans-serif;

    /* Font Size */
    font-size: 16px;
    font-size: 1rem;                  /* แนะนำ */
    font-size: 1.5em;

    /* Font Weight */
    font-weight: normal;              /* 400 */
    font-weight: bold;                /* 700 */
    font-weight: 600;

    /* Font Style */
    font-style: normal;
    font-style: italic;

    /* Line Height */
    line-height: 1.5;
    line-height: 24px;

    /* Text Align */
    text-align: left;
    text-align: center;
    text-align: right;
    text-align: justify;

    /* Text Decoration */
    text-decoration: none;
    text-decoration: underline;
    text-decoration: line-through;

    /* Text Transform */
    text-transform: uppercase;
    text-transform: lowercase;
    text-transform: capitalize;

    /* Letter Spacing */
    letter-spacing: 1px;

    /* Word Spacing */
    word-spacing: 2px;

    /* Text Shadow */
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);

    /* White Space */
    white-space: nowrap;              /* ไม่ขึ้นบรรทัดใหม่ */
    white-space: pre;                 /* รักษาช่องว่าง */

    /* Text Overflow */
    text-overflow: ellipsis;          /* แสดง ... */
    overflow: hidden;
}

Colors (สี)

.colors {
    /* Named Colors */
    color: red;

    /* Hex */
    color: #ff0000;
    color: #f00;                      /* รูปแบบสั้น */

    /* RGB */
    color: rgb(255, 0, 0);

    /* RGBA (มีความโปร่งใส) */
    color: rgba(255, 0, 0, 0.5);

    /* HSL */
    color: hsl(0, 100%, 50%);

    /* HSLA */
    color: hsla(0, 100%, 50%, 0.5);

    /* Background */
    background-color: #f0f0f0;
    background: linear-gradient(to right, #ff0000, #0000ff);
    background: radial-gradient(circle, #ff0000, #0000ff);
}

Flexbox

/* Container */
.flex-container {
    display: flex;

    /* Direction */
    flex-direction: row;              /* แนวนอน (default) */
    flex-direction: column;           /* แนวตั้ง */
    flex-direction: row-reverse;
    flex-direction: column-reverse;

    /* Wrap */
    flex-wrap: nowrap;                /* ไม่ขึ้นบรรทัดใหม่ */
    flex-wrap: wrap;                  /* ขึ้นบรรทัดใหม่ */

    /* Justify Content (แกนหลัก) */
    justify-content: flex-start;
    justify-content: flex-end;
    justify-content: center;
    justify-content: space-between;
    justify-content: space-around;
    justify-content: space-evenly;

    /* Align Items (แกนรอง) */
    align-items: stretch;             /* ยืดเต็ม */
    align-items: flex-start;
    align-items: flex-end;
    align-items: center;
    align-items: baseline;

    /* Align Content (หลายบรรทัด) */
    align-content: flex-start;
    align-content: center;
    align-content: space-between;

    /* Gap */
    gap: 20px;
    row-gap: 10px;
    column-gap: 20px;
}

/* Items */
.flex-item {
    /* Flex Grow */
    flex-grow: 1;                     /* ขยายเต็มพื้นที่ */

    /* Flex Shrink */
    flex-shrink: 0;                   /* ไม่หด */

    /* Flex Basis */
    flex-basis: 200px;

    /* Shorthand */
    flex: 1;                          /* flex-grow: 1 */
    flex: 0 0 200px;                  /* grow shrink basis */

    /* Align Self */
    align-self: flex-start;
    align-self: center;

    /* Order */
    order: 1;                         /* เปลี่ยนลำดับ */
}

Grid

/* Container */
.grid-container {
    display: grid;

    /* Columns */
    grid-template-columns: 200px 200px 200px;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-columns: repeat(3, 1fr);
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

    /* Rows */
    grid-template-rows: 100px 200px;
    grid-template-rows: auto 1fr auto;

    /* Gap */
    gap: 20px;
    row-gap: 10px;
    column-gap: 20px;

    /* Justify Items */
    justify-items: start;
    justify-items: center;
    justify-items: stretch;

    /* Align Items */
    align-items: start;
    align-items: center;
    align-items: stretch;
}

/* Items */
.grid-item {
    /* Column Span */
    grid-column: 1 / 3;               /* คอลัมน์ 1 ถึง 3 */
    grid-column: span 2;              /* ครอบคลุม 2 คอลัมน์ */

    /* Row Span */
    grid-row: 1 / 3;
    grid-row: span 2;

    /* Shorthand */
    grid-area: 1 / 1 / 3 / 3;         /* row-start / col-start / row-end / col-end */
}

Positioning

.positioned {
    /* Position */
    position: static;                 /* default */
    position: relative;               /* เทียบกับตำแหน่งเดิม */
    position: absolute;               /* เทียบกับ parent ที่มี position */
    position: fixed;                  /* เทียบกับ viewport */
    position: sticky;                 /* ติดเมื่อ scroll */

    /* Offset */
    top: 10px;
    right: 20px;
    bottom: 30px;
    left: 40px;

    /* Z-Index */
    z-index: 10;                      /* ลำดับชั้น */
}

Display & Visibility

.display {
    /* Display */
    display: block;                   /* แสดงเป็นบล็อก */
    display: inline;                  /* แสดงในบรรทัด */
    display: inline-block;            /* ผสม */
    display: none;                    /* ซ่อน */
    display: flex;
    display: grid;

    /* Visibility */
    visibility: visible;
    visibility: hidden;               /* ซ่อนแต่ยังครองพื้นที่ */

    /* Opacity */
    opacity: 0.5;                     /* 0 = โปร่งใส, 1 = ทึบ */
}

Responsive Design

/* Mobile First */
.responsive {
    width: 100%;
}

/* Tablet */
@media (min-width: 768px) {
    .responsive {
        width: 750px;
    }
}

/* Desktop */
@media (min-width: 1024px) {
    .responsive {
        width: 960px;
    }
}

/* Large Desktop */
@media (min-width: 1200px) {
    .responsive {
        width: 1140px;
    }
}

/* Orientation */
@media (orientation: landscape) {
    /* แนวนอน */
}

@media (orientation: portrait) {
    /* แนวตั้ง */
}

/* Print */
@media print {
    /* สำหรับพิมพ์ */
}

Transitions & Animations

/* Transitions */
.transition {
    transition: all 0.3s ease;
    transition: background-color 0.3s ease-in-out;
    transition-property: background-color, transform;
    transition-duration: 0.3s;
    transition-timing-function: ease;  /* ease, linear, ease-in, ease-out, ease-in-out */
    transition-delay: 0.1s;
}

.transition:hover {
    background-color: blue;
    transform: scale(1.1);
}

/* Animations */
@keyframes slide {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(100px);
    }
}

@keyframes bounce {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-20px);
    }
}

.animated {
    animation: slide 2s ease-in-out infinite;
    animation-name: slide;
    animation-duration: 2s;
    animation-timing-function: ease-in-out;
    animation-delay: 0s;
    animation-iteration-count: infinite;  /* หรือ 3 */
    animation-direction: normal;          /* normal, reverse, alternate */
    animation-fill-mode: forwards;        /* none, forwards, backwards, both */
}

Transform

.transform {
    /* Translate (เลื่อน) */
    transform: translateX(50px);
    transform: translateY(50px);
    transform: translate(50px, 50px);

    /* Scale (ขยาย/ย่อ) */
    transform: scale(1.5);
    transform: scale(1.5, 2);

    /* Rotate (หมุน) */
    transform: rotate(45deg);

    /* Skew (เอียง) */
    transform: skew(10deg, 20deg);

    /* Multiple */
    transform: translate(50px, 50px) rotate(45deg) scale(1.2);

    /* Transform Origin */
    transform-origin: center;
    transform-origin: top left;
    transform-origin: 50% 50%;
}

Units (หน่วยวัด)

.units {
    /* Absolute */
    width: 100px;                     /* พิกเซล */
    width: 2cm;                       /* เซนติเมตร */
    width: 1in;                       /* นิ้ว */

    /* Relative */
    width: 50%;                       /* เปอร์เซ็นต์ของ parent */
    font-size: 1em;                   /* เทียบกับ font-size ของ element */
    font-size: 1rem;                  /* เทียบกับ font-size ของ root (html) */
    width: 50vw;                      /* 50% ของความกว้าง viewport */
    height: 100vh;                    /* 100% ของความสูง viewport */
    font-size: 5vmin;                 /* 5% ของมิติที่เล็กกว่า */
    font-size: 5vmax;                 /* 5% ของมิติที่ใหญ่กว่า */
}

Common Patterns

/* จัดกึ่งกลาง */
.center {
    /* วิธีที่ 1: Margin Auto */
    width: 300px;
    margin: 0 auto;

    /* วิธีที่ 2: Flexbox */
    display: flex;
    justify-content: center;
    align-items: center;

    /* วิธีที่ 3: Grid */
    display: grid;
    place-items: center;

    /* วิธีที่ 4: Position */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* รูปภาพ Responsive */
img {
    max-width: 100%;
    height: auto;
}

/* ซ่อนข้อความแต่เก็บไว้สำหรับ Screen Reader */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

/* Clearfix */
.clearfix::after {
    content: "";
    display: table;
    clear: both;
}

/* Truncate Text */
.truncate {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

💡 Tips:

• ใช้ rem สำหรับ font-size
• ใช้ box-sizing: border-box เสมอ
• ใช้ Flexbox สำหรับ 1D layout, Grid สำหรับ 2D layout
• ใช้ CSS Variables สำหรับค่าที่ใช้บ่อย: --primary-color: #007bff;