بسم الله الرحمن الرحيم
استكمالات للمفاهيم في دورة اكواد css اكمل معكم اليوم بشرح فئات css الزائفه وهو شرح جانبي لاستطيع الانتقال للدرس الثاني من الدورة
يتم استخدام فئة زائفة لتعريف حالة خاصة لعنصر.
على سبيل المثال ، يمكن استخدامه في:
- قم بتصميم عنصر عند تمرير المستخدم فوقه
- زارت ستايل الروابط غير المرغوبة بشكل مختلف
- قم بتصميم نمط عندما يحصل على التركيز
تركيب الطبقات الزائفة:
CODE نسخ الكود
selector:pseudo-class {<br />
property: value;<br />
}<br />
<br />
فصول المرساة الزائفة
يمكن عرض الروابط بطرق مختلفة:
CODE نسخ الكود
/* unvisited link */<br />
a:link {<br />
color: #FF0000;<br />
}<br />
<br />
/* visited link */<br />
a:visited {<br />
color: #00FF00;<br />
}<br />
<br />
/* mouse over link */<br />
a:hover {<br />
color: #FF00FF;<br />
}<br />
<br />
/* selected link */<br />
a:active {<br />
color: #0000FF;<br />
}<br />
<br />
ملاحظة: يجب أن يأتي a hover بعد الرابط: a و: تمت زيارته في تعريف CSS ليكون فعالًا! a: يجب أن يأتي النشط بعد a: hover في تعريف CSS لتكون فعالة! أسماء الفئة الزائفة ليست حساسة لحالة الأحرف.
فئات زائفة وفصول CSS
يمكن دمج الفئات الزائفة مع فئات CSS:
عندما تحوم فوق الرابط في المثال ، سوف يتغير لونه:
CODE نسخ الكود
a.highlight:hover {<br />
color: #ff0000;<br />
}<br />
<br />
تأثير على
CODE نسخ الكود
div:hover {<br />
background-color: blue;<br />
}<br />
<br />
تأثير تلميح بسيط
مرر مؤشر الماوس فوق عنصر لعرض عنصر [p] (مثل تلميح):
CODE نسخ الكود
p {<br />
display: none;<br />
background-color: yellow;<br />
padding: 20px;<br />
}<br />
<br />
div:hover p {<br />
display: block;<br />
}<br />
<br />
CSS - الطفل الأول من فئة زائفة
يتطابق: - child-class pseudo-class مع عنصر محدد هو التابع الأول لعنصر آخر.
تطابق العنصر [p] الأول
في المثال التالي ، يتطابق المحدد مع أي عنصر [p] يمثل العنصر الفرعي الأول لأي عنصر:
CODE نسخ الكود
p:first-child {<br />
color: blue;<br />
}<br />
<br />
تطابق عنصر [i] الأول في جميع عناصر [p]
في المثال التالي ، يطابق المحدد العنصر [i] الأول في جميع عناصر [p]:
CODE نسخ الكود
p i:first-child {<br />
color: blue;<br />
}<br />
<br />
تطابق جميع العناصر [i] في جميع عناصر [p] الأولى
في المثال التالي ، يتطابق المحدِّد مع جميع العناصر [i] في [p] العناصر التي هي العنصر الأول لعنصر آخر:
CODE نسخ الكود
p:first-child i {<br />
color: blue;<br />
}<br />
<br />
CSS - The: lang Pseudo-class
يتيح لك: lang pseudo-class تحديد قواعد خاصة للغات مختلفة.
في المثال أدناه ، تحدد lang علامات الاقتباس لعناصر <q> مع lang = "no":
CODE نسخ الكود
<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>
وسأضع بالمرفقات ملف وورد يتحوي على جميع كلاسات الفئة الزائفة وعناصرها
انتهى الشرح
بالتوفيق للجميع
اي استفسار لا تترد في طرحة
جميع الحقوق محفوظة ل
لمشاهدة الروابط يلزمك التسجيل
يمنع النقل دون ذكر المصدر
والسلام ختام
docx
مرات التحميل :(1 )
فئات CSS الزائفة
24-07-2020 09:29 صباحاً
[
1 ]
معلومات الكاتب ▼
تاريخ الإنضمام :
23-07-2020
رقم العضوية :
249
المشاركات :
161
الجنس :
تاريخ الميلاد :
27-10-1998
الدعوات :
1
قوة السمعة :
20
اضافة رد جديد
اضافة موضوع جديد
Copyright © 2009-2026
PBBoard ® Solutions. All Rights Reserved
فئات CSS الزائفة
