خصوصیت content
مثال (خصوصیت content)
در این مثال URL هر لینک داخل یک پرانتز بعد از آن لینک قرار می گیرد:
a:after
{
content: " (" attr(href) ")";
}
خودتان امتحان کنید »{
content: " (" attr(href) ")";
}
تعریف و کاربرد
خاصیت content با ترکیب شبه عنصرهای after: و before: برای درج محتوا به کار می رود.
| مقدار پیشفرض | normal |
|---|---|
| ارث بری | خیر |
| نسخه | CSS2 |
| JavaScript ساختار | object.style.content="url(beep.wav)" |
پشتیبانی مرورگرها
تمام مرورگرهای اصلی، خصوصیت content را پشتیبانی می کنند.
توجه: IE8 به !DOCTYPE! نیاز دارد.
مقدارهای خصوصیت Content
| مقدار | توضیحات | مثال |
|---|---|---|
| none | اگر خصوصیت content تنظیم شده باشد، محتوای را خالی می کند. | خودتان امتحان کنید » |
| normal | اگر خصوصیت content تنظیم شده باشد، محتوای را به حالت معمول برمی گرداند که حالت پیش فرض "none" است. | خودتان امتحان کنید » |
| counter | یک شمارنده برای محتوای تنظیم می کند. | خودتان امتحان کنید » |
| attr(attribute) | محتوای را با مقدار یکی از ویژگی های عنصر انتخاب شده تنظیم می کند. | خودتان امتحان کنید» |
| string | محتوی را با یک متن تنظیم می کند. | خودتان امتحان کنید » |
| open-quote | در ابتدای محتوی یک کوتیشن نمایش می دهد. | خودتان امتحان کنید » |
| close-quote | در انتهای محتوی یک کوتیشن نمایش می دهد. | خودتان امتحان کنید » |
| no-open-quote | اگر برای ابتدای محتوای کوتیشن تنظیم شده باشد، آنرا حذف می کند. | خودتان امتحان کنید » |
| no-close-quote | اگر برای انتهای محتوای کوتیشن تنظیم شده باشد، آنرا حذف می کند. | خودتان امتحان کنید » |
| url(url) | یکی از انواع مدیاها را برای محتوای تنظیم می کند (عکس، صوت، ویدئو و ...) | خودتان امتحان کنید » |
| inherit | تعیین می کند که باید از والدش، ارث بری داشته باشد. |
بیاموزهای مرتبط
CSS Pseudo-element (بیاموز CSS)
CSS Pseudo-element (بیاموز CSS3)
- نوشته شده توسط امیر پهلوان صادق
- بازدید: 14775
دیدگاه‌ها
سلام آقای پهلوان من کاربرد این خصوصیت رو متوجه نشدم ولی توی Css خیلی کاربرد داره گاهی به صورت ".":content هم ظاهر میشود
اگر لطف کنید بیشتر در مورد این خصوصیت توضیح بدین ممنون میشم
سلام
استفاده از این خصوصیت بسیار ساده است. اگر به صفحه نخست سایت بیاموز مراجعه کنید و لینک های سمت چپ را مشاهده کنید، می بینید که برای ایجاد دو فلش کوچک قرمزرنگ (») در ابتدای لینک ها از همین خصوصیت یعنی content استفاده شده است ...!
اما خصوصیت content حتماً باید همراه با after: یا before: استفاده شود:
a:bef ore {
color: #FF4800;
content: "» ";
font-weight: bold;
}
شبه عنصر before: برای اضافه کردن یک محتوی دلخواه، قبل از یک عنصر استفاده می شود. برای کسب اطلاعات بیشتر در مورد شبه کلاس ها به لینک زیر مراجعه فرمایید:
beyamooz.com/css/87-advance/296