آموزش انتخابگر کلاس CSS؛ استایل اختصاصی پیام موفقیت

تگ‌ها به ما نوع محتوا رو می‌گن، اما همیشه نمی‌خوایم همه تگ‌های هم‌نام شبیه هم باشن. کلاس یک نام قابل استفاده دوباره است که داخل ویژگی class در HTML می‌نویسیم. توی CSS، قبل از نام کلاس نقطه می‌ذاریم. این نقطه جزو نامی که داخل HTML می‌نویسی نیست. یک کلاس می‌تونه روی چند عنصر قرار بگیره و برای همه‌شون نقش مشترکی داشته باشه.

مثال، یک برچسب ویژه رو از برچسب معمولی جدا می‌کنه. توی فعالیت، دو پاراگراف داریم ولی فقط پیام موفقیت باید ظاهر تعیین‌شده رو بگیره. قانون کلی p برای این کار بیش از حد گسترده است. خطای رایج نوشتن success بدون نقطه است؛ مرورگر اون رو نام تگ فرض می‌کنه و پاراگراف ما انتخاب نمی‌شه. نام کلاس رو دقیق و با همون حروف بنویس. در این مرحله کد HTML آماده است؛ سه ویژگی ظاهری پیام رو در قانون درست کامل کن و به پیام معمولی دست نزن.

✍️ مثال حل‌شده:

<span class="vip">ویژه</span><span>معمولی</span>
<style>.vip { color: purple; font-size: 18px; }</style>

حالا نوبت توئه: فقط پاراگراف .success با متن «ذخیره شد» را دارای رنگ green، اندازه ۲۰ پیکسل و وزن 700 کن. پاراگراف .plain باید رنگ rgb(31, 41, 55) پایه را حفظ کند. هر دو پاراگراف باید در صفحه بمانند؛ کلاس‌ها را تغییر نده.

فعالیت شما

فقط پاراگراف .success با متن «ذخیره شد» را دارای رنگ green، اندازه ۲۰ پیکسل و وزن 700 کن. پاراگراف .plain باید رنگ rgb(31, 41, 55) پایه را حفظ کند. هر دو پاراگراف باید در صفحه بمانند؛ کلاس‌ها را تغییر نده.

مطالعهٔ این گام برای همه آزاد است

برای پاسخ‌دادن، بررسی پاسخ، ثبت پیشرفت و استفاده از دستیار باید شرایط شرکت در فعالیت‌ها را داشته باشید.

برای انجام فعالیت‌ها ابتدا این دوره‌های پیش‌نیاز را تکمیل کنید:

<!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></head> <body> <p class="success">ذخیره شد</p><p class="plain">پیام معمولی</p> </body> </html>

فعالیت شما

مطالعهٔ این گام برای همه آزاد است

کد اولیهٔ فعالیت

ظاهر صفحه (CSS)