آبشار، ارث بری و اولویت قوانین CSS | درس 23 + پروژه درس

درس 23 از دوره 60 جلسه ای آموزش HTML و CSS ارومیا دیزاین

یک رنگ برای پاراگراف می نویسید، اما مرورگر رنگ دیگری نشان می دهد؛ قانون جدید را پایین فایل می گذارید، ولی نتیجه تغییر نمی کند. در این درس، اولویت قوانین CSS را با مثال و یک پروژه کوچک بررسی می کنیم تا بتوانید علت استایل نهایی را پیدا کنید.

پیش نیاز: اتصال فایل CSS به HTML در درس 21 و انتخابگرهای CSS در درس 22. زمان پیشنهادی: 40 دقیقه مطالعه و آزمایش، سپس 15 دقیقه تمرین.

در پایان این درس چه می آموزید؟

• تفاوت آبشار و ارث بری را با مثال توضیح می دهید.
• وزن انتخابگرهای ساده را مقایسه می کنید.
• زمان اثرگذاری ترتیب قوانین را تشخیص می دهید.
• با ابزار بررسی مرورگر، قانون برنده را پیدا می کنید.
• یک متن را بدون افزودن بی دلیل شناسه یا important تغییر می دهید.

آبشار CSS چیست؟

آبشار یا Cascade فرایندی است که مرورگر برای تعیین مقدار ویژگی ها از بین اعلان های قابل اعمال استفاده می کند. هر ویژگی جدا بررسی می شود؛ برنده شدن رنگ یک قانون به معنی برنده شدن تمام ویژگی های آن نیست.

محدوده مثال های این جلسه: قوانین عادی خودمان، بدون لایه های CSS، استایل داخل ویژگی style، انیمیشن، گذار یا scope. در این محدوده، وزن انتخابگر را مقایسه می کنیم و در وزن برابر، قانون بعدی برنده می شود. آبشار کامل، مبدأ و اهمیت اعلان ها و مرحله های دیگری هم دارد؛ «آخرین قانون همیشه برنده است» یک قاعده عمومی درست نیست.

.notice {
  color: #9f1239;
  padding: 16px;
}
.notice {
  color: #92400e;
}

در این مثال، رنگ قهوه ای قانون دوم اعمال می شود، اما padding قانون اول باقی می ماند؛ قانون دوم فاصله داخلی را تغییر نداده است. جای دو قانون را عوض کنید و نتیجه رنگ را ببینید.

ارث بری CSS؛ چه چیزی از والد می رسد؟

بعضی ویژگی ها مثل color و font-family می توانند از والد به فرزند برسند. به همین دلیل، رنگ و قلم پایه را معمولاً روی body تعیین می کنیم. border و padding به طور پیش فرض ارثی نیستند. دیدن یک کادر دور والد به معنی کادر داشتن خود پاراگراف نیست.

برای مرور رابطه عناصر، ساختار معنایی صفحه در درس 15 را ببینید.

<div class="parent">
  <p>رنگ من از والد می آید.</p>
  <p class="explicit">برای من رنگ جدا تعیین شده است.</p>
</div>

.parent {
  color: #166534;
  border: 2px solid #166534;
}
.explicit {
  color: #9f1239;
}

متن اول سبز و متن دوم قرمز تیره می شود. اعلان مستقیم رنگ روی فرزند، جای رنگ ارثی را می گیرد. انتخابگر والد را با انتخابگر فرزند مسابقه نمی دهیم؛ این دو قانون روی یک عنصر نوشته نشده اند.

درخواست صریح ارث بری با inherit

.explicit {
  color: inherit;
}

این قانون را جایگزین قانون قبلی explicit کنید. حالا متن دوم هم رنگ والد را می گیرد. inherit برای ویژگی غیرارثی نیز درخواست ارث بری می کند، ولی باید هدف روشن داشته باشد؛ ارث دادن همه فاصله های والد به فرزندان معمولاً نتیجه مناسبی ندارد.

وزن انتخابگر؛ کدام قانون قوی تر است؟

برای انتخابگرهای ساده، وزن یا Specificity را با سه بخش می نویسیم: تعداد شناسه ها، تعداد کلاس ها، تعداد نام تگ ها. مقایسه از بخش اول شروع می شود؛ فقط در برابری به بخش بعدی می رویم. این سه بخش یک عدد ده دهی نیستند.

این جدول برای انتخابگرهای ساده این جلسه است؛ انتخابگرهای تابعی مثل :where و :is جزئیات جداگانه دارند. وزن انتخابگرهای جداشده با ویرگول را نیز با هم جمع نکنید.

<p id="special" class="message">کدام رنگ اعمال می شود؟</p>

#special {
  color: #7e22ce;
}
.message {
  color: #0369a1;
}

متن بنفش می شود. قانون کلاس پایین تر است، اما وزن شناسه بیشتر است. بردن message به پایین فایل، در همین شرایط نتیجه را عوض نمی کند. برای استایل روزمره از کلاس ها شروع کنید تا تغییر بعدی ساده باشد؛ صرفاً برای قوی تر کردن قانون شناسه نسازید.

تعداد ویژگی ها وزن نمی سازد

یک قانون با ده ویژگی از قانون دارای یک ویژگی قوی تر نمی شود. طول نام کلاس و نزدیک تر بودن والد در HTML نیز معیار وزن نیست. ابتدا باید ببینید هر انتخابگر کدام عنصر را انتخاب می کند.

important بخش تازه ای از وزن نیست

.message {
  color: #0369a1 !important;
}

این نمونه فقط برای شناخت مفهوم است و در پروژه اصلی استفاده نشده است. important درجه اهمیت اعلان را تغییر می دهد. در همین مثال، رنگ مهم کلاس بر رنگ عادی شناسه مقدم می شود. برای رفع اشکال، ابتدا انتخابگر، ترتیب و منبع استایل را بررسی کنید؛ اضافه کردن important بدون پیدا کردن علت، اصلاح های بعدی را دشوار می کند.

چطور علت رنگ اشتباه را پیدا کنیم؟

1. روی متن راست کلیک کنید و Inspect یا گزینه بررسی را بزنید.
2. در Elements مطمئن شوید خود عنصر مورد نظر انتخاب شده است.
3. در Styles یا Rules، اعلان color را پیدا کنید؛ اعلان خط خورده معمولاً در رقابت انتخاب نشده است.
4. نام فایل و شماره خط قانون برنده را ببینید.
5. در Computed مقدار نهایی را بررسی کنید؛ مرورگر ممکن است رنگ را با rgb نمایش دهد.
6. اگر قانون شما دیده نمی شود، نام کلاس، ذخیره فایل و مسیر stylesheet را بررسی کنید.

تغییر در ابزار مرورگر، فایل اصلی را ذخیره نمی کند؛ اصلاح نهایی را در ویرایشگر انجام دهید. برای مشکل پیدا نشدن فایل، مسیرهای نسبی در درس 8 و پوشه بندی پروژه در درس 3 را مرور کنید.

پروژه کامل: آزمایشگاه اولویت CSS

دو فایل زیر را کنار هم بسازید. صفحه بدون اینترنت اجرا می شود. اگر در ساخت عنوان ها نیاز به مرور دارید، درس 6؛ عنوان و پاراگراف کمک می کند. بعد از این تمرین، همین روش را روی پروژه نهایی HTML درس 20 آزمایش کنید.

فایل index.html

<!doctype html>
<html lang="fa" dir="rtl">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>آزمایشگاه اولویت CSS</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header><h1>آزمایشگاه قوانین CSS</h1></header>
  <main>
    <section class="panel">
      <h2>1. ارث بری</h2>
      <div class="parent">
        <p>این متن رنگ سبز را از والد می گیرد.</p>
        <p class="explicit">این متن رنگ خودش را دارد.</p>
      </div>
    </section>
    <section class="panel">
      <h2>2. وزن انتخابگر</h2>
      <p id="special" class="message">شناسه از کلاس قوی تر است.</p>
    </section>
    <section class="panel">
      <h2>3. ترتیب قوانین</h2>
      <p class="notice">در وزن برابر، قانون بعدی برنده است.</p>
    </section>
    <section class="panel">
      <h2>تمرین شما</h2>
      <p class="practice">فقط این متن را آبی کنید.</p>
      <p>رنگ این متن باید بدون تغییر بماند.</p>
    </section>
  </main>
</body>
</html>

فایل style.css

body {
  font-family: Tahoma, sans-serif;
  line-height: 1.8;
  color: #334155;
  background-color: #f1f5f9;
  margin: 0;
  padding: 24px;
}
.panel {
  padding: 20px;
  margin-bottom: 16px;
  border: 1px solid #cbd5e1;
  background-color: #ffffff;
}
h1, h2 {
  color: #0f172a;
}
.parent {
  color: #166534;
  border: 2px solid #166534;
  padding: 16px;
}
.explicit {
  color: #9f1239;
}
#special {
  color: #7e22ce;
}
.message {
  color: #0369a1;
}
.notice {
  color: #9f1239;
}
.notice {
  color: #92400e;
}

نتیجه مورد انتظار

• متن اول بخش ارث بری سبز و متن دوم قرمز تیره است.
• متن special بنفش است.
• متن notice قهوه ای است.
• متن practice ابتدا رنگ پایه صفحه را دارد.

آزمایش اول: جای دو قانون notice را عوض کنید؛ متن قرمز تیره می شود. آزمایش دوم: قانون message را پایین فایل ببرید؛ special همچنان بنفش می ماند. آزمایش سوم: رنگ explicit را به inherit تغییر دهید؛ متن دوم بخش ارث بری سبز می شود. هر بار فقط یک تغییر انجام دهید و پیش از باز کردن صفحه نتیجه را پیش بینی کنید.

تمرین درس 23؛ فقط یک متن را آبی کنید

بدون تغییر HTML، بدون شناسه و بدون important، فقط متن practice را آبی کنید. رنگ پاراگراف بعدی نباید عوض شود. برای نتیجه، توضیح دهید انتخاب مستقیم و ارث بری چه نقشی داشته اند.

.practice {
  color: #0369a1;
}

فایل های تمرین

دانلود فایل پروژه درس 23؛ آبشار و اولویت CSS

بسته دانلودی شامل فایل های index.html، style.css، solution.css و راهنمای فارسی README.txt است. فایل ZIP را استخراج کنید و index.html را در مرورگر باز کنید. پاسخ تمرین در solution.css قرار دارد؛ برای مشاهده آن، مسیر فایل CSS در HTML را به solution.css تغییر دهید.

پرسش های رایج درباره اولویت CSS

CSS داخلی همیشه از فایل خارجی قوی تر است؟

خیر؛ قرار گرفتن در تگ style به تنهایی وزن بیشتری نمی سازد. در مثال های عادی این جلسه، وزن و سپس ترتیب مؤثر اعلان ها تعیین کننده است. ویژگی style روی خود عنصر وضعیت متفاوتی دارد و وارد جدول سه بخشی این جلسه نشده است.

چرا لینک رنگ والد را نمی گیرد؟

ممکن است قانون مستقیم روی a، از فایل خودتان یا استایل مرورگر، رنگ را تعیین کرده باشد. خود لینک را در ابزار بررسی انتخاب کنید. اگر قصد ارث بری دارید، color: inherit بنویسید و قابل تشخیص بودن لینک را نیز حفظ کنید.

وقتی کلاس اثر نکرد، شناسه اضافه کنم؟

اول نام کلاس، مسیر فایل، ذخیره تغییرات و قانون برنده را پیدا کنید. انتخابگر قوی تر مشکل مسیر اشتباه یا نام نادرست را حل نمی کند.

مرور پایانی و درس بعدی

برای رنگ غیرمنتظره، ابتدا مشخص کنید اعلان مستقیم وجود دارد یا مقدار از والد آمده است. برای قوانین قابل مقایسه، وزن و در برابری ترتیب را بررسی کنید. در درس 24 سراغ رنگ ها و پس زمینه ها می رویم. جلسه های منتشرشده در دسته آموزش HTML و CSS قرار دارند.

مطالعه بیشتر: رفع تعارض های CSS در MDN، وزن انتخابگر در MDN، استاندارد آبشار و ارث بری W3C.