درس 32 ارومیا دیزاین: شبه عناصر CSS و before و after
1. ZIP را استخراج و index.html را در مرورگر باز کنید؛ نصب و اینترنت لازم نیست.
2. کنار عنوان اول دایره و زیر آن خط کوتاه را ببینید؛ هر دو تزئینی هستند.
3. با ماوس و با Tab و Shift+Tab پیوندهای خدمات را آزمایش کنید؛ رنگ خط عوض می شود و حلقه فوکوس باقی می ماند.
4. با Enter مقصد پیوند را باز کنید؛ هر دو مقصد واقعی در همین صفحه وجود دارند.
5. در style.css به طور موقت content مربوط به .decorated::before را حذف کنید؛ دایره نباید ساخته شود. سپس آن را برگردانید.
6. با ابزار Inspect مرورگر بخش ::before و ::after عنوان را بررسی کنید؛ در HTML تگ مستقلی برای آنها ننوشته ایم.
7. تمرین: فقط عنوان های h3 داخل .exercise را هدف بگیرید؛ مربع 12px با فاصله 8px قبل عنوان و خط 3rem در ارتفاع 4px بعد عنوان بسازید.
8. پاسخ داخل solution.css است و از ابتدا فعال نیست. برای فعال کردن، بعد از لینک style.css این خط را در head بگذارید:
<link rel="stylesheet" href="solution.css">
9. صفحه را بارگذاری مجدد کنید؛ هر دو عنوان کارت باید تزئین شوند، اما عنوان بخش تمرین نباید تغییر کند.
10. معنی خدمات، متن عنوان و نام پیوند در HTML هستند؛ اطلاعات ضروری را با content تولید نکنید.
11. برای آزمایش جهت، dir="rtl" را موقتاً به dir="ltr" تغییر دهید؛ margin-inline-end با جهت متن هماهنگ می شود.
12. تمام اعداد کدهای HTML و CSS انگلیسی هستند.
