جالب است بدانید که تگ مربوط به کپشنِ یک عکس، پیشتر در html نبوده است. اما حالا هست و نکته جالبتر اینکه برای کپشن دار کردن جداول از آن استفاده می شود نه عکس ها! در فصل بعدی به جدولها خواهیم پرداخت. در حال حاضر روشی کاربردی و ساده برای کپشن عکس ها به شما پیشنهاد می دهیم که بر روی تمامی مرورگرها بدون مشکل عمل کند، در فصل 10 با نگاهی به بروزرسانی های صورت گرفته با html5 با تگ های جدید این مبحث را بازبینی خواهیم کرد.
1. در gallery.html پاراگراف های بسته و بازی که عکس لاکپشت را احاطه کرده اند را حذف کنید و به جای آن ها از تگ زیر استفاده کنید.
2. سپس بعد از عکس یک پاراگراف اضافه کنید(خاطرتان باشد حتما درون div این پاراگراف اضافه شود.) مانند زیر:
3. در آخر تگِ span-ای اطراف بخش photo credit ایجاد کرده تا بتوانیم آن را به شکلی دیگر style-دهی کنیم:
4. gallery.html را ذخیره کرده و نتیجه را در مرورگر مشاهده نمایید، باید با چیزی مشابه عکس 5.11 روبه رو شده باشید.
عکس 5.11: تصویر ما کپشن دارد، کپشنی style نشده
معمولا کپشن عکس ها با فونتی متفاوت نشان داده می شود، در اینجا می توان اندازه و ضخامت متن را تغییر داد، به نظر می رسد فاصله بین عکس و پاراگراف کپشن نیز اندکی زیاد باشد، با margin می توانیم این فاصله را تنظیم کنیم. در آخر هم می توانیم از یک جدا کننده مناسب استفاده کنیم تا در صورت اضافه شدن تصاویر بیشتر ظاهر کار را برای گالری ما حفظ کند.
1. style1.css را باز کرده و دستور css زیر را به آن اضافه کنید:
.galleryphoto p {
font-size: 65%;
font-weight: bold;
margin-top: 0;
width: 430px;
line-height: 1.4em;
}
این مارک-آپ تغییرات لازم را به فونت اضافه می کند، عرض کپشن را کاهش داده تا خواندنش ساده تر شود، فاصله بین عکس و پاراگراف را کم کرده و فواصل خالی بین خطوط پاراگراف را نیز برای ما کم می کند.
2. قانون جدیدی نیز برای photocredit class تعریف می کنیم:
.photocredit {
font-weight: normal;
color: gray;
}
این دستور تنها محتوای درون تگ span را هدف قرار می دهد.
راه دیگر اینست که شما می توانستید به جای تعریف کلاس photocredit و با استفاده از یک selector به هدف خود برسید، به کد زیر توجه کنید:
.galleryphoto p span {
font-weight: normal;
color: gray;
}
ترجمه دستور بالا اینگونه می باشد: برای هر span که درون یک p جای گرفته است، و آن تگِ p هم در یک المان قرار گرفته که کلاسِ galleryphoto بر آن اجرا می شود، فونت را ساده و خاکستری نشان بده. این روش را پیشنهاد دادیم تا در صورت نیاز به تعریف یک photocredit دیگر در سایت بتوانید با استفاده از selector آن را که در نظر دارید انتخاب کنید.
3. فایل css را ذخیره کنید، صفحه مرورگر خود را رفرش کرده و نتیجه کار را مشاهده نمایید، با عکس 5.12 چک کنید.
5.12: کپشنی جدید، بعد از اعمال قوانین style مورد نظر
به خاطر آورید که پیشتر اعمال حاشیه سفید چگونه به تمامی تصاویر موجود در سایت سرایت کرده بود، اما حالا تگِ img برای تصاویر گالری درون یک div جای گرفته که کلاسِ galleryphoto برایش تعریف شده است. پس حالا می توانیم این کلاس را در selector انتخاب کرده و به طور مستقیم هدف تغییرات خود قرار دهیم، تغییراتی از جمله تعریف حاشیه:
.galleryphoto img {
border: 15px solid white;
}
اگر تغییر بالا را به css اعمال کنید تنها تصاویر موجود در گالری حاشیه سفیدرنگ خواهند داشت. مشکل حل شد، css عالی است نه؟!
در آخر، به قانون .galleryphoto تغییراتی در رابطه با زیباسازی style اعمال می کنیم، هدف ما از این کار آن است که تغییرات را به div اعمال کرده تا به تمامی عکس ها و پاراگراف های موجود وارد شوند. این کلاس قرار است بین تصاویر زیادی که در سایت اضافه خواهند شد تمییز قائل شود و کار اعمال تغییرات جدید را برای ما ساده تر نماید.
1. کد زیر را به style1.css اضافه کنید:
.galleryphoto {
padding-bottom: 20px;
border-bottom: 1px solid navy;
margin-bottom: 10px;
}
2. css را ذخیره کرده و تغییرات را در مرورگر مشاهده نمایید:
عکس 5.13: در اینجا از جداکننده ای برای قرار دادن بین تصاویر استفاده کرده ایم.