ساختار و قواعد نوشتاری

آشنایی با نحوه نوشتن کد CSS، ساختار قانون‌ها، انتخابگرها و اعلان‌ها

ساختار CSS (Syntax)

هر فایل CSS از مجموعه‌ای از قوانین (Rules) تشکیل شده است. هر قانون به مرورگر می‌گوید: «این عنصر(ها) را پیدا کن و این استایل‌ها را رویشان اعمال کن.»

یک قانون CSS از چه بخش‌هایی تشکیل می‌شود؟

هر قانون CSS دارای دو بخش اصلی است:

بخشتوضیحمثال
Selector (انتخابگر)عنصر(های) هدف را مشخص می‌کندp، h1، .btn
Declaration Block (بلوک اعلان)مجموعه‌ای از ویژگی‌ها و مقادیر{ color: red; }
selector {
        property: value;   /* این یک اعلان است */
        property: value;
    }

اجزای دقیق یک قانون

بیایید یک قانون کامل را کالبدشکافی کنیم:

/* ── انتخابگر ── */
    h1 {
        /* ── اعلان ۱ ── */
        color: blue;
        /*  ↑      ↑     */
        /* ویژگی  مقدار   */
    
        /* ── اعلان ۲ ── */
        font-size: 32px;
    }
جزءتوضیح
h1انتخابگر (Selector) — عنصر هدف
{ ... }بلوک اعلان (Declaration Block) — آکولاد باز و بسته
color: blueاعلان (Declaration) — یک جفت ویژگی/مقدار
colorویژگی (Property) — چه چیزی تغییر کند
blueمقدار (Value) — مقدار جدید ویژگی
;سمی‌کالن — پایان هر اعلان
:دو نقطه — جداکننده ویژگی و مقدار

چند انتخابگر در یک قانون

می‌توان یک بلوک اعلان را به چند انتخابگر اعمال کرد — کافی است آن‌ها را با کاما جدا کنید:

/* همه این عناصر قرمز می‌شوند */
    h1, h2, h3 {
        color: red;
    }
    
    /* پاراگراف‌ها و لیست‌ها */
    p, li {
        font-family: Tahoma, sans-serif;
        line-height: 1.6;
    }

چند اعلان در یک قانون

یک انتخابگر می‌تواند چندین ویژگی داشته باشد:

.card {
        background-color: white;
        border: 1px solid #ddd;
        border-radius: 8px;
        padding: 20px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }

قوانین نوشتاری مهم

قانونتوضیح
سمی‌کالن ;هر اعلان باید با سمی‌کالن تمام شود
دو نقطه :بین ویژگی و مقدار باید دو نقطه باشد
آکولاد { }اعلان‌ها باید داخل آکولاد قرار بگیرند
فاصلهفاصله‌های اضافی در CSS بی‌تأثیر هستند
حروف بزرگ و کوچکCSS به حروف در ویژگی‌ها حساس نیست، اما در انتخابگرها حساس است

نمونه‌های درست و غلط

/* ✅ درست */
    p {
        color: red;
        font-size: 16px;
    }
    
    /* ❌ غلط — سمی‌کالن فراموش شده */
    p {
        color: red
        font-size: 16px;
    }
    
    /* ✅ درست — فاصله اضافی مشکلی ندارد */
    p    {
        color   :   red ;
    }
    
    /* ❌ زشت اما کار می‌کند — همه در یک خط */
    p { color: red; font-size: 16px; }

فرمت‌بندی و خوانایی

دو سبک رایج برای نوشتن CSS وجود دارد:

سبک تک‌خطی (Single-line)

.btn { padding: 10px 20px; background: blue; color: white; border-radius: 4px; }

سبک چندخطی (Multi-line) ⭐ توصیه می‌شود

.btn {
        padding: 10px 20px;
        background: blue;
        color: white;
        border-radius: 4px;
    }

تودرتو کردن (Nesting)

در CSS معمولی تودرتو کردن وجود ندارد، اما SCSS/Sass از آن پشتیبانی می‌کند:

/* CSS معمولی */
    .nav { background: #333; }
    .nav a { color: white; }
    .nav a:hover { color: yellow; }
    
    /* SCSS — تودرتو */
    .nav {
        background: #333;
        a {
            color: white;
            &:hover { color: yellow; }
        }
    }

کامنت‌ها در CSS

کامنت‌ها با /* شروع و با */ پایان می‌یابند:

/* کامنت تک‌خطی */
    
    /*
     * کامنت چندخطی
     * برای توضیحات طولانی
     */
    
    p {
        color: blue; /* کامنت در انتهای خط */
    }

بهترین شیوه‌ها

نکات مهم

این مبحث بخشی از دوره آموزش کامل CSS است.

ابزارهای مرتبط