logo

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





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

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

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

ieo10
فصول المرساة الزائفة
يمكن عرض الروابط بطرق مختلفة:
CODE
/* unvisited link */<br />
a:link {<br />
&nbsp; color: #FF0000;<br />
}<br />
<br />
/* visited link */<br />
a:visited {<br />
&nbsp; color: #00FF00;<br />
}<br />
<br />
/* mouse over link */<br />
a:hover {<br />
&nbsp; color: #FF00FF;<br />
}<br />
<br />
/* selected link */<br />
a:active {<br />
&nbsp; color: #0000FF;<br />
}<br />
<br />


ملاحظة: يجب أن يأتي a hover بعد الرابط: a و: تمت زيارته في تعريف CSS ليكون فعالًا! a: يجب أن يأتي النشط بعد a: hover في تعريف CSS لتكون فعالة! أسماء الفئة الزائفة ليست حساسة لحالة الأحرف.
ieo10
فئات زائفة وفصول CSS
يمكن دمج الفئات الزائفة مع فئات CSS:
عندما تحوم فوق الرابط في المثال ، سوف يتغير لونه:
CODE
a.highlight:hover {<br />
&nbsp; color: #ff0000;<br />
}<br />
<br />

ieo10
تأثير على
CODE
div:hover {<br />
&nbsp; background-color: blue;<br />
}<br />
<br />

ieo10
تأثير تلميح بسيط
مرر مؤشر الماوس فوق عنصر لعرض عنصر [p] (مثل تلميح):
CODE
p {<br />
&nbsp; display: none;<br />
&nbsp; background-color: yellow;<br />
&nbsp; padding: 20px;<br />
}<br />
<br />
div:hover p {<br />
&nbsp; display: block;<br />
}<br />
<br />

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

تطابق العنصر [p] الأول
في المثال التالي ، يتطابق المحدد مع أي عنصر [p] يمثل العنصر الفرعي الأول لأي عنصر:
CODE
p:first-child {<br />
&nbsp; color: blue;<br />
}<br />
<br />

ieo10
تطابق عنصر [i] الأول في جميع عناصر [p]
في المثال التالي ، يطابق المحدد العنصر [i] الأول في جميع عناصر [p]:
CODE
p i:first-child {<br />
&nbsp; color: blue;<br />
}<br />
<br />

ieo10
تطابق جميع العناصر [i] في جميع عناصر [p] الأولى
في المثال التالي ، يتطابق المحدِّد مع جميع العناصر [i] في [p] العناصر التي هي العنصر الأول لعنصر آخر:
CODE
p:first-child i {<br />
&nbsp; color: blue;<br />
}<br />
<br />

ieo10
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>



وسأضع بالمرفقات ملف وورد يتحوي على جميع كلاسات الفئة الزائفة وعناصرها
ieo10
انتهى الشرح
بالتوفيق للجميع
اي استفسار لا تترد في طرحة
جميع الحقوق محفوظة للمشاهدة الروابط يلزمك التسجيل
يمنع النقل دون ذكر المصدر
والسلام ختام
 
 
  css - iinkor.docx   تحميل docx مرات التحميل :(1)
الحجم :(18.112) KB

توقيع :Admin
للتواصل مع الادارة بشأن اي موضوع : لمشاهدة الروابط يلزمك التسجيل



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

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




الكلمات الدلالية
فئات ، CSS ، الزائفة ،









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