wesamdev

افلام هندية$type=sticky$count=4$show=home

$show=home

|روبوتات_$type=slider$source=random-posts$snippet=hide$cate=20$show=home

|اضافات بلوجر$type=three$m=0$rm=0$h=400$c=3$show=home

$show=home

wesamdev

الخاصية content في Css

ستكون القيمة هي normal دومًا إذا طُبِّقت هذه الخاصية على العناصر العادية.

الخاصية content في Css

الخاصيةcontent

بطاقة الخاصية



القيمة الابتدائية normal
تُطبَّق على العنصرين الزائفين ‎::before و ‎::after.
قابلة للوراثة لا
قابلة للحركة لا
القيمة المحسوبة ستكون القيمة هي normal دومًا إذا طُبِّقت هذه الخاصية على العناصر العادية.

وإذا كانت القيمة normal وطُبِّقَت على العنصرين الزائفين ‎::before و ‎::after فستكون القيمة المحسوبة هي none.

إذا استخدمنا روابط URL النسبية فستحوِّل إلى روابط مطلقة.

إذا استخدمنا الدالة attr(x)‎ فستحوِّل القيمة إلى سلسلة نصية.

فيما عدا ذلك، ستكون القيمة المحسوبة هي نفس القيمة المُحدَّدة.


/* كلمات محجوزة لا يمكن دمجها مع بقية القيم */
content:normal;
content:none;
/* <string> سلاسل نصية */
content:"prefix";
/* <url> روابط */
content:url("http://www.example.com/test.png");
/* <counter> قيم */
content:counter(chapter_counter);
content:counters(section_counter,".");
/* attr() HTML استخدام قيم خاصيات */
content:attr(valuestring);
/* كلمات محجوزة يختلف أثرها حسب الموضع أو اللغة */
content:open-quote;
content:close-quote;
content:no-open-quote;
content:no-close-quote;
/* يمكن استخدام أكثر من قيمة معًا */
content:open-quotechapter_counter;
/* القيم العامة */
content:inherit;
content:initial;
content:unset;


أمثلة


مثال على إضافة علامات اقتباس حول العنصر <q> وإضافة الكلمة Chapter قبل الترويسات:


<h1>5</h1>
<p>According to Sir Tim Berners-Lee,
 <qcite="http://www.w3.org/People/Berners-Lee/FAQ.html#Internet">I was
 حسوب مجموعة من شركات الانترنت تخدم المستخدمين العرب حول العالم. تدير حسوب أكبر منصتي عمل حر عربية وأكبر شبكة إعلانية في منطقة الشرق الأوسط وشمال أفريقيا، بالإضافة لمنتجات وشركات أخرى. توفّر حسوب حلولاً ومنتجات تساعد الشباب العرب على العمل والتطوّر وتتألّف من فريق عمل شاب وشغوف من مختلف الدول العربية.
</p>
<h1>6</h1>
<p>According to the Mozilla Manifesto,
 <qcite="http://www.mozilla.org/en-US/about/manifesto/">Individuals
 حسوب مجموعة من شركات الانترنت تخدم المستخدمين العرب حول العالم. تدير حسوب أكبر منصتي عمل حر عربية وأكبر شبكة إعلانية في منطقة الشرق الأوسط وشمال أفريقيا، بالإضافة لمنتجات وشركات أخرى. توفّر حسوب حلولاً ومنتجات تساعد الشباب العرب على العمل والتطوّر وتتألّف من فريق عمل شاب وشغوف من مختلف الدول العربية.
</p>


شيفرة CSS، لاحظ وجود فراغ بعد الكلمة Chapter لإضافة فاصل بينها وبين محتوى العنصر <h1>:

q{
 color:blue;
}
q::before{
 content:open-quote;
}
q::after{
 content:close-quote;
}
h1::before{
 content:"Chapter ";
}


هذا المثال سيضع نصًا إضافيًا بعد عناصر خاصة في القائمة:



<h2>في مهمة لتطوير العالم العربي</h2>
<ol>
 <li>مستقل</li>
 <liclass="new-entry">خمسات</li>
 <li>إعلانات حسوب</li>
 <liclass="new-entry">أكاديمية حسوب</li>
</ol

شيفرة CSS، لاحظ وجود فراغ قبل الكلمة New لفصلها عمّا قبله من المحتوى:



.new-entry::after{
 content:" New!";
 color:red;
}

أما هذا المثال فسيضيف صورةً قبل كل رابط، ويضع قيمة الخاصية id بعده:


 <ul>
 <li><aid="link1"href="http://example.com/">
 example.com</a></li>
 <li><aid="link2"href="https://example.org/">
 example.org</a></li>
</ul>


شيفرة CSS:


a{
 text-decoration:none;
 border-bottom:3pxdottednavy;
}
a::after{
 content:" ("attr(id)")";
}
#link1::before{
 content:url("favicon.ico");
}
#link2::before{
 content:url("image.png");
}
li{
 margin:1em;
}



دعم المتصفحات


الميزة Chrome Firefox Internet Explorer Opera Safari
الدعم الأساسي 1.0 1.0 8.0 7.0 1.0

البنية العامة


الخاصية content تقبل القيم الآتية.


none

لن يولّد عنصرٌ زائف (pseudo-element).

normal

هذه القيمة ستحوّل إلى none في العنصرين الزائفين ::before و ::after.

<string>

سلسلة نصية تحتوي على محرف أو أكثر.

<url>

يُشير رابط URL إلى مورد خارجي (مثل الصور)، وإذا لم يمكن المتصفح من عرض ذاك المورد، فإما أن سيتجاهله أو سيعرض محتوى بديل عنه.

<counter>

قيمة عداد في CSS، ويكون عادةً رقميًا، ويمكن عرضه باستخدام الدالة counter() أو الدالة counters()‎.

attr(x)

استخدام قيمة الخاصية x كسلسلة نصية، وإذا لم تكن تلك الخاصية موجودةً فستُعاد سلسلة نصية فارغة.

open-quote أو close-quote

ستُستبدَل هاتان القيمتان بما يناسبهما من السلاسل النصية المضبوطة في الخاصية quotes.

no-open-quote أو no-close-quote

لن تؤدي هاتان القيمتان إلى عرض علامات اقتباس، لكنهما ستؤديان إلى زيادة مستوى الاقتباس (level of nesting) في العنصر (انظر صفحة الخاصية quotes للتفاصيل).


البنية الرسمية



content:normal|none|[<content-replacement>|<content-list>][/<string>]?;

حيث:


<content-replacement>=<image>

wesam developer

إذا أعجبك المقال أو كان مفيدًا - ضع "أعجبني". اشترك في المدونة اوشارك برأيك في التعليقات! أراك لاحقا

COMMENTS

BLOGGER
الاسم

اخبار,45,اداة للكمبيوتر,7,اضافات بلوجر,88,افلام اجنبي,9,افلام روسية,32,افلام عربي مترجمة الي الروسية,1,افلام قديمة,2,افلام هندي,8,البرمجة,8,الجديد في التكنولوجيا,46,العاب,9,النمر,7,اليوتيوب,16,اندرويد,15,اندرويد استوديو,3,برامج كمبيوتر,11,بلوجر,8,تركيا,6,تصميم,3,تطبيقات,20,جافاسكريبت,3,حوادث,5,حول العالم,64,حيوانات,25,خلفيات,1,دروس HTML| بالعربية,2,روبوتات,7,روسيا,60,سياحة,4,سيارات,12,سياسة,16,شروحات,34,شريط الاخبار,1,صحتي,2,طائرات,22,فن,34,قناة الوعي نور,4,قناة قعدة تاريخ,8,قوالب بلوجر,3,كتب الكترونية,7,مالتي ميديا,6,متصفح,2,محليات,4,مسلسل لعبة الحبار,1,مسلسلات اجنبية,2,مسلسلات رمضان 2022,1,مسلسلات رمضان 2120,1,مصر والعرب,1,معدات حربية,34,معدات زراعية,6,مقالات,99,مواصلات النقل,1,مواقع للتصميم,14,وثائقي,14,وسوم بلوجر,2,ويندوز,15,Antivirus,3,Button,1,c++,1,css,37,HTML,11,wesam,2,
rtl
item
Wesam: الخاصية content في Css
الخاصية content في Css
ستكون القيمة هي normal دومًا إذا طُبِّقت هذه الخاصية على العناصر العادية.
https://1.bp.blogspot.com/-CgoszEP3hqs/YMRx3VzrInI/AAAAAAAAVlg/qKbCBpUS_zABvDhIyzbmOrHvLSNxSj4XgCLcBGAsYHQ/s16000/Black%2Band%2BRed%2BPhotocentric%2BCivil%2BSociety%2BGroup%2BProgress%2BReport%2BSustainable%2BDevelopment%2BGoals%2BPresentation%2B%25285%2529.png
https://1.bp.blogspot.com/-CgoszEP3hqs/YMRx3VzrInI/AAAAAAAAVlg/qKbCBpUS_zABvDhIyzbmOrHvLSNxSj4XgCLcBGAsYHQ/s72-c/Black%2Band%2BRed%2BPhotocentric%2BCivil%2BSociety%2BGroup%2BProgress%2BReport%2BSustainable%2BDevelopment%2BGoals%2BPresentation%2B%25285%2529.png
Wesam
https://www.wesamdev.com/2021/06/content-css.html
https://www.wesamdev.com/
https://www.wesamdev.com/
https://www.wesamdev.com/2021/06/content-css.html
true
1297279864306511161
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS PREMIUM CONTENT IS LOCKED STEP 1: Share to a social network STEP 2: Click the link on your social network Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy Table of Content