آموزش تگ details در HTML

14 شهریور 1401
ارسال شده توسط
آموزش html css

آموزش تگ details در HTML

دوست من سلام امیدوارم حالتون عالی و پر از انرژی باشید. توی این بخش از آموزش html css قراره که با آموزش تگ details در HTML به صورت کامل آشنا بشید.

تگ Details در HTML

تگ details تگی است که با بکار بردن آن در پروژه ی خود میتوانید یک باکس یا جعبه ی محتوا ( یعنی داخلش متن، مطلب و … میتونه قرار بگیره ) درست کنید. سپس زمانی که کلیک بر روی آن انجام بشود باکس باز و بسته می شود. به همین راحتی.

راستی اگر دنبال آموزش html css پروژه محور هستید می توانید از دوره ی آموزش وردپرس پوش استفاده کنید. جهت مشاهده ی 28 ساعت ویدیو آموزشی با پشتیبانی مادام العمر روی این لینک کلیک کنید.

مثال از تگ details در HTML

در ادامه ی آموزش html و css میتوانید یک مثال از این تگ را مشاهده کنید.

مثال شماره یک : استفاده از تگ details در حالت عادی بدون استایل

<body>
<details>
 <summary>روی من کلیک کن</summary>
 <p>Salam Khobi?</p>
 <p>Man Milad Hastam</p>
</details>
</body>

مثال شماره دو : استایل دادن به تگ details با استفاده از CSS

<style>
details summary{
 padding:10px;
 background-color:#eeeeee;
 border:none;
 cursor:pointer;
 border-top-left-radius:5px;
 border-top-right-radius:5px;
}
details p{
 background-color:#eeeeee;
 padding:10px;
 margin:0;
}
</style>

پشتیبانی مرورگرها

در جدولی که در پایین مشاهده می کنید به این نتیجه می رسید که آیا مرورگرهای اینترنتی از تگ details در HTML پشتیبانی میکنند یا خیر.

 

جدول پشتیبانی مرورگرها+وردپرس پوش

 

جدول صفات تگ details در HTML

در جدول زیر میتوانید مشاهده کنید که چه صفات و چه مقادیری را میتوان در این تگ استفاده کرد.

 

جدول صفات تگ details در HTML+وردپرس پوش

 

پشتیبانی از صفات و رویدادهای عمومی

تگ details قابلیت پشتیبانی از تمام صفات عمومی و رویدادهای عمومی در HTML دارد.

نکات و توضیحات

  • شما میتوانید عنوان یا تیتر مانند ( متن روی این لینک کلیک کنید ) را با استفاده از تگ summary مشخص کنید. و با کلیک کردن بر روی آن باکس باز و بسته شه.
  • با بکار بردن صفت open در تگ details میتوانید. باکس را بصورت تعریف شده باز کنید.

دستورات CSS پیش فرض

غالبا مرورگرها تگ details را بصورت پیش فرض با دستورات CSS زیر نمایش میدهند.

details {
  display: block;
}

توصیه ما به شما دوست عزیزم این است که با شرکت در دوره ی آموزشی html css در این موارد بسیار مهارت پیدا کنید.

 

برای امتیاز به این نوشته کلیک کنید!
[کل: 0 میانگین: 0]

در صورتی که مشکلی دارید و قادر به حل آن نیستید می توانید با ما در تماس باشید

فرم درخواست پشتیبانی (فرم زیر پست ها)

برچسب ها:

دیدگاهتان را بنویسید