logo

أهلا وسهلا بك زائرنا الكريم في أرشيف انكور، لكي تتمكن من المشاركة ومشاهدة جميع أقسام المنتدى وكافة الميزات ، يجب عليك إنشاء حساب جديد بالتسجيل بالضغط هنا أو تسجيل الدخول اضغط هنا إذا كنت عضواً .





27-06-2020 08:40 مساءً
معلومات الكاتب ▼
تاريخ الإنضمام : 15-01-2020
رقم العضوية : 1
المشاركات : 2235
الدولة : فلسطين
الجنس :
تاريخ الميلاد : 11-9-1998
الدعوات : 18
قوة السمعة : 440
موقعي : زيارة موقعي

بسم الله الرحمن الرحيم






في درس سابق شرحت ما هي الفئات الزائفة "الكلاسات الزائفة" وفي هذا الموضوع سأشرح لكم العناصر الزائفة
يتم استخدام عنصر CSS الزائف لتصميم أجزاء معينة من العنصر.
على سبيل المثال ، يمكن استخدامه في:
تصميم الحرف الأول ، أو السطر ، لعنصر
إدراج محتوى قبل أو بعد محتوى عنصر
ieo10
تركيب العناصر الزائفة:
CODE
selector::pseudo-element {<br />
&nbsp; property: value;<br />
}<br />
<br />

ieo10
العنصر ::first-line العنصر الزائف للسطر الأول
يستخدم العنصر الزائف first-line:: لإضافة نمط خاص إلى السطر الأول من النص.
ينسق المثال التالي السطر الأول من النص في جميع عناصر [p]:
CODE
p::first-line {<br />
&nbsp; color: #ff0000;<br />
&nbsp; font-variant: small-caps;<br />
}<br />
<br />


ملاحظة : لا يمكن تطبيق العنصر الزائف للخط الأول :: إلا على عناصر مستوى الكتلة.
ieo10
تنطبق الخصائص التالية على العنصر الزائف للخط الأول:
خصائص الخط
خصائص اللون
خصائص الخلفية
تباعد الكلمات
تباعد الحروف
زخرفة النص
محاذاة رأسية
تحويل النص
ارتفاع خط
الوضوح

لاحظ تدوين القولون المزدوج - :: السطر الأول مقابل: السطر الأول
استبدل القولون المزدوج ترميز القولون الفردي للعناصر الزائفة في CSS3. كانت هذه محاولة من W3C للتمييز بين الفئات الزائفة والعناصر الزائفة.
تم استخدام بناء الجملة أحادي القولون لكل من الفئات الزائفة والعناصر الزائفة في CSS2 و CSS1.
للتوافق مع الإصدارات السابقة ، يُعد بناء الجملة أحادي القولون مقبولًا للعناصر الزائفة CSS2 و CSS1.
ieo10
العنصر الأول: ::first-letter
يستخدم العنصر الزائف ::first-letter لإضافة نمط خاص للحرف الأول من النص.
ينسق المثال التالي الحرف الأول من النص في جميع عناصر [p]:
CODE
p::first-letter {<br />
&nbsp; color: #ff0000;<br />
&nbsp; font-size: xx-large;<br />
}<br />
<br />


ملاحظة: لا يمكن تطبيق العنصر الزائف للحرف الأول إلا على عناصر مستوى الكتلة.
ieo10
تنطبق الخصائص التالية على العنصر الزائف للحرف الأول:
خصائص الخط
خصائص اللون
خصائص الخلفية
خصائص الهامش
خصائص الحشو
خصائص الحدود
زخرفة النص
محاذاة رأسية (فقط إذا كانت كلمة "تعويم" هي "لا شيء")
تحويل النص
ارتفاع خط
تطفو
الوضوح
ieo10
العناصر الزائفة وفئات CSS
يمكن دمج العناصر الزائفة مع فئات CSS:
CODE
p.intro::first-letter {<br />
&nbsp; color: #ff0000;<br />
&nbsp; font-size: 200%;<br />
}<br />
<br />


سيعرض المثال أعلاه الحرف الأول من الفقرات مع class = "intro" ، باللون الأحمر وفي حجم أكبر.
ieo10
عناصر زائفة متعددة
يمكن أيضًا دمج العديد من العناصر الزائفة.
في المثال التالي ، سيكون الحرف الأول من الفقرة باللون الأحمر ، بحجم خط كبير جدًا. سيكون باقي السطر الأول باللون الأزرق وبأحرف صغيرة. سيكون باقي الفقرة حجم ولون الخط الافتراضي:
CODE
p::first-letter {<br />
&nbsp; color: #ff0000;<br />
&nbsp; font-size: xx-large;<br />
}<br />
<br />
p::first-line {<br />
&nbsp; color: #0000ff;<br />
&nbsp; font-variant: small-caps;<br />
}<br />
<br />

ieo10
CSS - العنصر الزائف ":: before"
يمكن استخدام العنصر الزائف ":: before" لإدراج بعض المحتوى قبل محتوى العنصر.
يدرج المثال التالي صورة قبل محتوى كل عنصر [h1]:
CODE
h1::before {<br />
&nbsp; content: url(smiley.gif);<br />
}<br />
<br />

ieo10
CSS - The :: after العنصر الزائف
يمكن استخدام العنصر :: after العنصر الزائف لإدراج بعض المحتوى بعد محتوى العنصر.
يدرج المثال التالي صورة بعد محتوى كل عنصر [h1]:
CODE
h1::after {<br />
&nbsp; content: url(smiley.gif);<br />
}<br />
<br />

ieo10
CSS - العنصر الزائف ":: selection"
يتطابق العنصر الزائف ":: select" مع جزء العنصر الذي حدده المستخدم.
يمكن تطبيق خصائص CSS التالية على ":: select:" اللون والخلفية والمؤشر والمخطط التفصيلي.
المثال التالي يجعل النص المحدد أحمر على خلفية صفراء:
CODE
::selection {<br />
&nbsp; color: red;<br />
&nbsp; background: yellow;<br />
}<br />
<br />


وستجد في الموضوع القديم عن الفئات او الكلاسات الزائفة مستند يحمل جميع العناصر الزائفة
ieo10
انتهى الشرح
بالتوفيق للجميع
جميع الحقوق محفوظة للمشاهدة الروابط يلزمك التسجيل
يمنع النقل دون ذكر المصدر
والسلام ختام
توقيع :Admin
للتواصل مع الادارة بشأن اي موضوع : لمشاهدة الروابط يلزمك التسجيل



look/images/icons/i1.gif عناصر CSS الزائفة
  24-07-2020 09:23 صباحاً   [1]
معلومات الكاتب ▼
تاريخ الإنضمام : 23-07-2020
رقم العضوية : 249
المشاركات : 161
الجنس :
تاريخ الميلاد : 27-10-1998
الدعوات : 1
قوة السمعة : 20
جزاك الله خير

موفق ان شاء الله

اضافة رد جديد اضافة موضوع جديد



المواضيع المتشابهه
عنوان الموضوع الكاتب الردود الزوار آخر رد
ليفربول ينوي الدفع بعناصره الأساسية في كل مباريات بريميرليج Basil Abdallah
1 239 Basil Abdallah
عناصر الوسط الحي. المجال المفاهيمي: الوسط الحي رقم المذكرة: 02 Basil Abdallah
0 244 Basil Abdallah
عناصر الوسط الحي. المجال المفاهيمي: الوسط الحي رقم المذكرة: 06 Basil Abdallah
0 121 Basil Abdallah
العلاقات القائمة بين عناصر الوسط الحي. المجال المفاهيمي: الوسط الحي رقم المذكرة: 07 Basil Abdallah
0 121 Basil Abdallah
عناصر المقالة Basil Abdallah
0 101 Basil Abdallah

الكلمات الدلالية
عناصر ، CSS ، الزائفة ،









الساعة الآن 08:30 PM