سبد (0)

خصوصیت content

مثال (خصوصیت content)

در این مثال URL هر لینک داخل یک پرانتز بعد از آن لینک قرار می گیرد:

a:after
{
content: " (" attr(href) ")";
}
خودتان امتحان کنید »

تعریف و کاربرد

خاصیت content با ترکیب شبه عنصرهای after: و before: برای درج محتوا به کار می رود.

مقدار پیشفرض normal
ارث بری خیر
نسخه CSS2
JavaScript ساختار object.style.content="url(beep.wav)"

پشتیبانی مرورگرها

Internet Explorer Firefox Opera Google Chrome Safari

تمام مرورگرهای اصلی، خصوصیت 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)

دیدگاه‌ها  

+1 # محمد قربانی 1394-01-03 15:14
سلام آقای پهلوان من کاربرد این خصوصیت رو متوجه نشدم ولی توی Css خیلی کاربرد داره گاهی به صورت ".":content هم ظاهر میشود

اگر لطف کنید بیشتر در مورد این خصوصیت توضیح بدین ممنون میشم
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+3 # امیر پهلوان صادق 1394-01-05 12:14
سلام
استفاده از این خصوصیت بسیار ساده است. اگر به صفحه نخست سایت بیاموز مراجعه کنید و لینک های سمت چپ را مشاهده کنید، می بینید که برای ایجاد دو فلش کوچک قرمزرنگ (») در ابتدای لینک ها از همین خصوصیت یعنی content استفاده شده است ...!
اما خصوصیت content حتماً باید همراه با after: یا before: استفاده شود:
a:bef ore {
color: #FF4800;
content: "» ";
font-weight: bold;
}

شبه عنصر before: برای اضافه کردن یک محتوی دلخواه، قبل از یک عنصر استفاده می شود. برای کسب اطلاعات بیشتر در مورد شبه کلاس ها به لینک زیر مراجعه فرمایید:
http://beyamooz.com/css/87-advance/296
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
تمامی محصولات و خدمات این وبسایت، حسب مورد دارای مجوزهای لازم از مراجع مربوطه می‌باشند و فعالیت‌های این سایت تابع قوانین و مقررات جمهوری اسلامی ایران است.
logo-samandehi مجوز نشر دیجیتال از وزرات فرهنگ و ارشاد اسلامی پرداخت آنلاین -  بانک ملت معرفی بیاموز در شبکه سه پرداخت آنلاین - بانک اقتصاد نوین پرداخت آنلاین - بانک سامان