🔷 CSS درون‌خطی
استایل‌دهی مستقیم به یک تگ HTML با استفاده از ویژگی style.

• ✅ خاص‌ترین نوع CSS (اولویت بالاتر)
• ✅ فقط روی همان تگ اعمال می‌شود
• ✅ از property: value; استفاده می‌کند
• ✅ هر دستور با ; جدا می‌شود

✅ ویژگی style داخل تگ بازشونده

✅ property: value; ← دونقطه بین دستور و مقدار

✅ هر دستور با ; جدا می‌شود

تمرین ۱: کارت پروفایل

ایجاد یک کارت پروفایل با استفاده از Inline CSS

صورت مسئله

پاسخ تمرین ۱ – کد HTML با Inline CSS

<!– ===== پاسخ تمرین ۱: کارت پروفایل با Inline CSS ===== –>

<div style=“
max-width: 350px;
margin: 0 auto;
background: white;
padding: 25px;
border-radius: 15px;
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
text-align: center;
font-family: ‘Segoe UI’, Tahoma, sans-serif;
border: 1px solid #e0e0e0;
“>

  <img src=“https://randomuser.me/api/portraits/women/68.jpg”
      alt=“پروفایل”
      style=“
        width: 100px;
        height: 100px;
        border-radius: 50%;
        border: 4px solid #3498db;
        margin-bottom: 15px;
      “>

  <h2 style=“
    color: #2c3e50;
    font-size: 28px;
    margin-bottom: 10px;
  “>مریم منفرد</h2>

  <p style=“
    color: #7f8c8d;
    font-size: 18px;
    line-height: 1.6;
    margin-bottom: 20px;
  “>
    مدرس کامپیوتر و توسعه‌دهنده فرانت‌اند
  </p>

  <button style=“
    background: #2ecc71;
    color: white;
    border: none;
    padding: 12px 30px;
    border-radius: 25px;
    font-size: 18px;
    cursor: pointer;
    font-weight: bold;
  “>
    👤 مشاهده پروفایل
  </button>

</div>

تمرین ۲: باکس خبرنامه

ایجاد فرم خبرنامه با Inline CSS

صورت مسئله

پاسخ تمرین ۲ – کد HTML با Inline CSS

<!– ===== پاسخ تمرین ۲: باکس خبرنامه با Inline CSS ===== –>

<div style=“
max-width: 500px;
margin: 0 auto;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
padding: 35px;
border-radius: 20px;
box-shadow: 0 15px 35px rgba(102, 126, 234, 0.3);
text-align: center;
color: white;
border: 2px solid rgba(255,255,255,0.3);
“>

  <h2 style=“
    font-size: 32px;
    margin-bottom: 15px;
    color: white;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.2);
  “>
    📧 عضویت در خبرنامه
  </h2>

  <p style=“
    font-size: 18px;
    margin-bottom: 25px;
    opacity: 0.9;
  “>
    آخرین اخبار و مطالب آموزشی را دریافت کنید
  </p>

  <div style=“display: flex; gap: 10px;”>

    <input type=“email”
          placeholder=“ایمیل خود را وارد کنید”
          style=“
          flex: 1;
          padding: 15px;
          border: none;
          border-radius: 10px;
          font-size: 16px;
          outline: none;
          box-shadow: 0 5px 10px rgba(0,0,0,0.1);
          “>

    <button style=“
      background: #ff9f4b;
      color: white;
      border: none;
      padding: 15px 25px;
      border-radius: 10px;
      font-size: 18px;
      font-weight: bold;
      cursor: pointer;
      transition: all 0.3s;
      box-shadow: 0 5px 15px rgba(255,159,75,0.4);
      “
      onmouseover=“this.style.background=’#e67e22′”
      onmouseout=“this.style.background=’#ff9f4b'”>
      عضویت
    </button>

  </div>

</div>

• • اولویت بالاتر از سایر روش‌ها
• • مناسب برای تست سریع
• • استایل منحصربه‌فرد برای هر تگ
• • نیاز به فایل جداگانه ندارد

• • کد تکراری زیاد
• • نگهداری سخت
• • حجم کد بالا
• • عدم تفکیک محتوا از استایل

• • ایمیل‌های HTML
• • تست سریع استایل
• • پروژه‌های بسیار کوچک
• • ایمیل‌های خبرنامه