این آموزش در تاریخ ۱۴۰۲/۰۶/۲۳ آپدیت شده است.
آموزش تگ details در HTML
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش تگ details در HTML با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
تگ Details در HTML
تگ details تگی است که با استفاده از آن میتوان یک باکس محتوا ( یعنی داخلش متن و.. میتونه قرار بگیره ) درست کرد، بعد وقتی روش کلیک میشه باکس باز و بسته میشه.
Free-Learn
مثال از تگ details در HTML
در ادامه میتوانید یک مثال از این تگ را مشاهده نمایید.
مثال شماره ۱ : استفاده از تگ details در حالت عادی بدون استایل
|
1 2 3 4 5 6 7 8 9 |
<body> <details> <summary>روی من کلیک کن</summary> <p>Salam Khobi?</p> <p>Man Sadegh Hastam</p> </details> </body> |
مثال شماره ۲ : استایل دادن به تگ details با استفاده از CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<body dir="rtl"> <details> <summary>اسم من چیه؟</summary> <p>سلام خوبی؟ من صادق هستم</p> </details> <details> <summary>من در کجا زندگی میکنم؟</summary> <p>من در شهر یاسوج از استان کهگیلویه و بویراحمد زندگی میکنم</p> </details> <details> <summary>سایت من اسمش چیه؟</summary> <p>سایت آموزشی فری لرن سایت آموزشی فری لرن سایت آموزشی فری لرن سایت آموزشی فری لرن سایت آموزشی فری لرن</p> </details> </body> |
Free-Learn
پشتیبانی مرورگرها
در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از تگ details در HTML پشتیبانی میکنند یا خیر.
| نام مرورگر | Chrome | Firefox | Opera | Safari | Edge |
| پشتیبانی | بله | بله | بله | بله | بله |
Free-Learn
جدول صفات تگ details در HTML
در جدول زیر میتوانید صفات بهمراه مقادیری را که میتوان در این تگ استفاده کرد را مشاهده نمایید.
| نام صفت | مقدار | توضیح |
|---|---|---|
| open | open | مشخص میکند که محتوای داخل باکس بصورت پیش فرض نمایش داده شود |
Free-Learn
پشتیبانی از صفات و رویدادهای عمومی
تگ details از صفات عمومی و رویدادهای عمومی در HTML پشتیبانی می کند.
Free-Learn
نکات و توضیحات
- با استفاده از تگ summary میتوان عنوان ( مثلا متن روی من کلیک کن ) را مشخص کرد، و با کلیک بروی آن باکس باز و بسته میشه.
- با استفاده از صفت open در تگ details میتوان باکس رو بصورت پیش فرض باز کرد.
Free-Learn
دستورات CSS پیش فرض
معمولا مرورگرها تگ details را بصورت پیش فرض با دستورات CSS زیر نمایش میدهند.
|
1 2 3 |
details { display: block; } |
