دليل CSS

قواعد CSS (RULES)

مجلة خصائص CSS

خصائص counter-increment CSS خصائص الأعمدة CSS3

استخدام خاصية content CSS و أمثلة

خصائص content CSS و ::before و ::afterالرموز المزيفةلإنشاء محتوى العنصر باستخدام التركيب.

الجدول التالي يوضح استخدام خاصية هذه الخاصية وتاريخ الإصدارات، بالإضافة إلى استخدام الخاصية في لغة الجافا سكربت.

القيمة الافتراضية:	normal
يستخدم لـ:	::before و ::after الرموز المزيفة
الوراثة:	لا يوجد
يمكن تحريكها:	لايرجى الرجوع إلى خصائص الرسوم المتحركة.
الإصدار:	CSS 2،3
جافا سكربت:	object.style.content="counter"

نحو استخدام خاصية content

نحو استخدام خاصية content كالتالي:

content: normal | none | counter | string | url(url) | attr(attribute) | open-quote | close-quote | no-open-quote | no-close-quote | initial | inherit

النموذج التالي يوضح كيفية استخدام خاصية content.

مثال

　　h1::before　{
　　　content: "Chapter: ";
　　　display: inline;
　　}

التحقق من‹/›

ملاحظة:display خصائص CSS تحكم في وضع محتوى الخاصية content في الصندوق المدمج أو الصندوق المدمج في النص.

قيمة الخاصية

يصف الجدول التالي قيم هذه الخاصية.

القيمة	الوصف
normal	لـ :before و :after الرموز المزيفة،لا يحسب أي قيمة. هذا هو القيمة الافتراضية.
none	المذكورةالرموز المزيفةلا ينتج.
counter	سيتم تعيين هذا القيمة لـ content كـ معادلة. لمزيد من المعلومات، يرجى الرجوع إلىcounter-resetوcounter-incrementالخصائص.
سلسلة	أدرج السلسلة المحددة (محتوى النص).
url(url)	تحديد المصدر الخارجي (مثل الصور) باستخدام قيمة url(). إذا لم يتم عرض المصدر أو الصورة، يتم تجاهلها أو عرض بعض العلامات الاستبدالية.
attr(attribute)	يضيف هذا الدالة قيمة الخاصية المحددة قبل أو بعد العنصر المحدد. إذا لم يكن لدي العنصر المحدد الخاصية المحددة، فإنه يضيف سلسلة فارغة. ملاحظة: 　 لا يجب استخدام العلامات المفتوحة في اسم الخاصية.
open-quote	أدرج العلامة الم不开قوائية. ستبدل هذه القيم بـ القيم المناسبة في الخاصية quotes.
close-quote	أدرج العلامة الم不开قوائية. ستبدل هذه القيم بـ القيم المناسبة في الخاصية quotes.
no-open-quote	لا يظهر العلامة المفتوحة، بل يزيد (يقلل) من مستوى التداخل من مستوى العلامات الم不开قوائية.
no-close-quote	لا يظهر العلامة الم不开قوائية، بل يزيد (يقلل) من مستوى التداخل من مستوى العلامات الم不开قوائية.
initial	ضع الخاصية هذه في قيمتها الافتراضية.
inherit	إذا تم تحديدها، فإن العنصر المرتبط يستخدم قيمة الخاصية content للعنصر الأب.

توافق المتصفح

مستوى التوافق للمتصفح الخاص بخصائص content، الأرقام في الجدول التالي تمثل أحدث إصدار من المتصفح يدعم هذه الخاصية. يدعم جميع المتصفحات الرئيسية هذه الخاصية.

	Firefox 1+ Google Chrome1+ Internet Explorer 8+ Apple Safari 1+ Opera 4+

تحذير: لا يدعم متصفح Internet Explorer 7 وأحدث إصداراته الخاص بخصائص content. يدعم IE8 فقطيدعم فقط عند تحديد قيمة صالحة.

قراءة متقدمة

يرجى الرجوع إلى الدروس التالية:الرموز المزيفة CSS.

خصائص مرتبطة:counter-reset,counter-increment.

خصائص counter-increment CSS خصائص الأعمدة CSS3