پروژه CSS؛ بخش درباره من و برچسب مهارت‌های قابل استفاده دوباره

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

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

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

<section class="bio"><h2>مینا، مترجم</h2><p>روی متن‌های آموزشی کار می‌کنم.</p><span class="skill">ترجمه</span><span class="skill">ویرایش</span></section>
<style>.bio p { line-height:26px; } .skill { display:inline-block; padding:4px 10px; border-radius:6px; }</style>

حالا نوبت توئه: بخش #about با کلاس .about باید زمینه white و padding:20px داشته باشد. توضیح .bio باید font-size:16px و line-height:28px بگیرد. ظرف .skills با display:flex و gap:8px و هر .skill با border-radius:6px و padding:6px 10px ساخته شود. سه مهارت HTML، CSS و یادگیری و عنوان آماده را نگه دار.

فعالیت شما

بخش #about با کلاس .about باید زمینه white و padding:20px داشته باشد. توضیح .bio باید font-size:16px و line-height:28px بگیرد. ظرف .skills با display:flex و gap:8px و هر .skill با border-radius:6px و padding:6px 10px ساخته شود. سه مهارت HTML، CSS و یادگیری و عنوان آماده را نگه دار.

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

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

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

<!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> <section id="about" class="about"><h1>سارا احمدی، طراح وب</h1><p class="bio">دارم ساخت صفحه‌های ساده و خوانا را تمرین می‌کنم.</p><div class="skills"><span class="skill">HTML</span><span class="skill">CSS</span><span class="skill">یادگیری</span></div></section> </body> </html>

body{margin:0;padding:16px;font-family:Tahoma,Arial,sans-serif;direction:rtl;color:#1f2937;background:#f3f4f6}*{box-sizing:content-box} .about{/* زمینه و فاصله */}.bio{/* اندازه و ارتفاع خط */}.skills{/* چیدمان گروه */}.skill{background-color:#dbeafe;/* شکل برچسب */}

فعالیت شما

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

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

ظاهر صفحه (CSS)