กฎ CSS สำคัญ: @import @charset @font-face !important

กฎ CSS หลัก (CSS At-rules)

CSS มีกฎพิเศษ (at-rules) เริ่มต้นด้วย @ ที่ควบคุมพฤติกรรมระดับสูงของสไตล์ชีต

1. @import - นำเข้าสไตล์ชีตอื่น

@import "layout.css";
@import url("theme.css") screen;
@import "print.css" print;

ต้องอยู่บรรทัดแรกสุดของสไตล์ชีท

2. @charset - กำหนดชุดอักขระ

@charset "UTF-8";

ต้องอยู่บรรทัดแรกสุดของไฟล์ (ก่อน @import) ใช้เมื่อไฟล์ CSS มีอักขระ non-ASCII

3. @font-face - นิยามแบบอักษรเว็บ

@font-face {
  font-family: 'MyFont';
  src: url('myfont.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

4. !important - บังคับความสำคัญ

.critical { display: none !important; }

ไม่ใช่ at-rule แต่เป็น keyword ที่ใช้ใน declaration

กฎ @ อื่นๆ ที่สำคัญ

สรุปลำดับในไฟล์ CSS

@charset "UTF-8";        /* 1. บรรทัดแรกสุด */
@import "reset.css";     /* 2. หลัง @charset */
@layer base, components; /* 3. Cascade layers */
@font-face { ... }       /* 4. Font definitions */
:root { --color: red; }  /* 5. Custom properties */
@media (max-width: 768px) { ... }  /* 6. Media queries */
.selector { color: var(--color); } /* 7. Rules ปกติ */