สรุป CSS ที่ใช้บ่อยและสำคัญ ซึ่งมักพบแทบทุกโครงการเว็บ

bysemicon -
0

 




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

🔶 1. Layout & Box Model (การจัดวางและโครงสร้างกล่อง)

✅ display

คำสั่งนี้กำหนดวิธีที่ element จะแสดงในหน้าเว็บ
css
display: block;         /* ครอบทั้งบรรทัด เช่น <div> */
display: inline;        /* เรียงในบรรทัด เช่น <span> */
display: inline-block;  /* ผสมข้อดีของ inline และ block */
display: flex;          /* ใช้สำหรับ Flexbox layout */
display: grid;          /* ใช้สำหรับ Grid layout */

📌 ใช้บ่อยมาก โดยเฉพาะ flex กับ grid สำหรับ responsive layout

✅ position

ใช้ควบคุมตำแหน่งของ element
css
position: static;   /* ค่าเริ่มต้น */
position: relative; /* วางตำแหน่งจากตำแหน่งปกติ */
position: absolute; /* วางตำแหน่งอิสระจากพ่อแม่ */
position: fixed;    /* ติดกับหน้าจอตลอด */
position: sticky;   /* ติดอยู่เมื่อ scroll ถึงตำแหน่งนั้น */

🧠 ใช้ร่วมกับ top, right, bottom, left

✅ margin / padding

สร้างพื้นที่ว่างภายนอก (margin) และภายใน (padding) ของกล่อง
css
margin: 10px; /* ด้านทุกด้าน */
margin: 10px 20px; /* บน-ล่าง ซ้าย-ขวา */

padding: 20px;
padding: 10px 15px 5px 0; /* บน ขวา ล่าง ซ้าย */

✅ box-sizing

css
box-sizing: border-box;

🎯 ใช้บ่อยสุด เพราะทำให้ padding และ border ถูกรวมอยู่ใน width/height
(ช่วยให้จัด layout ง่ายขึ้นมาก)

🔷 2. Font & Text (การจัดการตัวอักษร)

✅ font-family, font-size, font-weight, line-height

css
font-family: 'Prompt', sans-serif;
font-size: 16px;
font-weight: 700;      /* หรือ bold */
line-height: 1.5;

✅ text-align, text-transform, letter-spacing

css
text-align: center;          /* จัดแนวตัวอักษร */
text-transform: uppercase;   /* ตัวพิมพ์ใหญ่ */
letter-spacing: 1px;         /* ระยะห่างตัวอักษร */

🌈 3. Color & Background

✅ color, background-color, background-image

css
color: #333;
background-color: #f9f9f9;
background-image: url('image.jpg');

✅ background-size, background-repeat, background-position

css
background-size: cover;
background-repeat: no-repeat;
background-position: center;

🧱 4. Border & Shadow

✅ border, border-radius

css
border: 1px solid #ccc;
border-radius: 8px;
ใช้สร้างกรอบ และทำให้มุมมน

✅ box-shadow

css
box-shadow: 0 4px 8px rgba(0,0,0,0.2);
ใช้สร้างเงาให้ element ดูมีมิติ

📐 5. Flexbox & Grid Layout

✅ Flexbox

css
display: flex;
justify-content: space-between; /* จัดแนวตามแนวนอน */
align-items: center;            /* จัดแนวตามแนวตั้ง */
flex-wrap: wrap;                /* ให้แถวห่อเมื่อเกิน */

🧠 ใช้สำหรับจัด layout แนวนอนหรือแนวตั้งได้ง่ายมาก

✅ Grid

css
display: grid;
grid-template-columns: repeat(3, 1fr);  /* 3 คอลัมน์ */
gap: 20px;

🧠 เหมาะสำหรับ layout แบบตาราง เช่น gallery, cards, dashboards

🌀 6. Transition & Animation

✅ transition

css
transition: all 0.3s ease-in-out;
ใช้ทำให้เปลี่ยนสี ขนาด หรืออื่น ๆ นุ่มนวล

✅ hover effect

css
button:hover {
  background-color: #007bff;
  color: #fff;
}

📱 7. Responsive Design

✅ media queries

css
@media (max-width: 768px) {
  .container {
    flex-direction: column;
  }
}
ใช้ปรับ layout ตามขนาดหน้าจอ เช่น มือถือ

🧠 8. ฟังก์ชันพิเศษใน CSS

✅ calc() คำนวณค่าระยะใน CSS

css
width: calc(100% - 40px);

✅ clamp() กำหนดค่าระหว่าง min-max อย่างยืดหยุ่น

css
font-size: clamp(14px, 2vw, 18px);

✅ min() / max()

css
width: min(100%, 500px);
ใช้เลือกค่าที่เล็ก/ใหญ่ที่สุดตามสถานการณ์

🔚 สรุปภาพรวม

หมวดตัวอย่างคำสั่งที่ควรรู้
Layoutdisplay, position, flex, grid, box-sizing
ข้อความfont-size, text-align, line-height
สี/พื้นหลังcolor, background-color, box-shadow
กรอบborder, border-radius, box-shadow
Responsivemedia queries, clamp(), calc()
Interactivetransition, hover
Utilitymargin, padding, gap


สรุป CSS Shortcuts ที่ใช้บ่อยที่สุด และมักเจอในเกือบทุกโครงการ พร้อมอธิบายสั้น ๆ เข้าใจง่าย ✅

✅ 1. margin / padding shorthand

กำหนดค่าทุกด้านในบรรทัดเดียว

css
margin: 10px;            /* ทุกด้าน */
margin: 10px 20px;       /* บน-ล่าง | ซ้าย-ขวา */
margin: 10px 20px 5px 0; /* บน | ขวา | ล่าง | ซ้าย */

padding: 1rem 2rem;      /* บน-ล่าง | ซ้าย-ขวา */

✅ 2. font shorthand

กำหนด font ทั้งชุดในบรรทัดเดียว

css
font: italic bold 16px/1.5 'Roboto', sans-serif;

✅ 3. background shorthand

รวมหลายคำสั่งพื้นหลังไว้ในบรรทัดเดียว

css
background: url('bg.jpg') no-repeat center/cover;

✅ 4. border shorthand

กำหนดกรอบรอบกล่องง่าย ๆ

css
border: 1px solid #ccc;
border-radius: 8px;   /* มุมมน */

✅ 5. flex shortcut

จัด layout ง่าย ๆ ด้วย Flexbox

css
display: flex;
justify-content: space-between;
align-items: center;
gap: 1rem;

หรือแบบย่อ:

css
flex: 1; /* กำหนดขนาดยืดหยุ่น */

✅ 6. text shortcuts

css
text-align: center;
text-transform: uppercase; /* ตัวพิมพ์ใหญ่ */
text-decoration: none;     /* ลบขีดเส้นใต้ลิงก์ */

✅ 7. transition shorthand

ใส่เอฟเฟกต์ลื่นไหลให้ element

css
transition: all 0.3s ease-in-out;

✅ 8. box-sizing (ควรใช้ทุกโปรเจกต์)

css
* {
  box-sizing: border-box;
}

📌 ทำให้การคำนวณขนาดกล่องง่ายขึ้นมาก

✅ 9. CSS ฟังก์ชันยอดนิยม

ฟังก์ชันตัวอย่างความหมาย
calc()width: calc(100% - 40px);คำนวณขนาด
clamp()font-size: clamp(14px, 2vw, 18px);กำหนดค่าระหว่าง min-max
min() / max()width: min(100%, 600px);เลือกค่าที่เล็ก/ใหญ่ที่สุด

✅ 10. repeat() (พื้นหลังซ้ำ)

css
background: repeat-x url('bg.png');

🧠 Tip: ใช้ shorthand ช่วยให้โค้ด CSS สั้นลง อ่านง่าย และจัดการง่ายขึ้นในโปรเจกต์ใหญ่ ๆ


นี่คือ CSS Starter Template พร้อม Shortcuts ที่ใช้บ่อย เหมาะสำหรับเริ่มโปรเจกต์ใหม่ โดยเน้นความสะอาด สั้น และมีประสิทธิภาพ:

✅ 📁 style.css

css
/* ========= CSS Starter Template ========= */

/* 1. Reset พื้นฐาน */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: #333;
  background-color: #f9f9f9;
}

/* 2. Typography */
h1, h2, h3, h4, h5, h6 {
  margin-bottom: 0.5em;
  font-weight: bold;
}

p {
  margin-bottom: 1em;
}

/* 3. Links */
a {
  color: #007bff;
  text-decoration: none;
  transition: color 0.3s;
}

a:hover {
  color: #0056b3;
  text-decoration: underline;
}

/* 4. Buttons */
button {
  padding: 0.5em 1em;
  border: none;
  background: #007bff;
  color: white;
  font-size: 1rem;
  border-radius: 5px;
  cursor: pointer;
  transition: background 0.3s;
}

button:hover {
  background: #0056b3;
}

/* 5. Containers and Layout */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 1rem;
}

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

/* 6. Utility Classes */
.mt-1 { margin-top: 1rem; }
.mb-1 { margin-bottom: 1rem; }
.text-center { text-align: center; }
.uppercase { text-transform: uppercase; }
.bold { font-weight: bold; }

/* 7. Responsive Text Size */
.responsive-text {
  font-size: clamp(14px, 2vw, 20px);
}

/* 8. Card Component Example */
.card {
  background: white;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0,0,0,0.05);
  padding: 1rem;
  margin-bottom: 1rem;
}

/* 9. Transition Shortcut */
.transition {
  transition: all 0.3s ease-in-out;
}

💡 คุณสามารถรวม CSS ไฟล์นี้กับ HTML แบบนี้:

html
<link rel="stylesheet" href="style.css">

Download

Tags:
แสดงความคิดเห็น (0)
ใหม่กว่า เก่ากว่า