<div style="height:4px; background:linear-gradient(90deg,#3182CE,#63B3ED); border-radius:999px;"></div>

<div style="height:4px; background:linear-gradient(90deg,#38A169,#68D391); border-radius:999px;"></div>

<div style="height:4px; background:linear-gradient(90deg,#DD6B20,#F6AD55); border-radius:999px;"></div>

<div style="height:4px; background:linear-gradient(90deg,#805AD5,#B794F4); border-radius:999px;"></div>

<div style="height:16px;"></div>
<div style="height:24px;"></div>

<

  




  
نمونه کد جداکننده آبی
  

<div style="background:#EBF8FF; padding:16px; border-radius:12px; margin:20px 0;" dir="rtl">
  <h3>۱) جداکننده آبی</h3>
  <div style="height:4px; background:linear-gradient(90deg,#3182CE,#63B3ED); border-radius:999px;"></div>
  <p>برای بخش‌های آموزشی عمومی.</p>
</div>
  


نمونه کد جداکننده سبز

<div style="background:#F0FFF4; padding:16px; border-radius:12px; margin:20px 0;" dir="rtl">
  <h3>۲) جداکننده سبز</h3>
  <div style="height:4px; background:linear-gradient(90deg,#38A169,#68D391); border-radius:999px;"></div>
  <p>برای تمرین‌ها و پروژه‌های عملی.</p>
</div>
  


نمونه کد جداکننده نارنجی

<div style="background:#FFFAF0; padding:16px; border-radius:12px; margin:20px 0;" dir="rtl">
  <h3>۳) جداکننده نارنجی</h3>
  <div style="height:4px; background:linear-gradient(90deg,#DD6B20,#F6AD55); border-radius:999px;"></div>
  <p>برای هشدارها یا نکات مهم.</p>
</div>
  


نمونه کد جداکننده بنفش

<div style="background:#FAF5FF; padding:16px; border-radius:12px; margin:20px 0;" dir="rtl">
  <h3>۴) جداکننده بنفش</h3>
  <div style="height:4px; background:linear-gradient(90deg,#805AD5,#B794F4); border-radius:999px;"></div>
  <p>برای معرفی خدمات <b>آموزشگاه کامپیوتر در غرب تهران</b>.</p>
</div>
  







    

    

    
    







 آموزش کامل تگ <div> و گرادیان CSS
تحلیل و توضیح خط کد: <div style="height:4px; background:linear-gradient(90deg,#805AD5,#B794F4); border-radius:999px;"></div>


            


 معرفی کد


                         کد مورد بررسی:
                    

<div style="height:4px; background:linear-gradient(90deg,#805AD5,#B794F4); border-radius:999px;"></div>
                    


نمایش بصری کد:
                    

نتیجه: یک نوار افقی با گرادیان بنفش و گوشه‌های گرد


            

 بخش ۱: تگ <div> چیست؟

 تعریف تگ div
<div> مخفف Division به معنی "بخش" یا "تقسیم" است. این تگ یک عنصر بلوک-سطح (Block-level) در HTML می‌باشد.


 ویژگی‌های اصلی div

عنصر خنثی: خودش هیچ ظاهر خاصی ندارد
بلوک-سطح: به صورت پیش‌فرض کل عرض را می‌گیرد
کانتینر عمومی: برای گروه‌بندی عناصر استفاده می‌شود
بدون معنای: برخلاف <header>, <nav>, <section>





ویژگی
توضیح
مثال




نوع نمایش
بلوک (block)
display: block


عرض پیش‌فرض
۱۰۰٪ عرض والد
width: 100%


ارتفاع پیش‌فرض
بر اساس محتوا (یا ۰ اگر خالی)
height: auto


کاربرد اصلی
گروه‌بندی و استایل‌دهی
<div class="container">




            

 بخش ۲: ساختار کد


                         تجزیه ساختار:
                    

<!-- ساختار کلی -->

<div                                        <!-- 1. تگ باز کردن -->

    style=""                      <!-- 2. ویژگی استایل -->

>

                                                  <!-- 3. محتوا (در اینجا خالی است) -->

</div>                                     <!-- 4. تگ بستن -->
                    


 چهار بخش اصلی:

تگ شروع: <div> - آغاز عنصر
ویژگی‌ها: style="" - استایل درون خطی
محتوا: (خالی) - بین تگ‌های باز و بسته
تگ پایان: </div> - پایان عنصر



                         نکته مهم
                    
تگ‌های HTML معمولاً به صورت جفت می‌آیند (تگ باز و بسته). تگ‌های بدون محتوا مثل <img> استثنا هستند.


            

 بخش ۳: ویژگی height


                         ارتفاع عنصر:
                    

height:4px;

// تنظیم ارتفاع عنصر به ۴ پیکسل
                    


مقایسه ارتفاع‌های مختلف:

height: 2px

height: 4px (مثال اصلی)

height: 8px


 واحدهای اندازه‌گیری height

px: پیکسل (ثابت) - height: 4px
%: درصد - height: 50%
vh: درصد ارتفاع ویوپورت - height: 10vh
em: نسبت به فونت والد - height: 2em
rem: نسبت به فونت ریشه - height: 1.5rem


            

 بخش ۴: گرادیان (Gradient)


                         گرادیان خطی:
                    

background: linear-gradient(90deg, #805AD5, #B794F4);

// گرادیان خطی با زاویه ۹۰ درجه از رنگ #۸۰۵AD5 به #B794F4
                    


 ساختار linear-gradient()

linear-gradient(

    زاویه,

    رنگ-شروع,

    رنگ-پایان

)
                    


گرادیان‌های مختلف:

۹۰deg (چپ به راست)

۰deg (پایین به بالا)

۴۵deg (مورب)

سه رنگ (رنگ سوم اضافه شد)





زاویه
جهت
مقدار جایگزین




۰deg
پایین به بالا
to top


۹۰deg
چپ به راست
to right


۱۸۰deg
بالا به پایین
to bottom


۲۷۰deg
راست به چپ
to left





                         نکته رنگ‌ها
                    
#۸۰۵AD5 = بنفش تیره • #B794F4 = بنفش روشن
کدهای HEX شش رقمی هستند: #RRGGBB (قرمز-سبز-آبی)


            

 بخش ۵: border-radius


                         گرد کردن گوشه‌ها:
                    

border-radius: 999px;

// مقدار بسیار بزرگ برای ایجاد گوشه‌های کاملاً گرد
                    


مقادیر مختلف border-radius:

border-radius: 0 (مربع)

border-radius: 10px

border-radius: 50% (برای دایره)

border-radius: 999px (مثال اصلی)


 چرا ۹۹۹px؟
مقدار ۹۹۹px یک ترفند CSS است. چون مقدار بسیار بزرگی است، باعث می‌شود:

تمام گوشه‌ها کاملاً گرد شوند
برای عناصر مستطیلی، دو انتها نیم‌دایره می‌شوند
معادل border-radius: 50% اما برای عناصر غیرمربعی



                         توجه
                    
استفاده از border-radius: 50% برای عناصر مستطیلی بیضی ایجاد می‌کند، اما border-radius: 999px برای هر عنصری نیم‌دایره کامل ایجاد می‌کند.


            

 بخش ۶: کاربردهای عملی

 موارد استفاده رایج

نوار پیشرفت (Progress Bar)
خط جداکننده زیبا (Divider)
نشانگر اسکرول
عنصر تزئینی در هدر
خط زیر منوها
نشانگر مرحله‌ای (Stepper)


نمونه‌های کاربردی:

نوار پیشرفت:



خط جداکننده:

دکمه با افکت:
                        

                            دکمه با گرادیان

                        
                    


 نسخه پیشرفته‌تر
می‌توانیم کد را توسعه دهیم تا قابلیت‌های بیشتری داشته باشد:

<div class="gradient-line" data-width="80%">

  <div class="gradient-fill"></div>

</div>

<style>

  .gradient-line {

    height: 6px;

    background: #e2e8f0;

    border-radius: 999px;

    overflow: hidden;

  }

  

  .gradient-fill {

    height: 100%;

    width: attr(data-width);

    background: linear-gradient(90deg, #805AD5, #B794F4);

    border-radius: 999px;

    transition: width 0.5s ease;

  }

</style>
                    


            

 بخش ۷: جمع‌بندی

 خلاصه آموخته‌ها

تگ <div>: عنصر بلوک-سطح برای گروه‌بندی
ویژگی style: استایل درون خطی (inline)
height: 4px: ارتفاع ۴ پیکسل
linear-gradient(): گرادیان خطی با دو رنگ
۹۰deg: جهت گرادیان (چپ به راست)
border-radius: 999px: گوشه‌های کاملاً گرد
نتیجه نهایی: نوار افقی با گرادیان بنفش



                         تمرین عملی
                    
سعی کنید کد را تغییر دهید:

ارتفاع را به ۸px تغییر دهید
گرادیان را به رنگ‌های دیگر (مثلا آبی به سبز) تغییر دهید
زاویه گرادیان را به ۴۵deg تغییر دهید
border-radius را به ۲۰px کاهش دهید
یک رنگ سوم به گرادیان اضافه کنید


نتیجه نهایی کد اصلی:


                        این یک نوار تزئینی است که می‌تواند به عنوان جداکننده، نشانگر پیشرفت یا عنصر زیباسازی استفاده شود.