خلاصه (summary)
«تگ summary» عنوانِ قابل کلیک برای «جزئیات (Details)» است. یعنی سرخطی می سازی و با کلیک، بخش مخفی باز و بسته می شود. «قابل کلیک (Clickable)» یعنی با ماوس یا کیبورد باز می شود. معمولاً همراهِ تگ details می آید.
تعریف و کاربرد تگ summary
تگ <summary> سرخطِ تگ details است. با آن می توان متنِ توضیحات را نمایش یا مخفی کرد. طبق منبع، اولین فرزند تگ details باید باشد.
مثال پایه با summary و details
<details>
<summary>Epcot Center</summary>
<p>Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.</p>
</details>
قوانین مهم ساختاری
<summary>اولین فرزند<details>باشد.- کلیک روی summary، جزئیات را باز و بسته می کند.
- برای گروه بندی پرسش وپاسخ ها عالی است.
نکته: معنی دار بنویس. عنوان summary کوتاه و واضح باشد.
استایل دهی ساده به summary
می توانی با CSS ظاهرِ summary و متنِ داخل details را تغییر دهی.
<html>
<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>
<body>
<details>
<summary>Epcot Center</summary>
<p>Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.</p>
</details>
</body>
</html>
ویژگی ها و رفتار پیش فرض
summary از «ویژگی های سراسری (Global Attributes)» و «رویدادها (Events)» پشتیبانی می کند. بیشتر مرورگرها آن را بلوکی رندر می کنند.
تمرین مرحله ای
- یک
<details>بساز. - داخلش یک
<summary>به عنوان عنوان بگذار. - یک پاراگراف توضیح هم اضافه کن.
لینک های مفید
صفحه مرتبط: تگ details، همچنین تگ sub و تگ sup برای شاخص ها.
جمع بندی سریع
- summary سرخطِ details است.
- باید اولین فرزند details باشد.
- کلیک، جزئیات را باز و بسته می کند.
- می توانی ظاهرش را با CSS عوض کنی.