آموزش تگ details در HTML

آموزش تگ 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 دارد.
نکات و توضیحات
- شما میتوانید عنوان یا تیتر مانند ( متن روی این لینک کلیک کنید ) را با استفاده از تگ summary مشخص کنید. و با کلیک کردن بر روی آن باکس باز و بسته شه.
- با بکار بردن صفت open در تگ details میتوانید. باکس را بصورت تعریف شده باز کنید.
دستورات CSS پیش فرض
غالبا مرورگرها تگ details
را بصورت پیش فرض با دستورات CSS زیر نمایش میدهند.
details { display: block; }
توصیه ما به شما دوست عزیزم این است که با شرکت در دوره ی آموزشی html css در این موارد بسیار مهارت پیدا کنید.
در صورتی که مشکلی دارید و قادر به حل آن نیستید می توانید با ما در تماس باشید
دیدگاهتان را بنویسید