أهلاً بك في منتدى انكور التطويري

شرفتنا بحضورك لمنتدى انكور التطويري، المجتمع العربي للمحتوى المفيد والحصري حيث ستجد لدينا ما تحتاج لتزيد من معرفتك وخبراتك والمساحة الآمنة لنشر معرفتك ومشاركتها مع الاعضاء والزوار
تسجيل

فئات CSS الزائفة

Admin

Admin

مدير شركة انكور التطويرية
طاقم الإدارة
ادارة انكور
بسم الله الرحمن الرحيم



استكمالات للمفاهيم في دورة اكواد css اكمل معكم اليوم بشرح فئات css الزائفه وهو شرح جانبي لاستطيع الانتقال للدرس الثاني من الدورة

يتم استخدام فئة زائفة لتعريف حالة خاصة لعنصر.

على سبيل المثال ، يمكن استخدامه في:

- قم بتصميم عنصر عند تمرير المستخدم فوقه

- زارت ستايل الروابط غير المرغوبة بشكل مختلف

- قم بتصميم نمط عندما يحصل على التركيز

ieo10.png


تركيب الطبقات الزائفة:

كود: 
selector:pseudo-class {
  property: value;
}

ieo10.png


فصول المرساة الزائفة

يمكن عرض الروابط بطرق مختلفة:

كود: 
/* unvisited link */
a:link {
  color: #FF0000;
}

/* visited link */
a:visited {
  color: #00FF00;
}

/* mouse over link */
a:hover {
  color: #FF00FF;
}

/* selected link */
a:active {
  color: #0000FF;
}



ملاحظة: يجب أن يأتي a hover بعد الرابط: a و: تمت زيارته في تعريف CSS ليكون فعالًا! a: يجب أن يأتي النشط بعد a: hover في تعريف CSS لتكون فعالة! أسماء الفئة الزائفة ليست حساسة لحالة الأحرف.

ieo10.png


فئات زائفة وفصول CSS 

يمكن دمج الفئات الزائفة مع فئات CSS:

عندما تحوم فوق الرابط في المثال ، سوف يتغير لونه:

كود: 
a.highlight:hover {
  color: #ff0000;
}

ieo10.png


تأثير على

كود: 
div:hover {
  background-color: blue;
}

ieo10.png


تأثير تلميح بسيط

مرر مؤشر الماوس فوق عنصر لعرض عنصر
(مثل تلميح):

كود: 
p {
  display: none;
  background-color: yellow;
  padding: 20px;
}

div:hover p {
  display: block;
}

ieo10.png


CSS - الطفل الأول من فئة زائفة

يتطابق: - child-class pseudo-class مع عنصر محدد هو التابع الأول لعنصر آخر.



تطابق العنصر
الأول

في المثال التالي ، يتطابق المحدد مع أي عنصر
يمثل العنصر الفرعي الأول لأي عنصر:

كود: 
p:first-child {
  color: blue;
}

ieo10.png


تطابق عنصر الأول في جميع عناصر


في المثال التالي ، يطابق المحدد العنصر الأول في جميع عناصر
:

كود: 
p i:first-child {
  color: blue;
}

ieo10.png


تطابق جميع العناصر في جميع عناصر
الأولى

في المثال التالي ، يتطابق المحدِّد مع جميع العناصر في
العناصر التي هي العنصر الأول لعنصر آخر:

كود: 
p:first-child i {
  color: blue;
}

ieo10.png


CSS - The: lang Pseudo-class

يتيح لك: lang pseudo-class تحديد قواعد خاصة للغات مختلفة.

في المثال أدناه ، تحدد lang علامات الاقتباس لعناصر مع lang = "no":

كود: 
<html>
<head>
<style>
q:lang(no) {
  quotes: "~" "~";
}
</style>
</head>
<body>

<p>Some text <q lang="no">A quote in a paragraph</q> Some text.</p>

</body>
</html>



وسأضع بالمرفقات ملف وورد يتحوي على جميع كلاسات الفئة الزائفة وعناصرها 

ieo10.png


انتهى الشرح

بالتوفيق للجميع

اي استفسار لا تترد في طرحة

جميع الحقوق محفوظة لشركة انكور التطويرية

يمنع النقل دون ذكر المصدر

والسلام ختام ​


الملفات المرفقة : css - iinkor.docx,
 
يجب تسجيل الدخول أو التسجيل كي تتمكن من الرد هنا.

✔ نبذة عنا

منتدى انكور التطويري لدعم وتطوير المواقع والمنتديات والمحتوى العربي. نسعى للارتقاء في المحتوى العربي وتقديم الخدمات المتنوعة لأصحاب المواقع والمنتديات بأحدث الامكانيات والشروحات مجانًا.

🚀 روابط نصية

◃رابط نصي ◃رابط نصي ◃رابط نصي ◃رابط نصي

◃رابط نصي ◃رابط نصي ◃رابط نصي ◃رابط نصي

◃رابط نصي ◃رابط نصي ◃رابط نصي ◃رابط نصي

عودة
أعلى