CSS Values and Units

ค่าและหน่วยใน CSS เป็นพื้นฐานสำคัญในการกำหนดขนาด สี และคุณสมบัติต่างๆ ขององค์ประกอบบนเว็บ

หน่วยความยาว (Length Units)

หน่วยความยาวแบบตายตัว (Absolute Lengths)

/* หน่วยความยาวแบบตายตัว */
.absolute-units {
  width: 200px; /* พิกเซล - หน่วยพื้นฐานบนหน้าจอ (1px = 1/96 of 1in) */
  height: 2cm; /* เซนติเมตร - 1cm = 37.8px */
  margin: 5mm; /* มิลลิเมตร - 1mm = 1/10cm */
  padding: 0.5in; /* นิ้ว - 1in = 96px = 2.54cm */
  border: 2pt solid; /* พอยต์ - 1pt = 1/72 of 1in */
  font-size: 1pc; /* พิคา - 1pc = 12pt = 1/6 of 1in */
}

หน่วยความยาวแบบสัมพัทธ์ (Relative Lengths)

/* หน่วยความยาวแบบสัมพัทธ์ */
.relative-units {
  font-size: 1.2em; /* 1.2 เท่าของ font-size ปัจจุบัน */
  padding: 2rem; /* 2 เท่าของ root font-size (ปกติ 16px) */
  width: 80vw; /* 80% ของ viewport width */
  height: 50vh; /* 50% ของ viewport height */
  margin: 2vmin; /* 2% ของ viewport ที่เล็กกว่า (กว้างหรือสูง) */
  max-width: 5vmax; /* 5% ของ viewport ที่ใหญ่กว่า */
  border-width: 2%; /* 2% ของความกว้างของ parent element */
}

ค่าสี (Color Values)

/* ตัวอย่างการกำหนดค่าสีต่างๆ */
.color-values {
  /* ชื่อสี (Color Keywords) */
  color: red;
  background-color: lightblue;

  /* RGB/RGBA */
  border-color: rgb(255, 0, 0);
  box-shadow: 0 0 10px rgba(0, 0, 255, 0.5);

  /* HEX */
  outline-color: #ff0000;
  text-shadow: 1px 1px #00ff0080; /* 80 = 50% opacity */

  /* HSL/HSLA */
  border-bottom-color: hsl(120, 100%, 50%);
  background-image: linear-gradient(hsla(240, 100%, 50%, 0.3), transparent);
}

ตัวเลขและเปอร์เซ็นต์ (Numbers & Percentages)

.number-percentage {
  opacity: 0.8; /* ค่าทศนิยม 0-1 */
  line-height: 1.5; /* ตัวคูณ (1.5 เท่าของขนาดตัวอักษร) */
  width: 80%; /* เปอร์เซ็นต์ของความกว้าง parent */
  z-index: 10; /* จำนวนเต็ม (ไม่มีหน่วย) */
  flex-grow: 1; /* ตัวคูณสำหรับ flex item */
}

ฟังก์ชัน CSS (CSS Functions)

.function-examples {
  /* calc() - คำนวณค่าต่างๆ */
  width: calc(100% - 80px);

  /* var() - ใช้ตัวแปร CSS */
  --primary-color: #3498db;
  color: var(--primary-color);

  /* min(), max(), clamp() */
  width: min(100%, 1200px);
  font-size: clamp(1rem, 2.5vw, 1.5rem);

  /* gradient functions */
  background: linear-gradient(to right, #f00, #00f);
  background: radial-gradient(circle, #f00, #00f);
}

มุม (Angles)

.angle-examples {
  transform: rotate(45deg); /* องศา (0-360) */
  transform: rotate(0.25turn); /* รอบ (1turn = 360deg) */
  transform: rotate(100grad); /* เกรเดียน (100grad = 90deg) */
  transform: rotate(1.57rad); /* เรเดียน (π/2 rad = 90deg) */
}

เวลา (Time)

.time-examples {
  transition: all 0.3s ease-in-out; /* วินาที */
  animation: slide 500ms infinite; /* มิลลิวินาที */
  animation-delay: 0.5s; /* ดีเลย์ 0.5 วินาที */
}

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

ความละเอียด (Resolution)

/* สำหรับหน้าจอความละเอียดสูง */
@media (min-resolution: 2dppx) {
  .high-res {
    background-image: url("[email protected]");
  }
}

/* สำหรับการพิมพ์คุณภาพสูง */
@media print and (min-resolution: 300dpi) {
  .print-quality {
    background-image: url("print-image.png");
  }
}

เคล็ดลับ

• ใช้ rem สำหรับ font-size เพื่อความสม่ำเสมอ
• ใช้ em สำหรับ margin/padding ที่สัมพันธ์กับขนาดตัวอักษร
• ใช้ % สำหรับการออกแบบ responsive
• ใช้ vw/vh สำหรับการออกแบบเต็มหน้าจอ

ข้อควรระวัง

• หลีกเลี่ยงการใช้ px สำหรับ font-size เพื่อรองรับการปรับขนาดตัวอักษรของผู้ใช้
• ระวังการใช้ em ที่ซ้อนกันหลายชั้น อาจทำให้ขนาดใหญ่หรือเล็กเกินไป