حالا می‌خوایم چند تصمیم کوچک درباره متن رو توی یک کارت جمع کنیم. بدنه کارت پس‌زمینه مشخص داره، عنوانش باید سریع دیده بشه و توضیحش برای خواندن چند سطر مناسب باشه. به‌جای یک قانون مشترک برای همه نوشته‌ها، نقش هر بخش رو با کلاس جدا بیان می‌کنیم. این کار بعداً تغییر ظاهر عنوان رو بدون دست‌زدن به توضیح ممکن می‌کنه.
در مثال، عنوان اطلاعیه رنگ مستقل داره ولی متن توضیح، ارتفاع خط مخصوص خودش رو می‌گیره. تمرین کارت یک عادت روزانه است و متن از قبل آماده شده. خطای رایج اینه که همه ویژگی‌ها رو روی ظرف بذاریم و انتظار داشته باشیم عنوان و توضیح با هم تفاوت پیدا کنن. ویژگی‌های متنی زیادی ارث می‌رسن، پس برای بخش‌های متفاوت قانون مشخص بنویس. این درس درباره چیدمان پیچیده نیست؛ تمرکز روی خوانایی، ترتیب بصری و محدودکردن انتخابگرهاست. یک خروجی خوب با تعداد کمی ویژگی روشن به دست میاد و نیازی به تغییر ساختار یا افزودن تصویر نداره.
✍️ مثال حل‌شده:
<aside class="alert"><h3>زمان کتابخانه</h3><p>هر عصر باز است.</p></aside>
<style>.alert { background-color: #eff6ff; } .alert h3 { color: navy; } .alert p { line-height: 26px; }</style>
حالا نوبت توئه: کارت .text-card باید زمینه white داشته باشد. عنوان h2 داخلش رنگ navy و اندازه ۲۴ پیکسل بگیرد؛ پاراگراف داخل کارت اندازه ۱۶ و line-height برابر ۲۸ پیکسل داشته باشد. ساختار عنوان و پاراگراف و متن آماده را نگه دار؛ قوانین را به همین کارت محدود کن.
فعالیت شما
کارت .text-card باید زمینه white داشته باشد. عنوان h2 داخلش رنگ navy و اندازه ۲۴ پیکسل بگیرد؛ پاراگراف داخل کارت اندازه ۱۶ و line-height برابر ۲۸ پیکسل داشته باشد. ساختار عنوان و پاراگراف و متن آماده را نگه دار؛ قوانین را به همین کارت محدود کن.