11
0
تگ summary در HTML
نوشته شده توسط متین برونسی
منتشر شده در
و آخرین بروزرسانی در
دسته بندی ها:
تگ summary در HTML درون عنصر <details> قرار میگیرد و نام یا عنوان این عنصر را مشخص می کند.
مثال
<details>
<summary>فیزیک کوانتوم</summary>
<p>مکانیک کوانتومی (به انگلیسی: Quantum mechanics) شاخه‌ای بنیادی از فیزیک نظری است که با پدیده‌های فیزیکی در مقیاس میکروسکوپی سر و کار دارد. </p>
</details>تعریف و کاربرد
تگ summary در HTML درون تگ <details> جهت مشخص کردن یک نام یا عنوان برای عنصر <details> مورد استفاده قرار میگیرد.
نکته: تگ <summary> باید اولین عنصر فرزند تگ <details> باشد.
پشتیبانی مرورگر ها
اعداد موجود در جدول اولین نسخه مرورگر را مشخص می کنند که به طور کامل عنصر را پشتیبانی می کند.
| عنصر | |||||
|---|---|---|---|---|---|
<summary> | 12.0 | 79.0 | 49.0 | 6.0 | 15.0 |
تنظیمات پیش فرض CSS
اکثر مرورگر ها عنصر summary در HTML را با تنظیمات پیش فرض زیر نمایش می دهند:
summary {
display: block;
}مثال های بیشتر
<!DOCTYPE html>
<html dir="rtl">
<head>
<style>
details > summary {
padding: 4px;
width: 200px;
background-color: #eeeeee;
border: none;
box-shadow: 1px 1px 2px #bbbbbb;
cursor: pointer;
}
details > p {
background-color: #eeeeee;
padding: 4px;
margin: 0;
box-shadow: 1px 1px 2px #bbbbbb;
}
</style>
</head>
<body>
<h1>عناصر details و summary به همراه CSS</h1>
<details>
<summary>روی من کلیک کن !</summary>
<p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد، کتابهای زیادی در شصت و سه درصد گذشته حال و آینده، شناخت فراوان جامعه و متخصصان را می طلبد، تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی، و فرهنگ پیشرو در زبان فارسی ایجاد کرد، در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها، و شرایط سخت تایپ به پایان رسد و زمان مورد نیاز شامل حروفچینی دستاوردهای اصلی، و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.</p>
</details>
</body>
</html>
پست های مرتبط
ارسال یک نظر
برای نوشتن دیدگاه باید وارد بشوید.