الأحد، 9 مارس 2014

الدرس الخامس من دورة HTML

9:27 م  nabil40w  لاتوجد تعليقات

الخاصية الجد رائعة التي تستعمل في جزء التنسيق CSS



()nth-of-type

التعريف بالخاصية:
                      هي ميزة تساعد المصمم على التحكم في الوسوم ككل
<div></div> حسب التكويد والاسطر اذ نتحكم في ميزات الوسوم حسب رقم السطر ويستعمل خاصية من خصائص الاعداد الطبيعية فمثلا  تستغل ميزة العدد الزوجي والفردي
الفردي يرمزله بـــــ:(odd)
الزوجي يرمز له بــ:(even) 
مثال توضيحي:
النتيجة كل <div></div> في السطر الفردي ياخذ اللون الازرق
النتيجة كل <div></div> في السطر الزوجي ياخذ اللون الاحمر

لنأخذ مثالا أكثر تعمقا

نستعمل ميزة المجالات او يمن تسميتها ميزة القفز بمقدار معين ولنأخذ القيمة التالية(5n+0):

ويمكن تغيير العدد 0 الى عدد معين مثلا  (5n+1):



وهذا كود اثر تعقيدا كمثال عن استعمالاته:

<html>

<head>
<style>
h1{color:#00ffaa;}
div {
  border-radius:50%;
  position:absolute;
  top:50%; left:75%;
  
}
div:nth-of-type(odd) { background:black; }
div:nth-of-type(even) { background:white; border:2px solid black; }
div:nth-of-type(11) {
  height:10px; width:10px;
  margin-top:-5px; margin-left:-5px;
  -webkit-animation:slide 3s ease-in-out infinite;
  animation:slide 3s ease-in-out infinite;
}
div:nth-of-type(10) {
  height:20px; width:20px;
  margin-top:-12px; margin-left:-12px;
  -webkit-animation:slide 3s -2.7s ease-in-out infinite;
  animation:slide 3s -2.7s ease-in-out infinite;
}
div:nth-of-type(9) {
  height:40px; width:40px;
  margin-top:-20px; margin-left:-20px;
  -webkit-animation:slide 3s -2.4s ease-in-out infinite;
  animation:slide 3s -2.4s ease-in-out infinite;
}
div:nth-of-type(8) {
  height:60px; width:60px;
  margin-top:-32px; margin-left:-32px;
  -webkit-animation:slide 3s -2.1s ease-in-out infinite;
  animation:slide 3s -2.1s ease-in-out infinite;
}
div:nth-of-type(7) {
  height:80px; width:80px;
  margin-top:-40px; margin-left:-40px;
  -webkit-animation:slide 3s -1.8s ease-in-out infinite;
  animation:slide 3s -1.8s ease-in-out infinite;
}
div:nth-of-type(6) {
  height:100px; width:100px;
  margin-top:-52px; margin-left:-52px;
  -webkit-animation:slide 3s -1.5s ease-in-out infinite;
  animation:slide 3s -1.5s ease-in-out infinite;
}
div:nth-of-type(5) {
  height:120px; width:120px;
  margin-top:-60px; margin-left:-60px;
  -webkit-animation:slide 3s -1.2s ease-in-out infinite;
  animation:slide 3s -1.2s ease-in-out infinite;
}
div:nth-of-type(4) {
  height:140px; width:140px;
  margin-top:-72px; margin-left:-72px;
  -webkit-animation:slide 3s -0.9s ease-in-out infinite;
  animation:slide 3s -0.9s ease-in-out infinite;
}
div:nth-of-type(3) {
  height:160px; width:160px;
  margin-top:-80px; margin-left:-80px;
  -webkit-animation:slide 3s -0.6s ease-in-out infinite;
  animation:slide 3s -0.6s ease-in-out infinite;
}
div:nth-of-type(2) {
  height:180px; width:180px;
  margin-top:-92px; margin-left:-92px;
  -webkit-animation:slide 3s -0.3s ease-in-out infinite;
  animation:slide 10s -0.3s ease-in-out infinite;
}
div:nth-of-type(1) {
  height:200px; width:200px;
  margin-top:-100px; margin-left:-100px;
  -webkit-animation:slide 3s ease-in-out infinite;
  animation:slide 10s ease-in-out infinite;
}
@keyframes slide {
  0% { left:75% }
  50% { left:25%; }
  100% { left:75%; }
}
@-webkit-keyframes slide {
  0% { left:75% }
  50% { left:25%; }
  100% { left:75%; }
}
</style>
</head>
<body><div><h1>لا معبود بحق الا الله</h1></div><div><h1>ذو الجلال والاكرام</h1></div><div><h1>لا حول ولا قوة الا بالله</h1></div>
<div><h1>سبحان ربي العظيم</h1></div>
<div><h1>الواحد الاحد</h1></div>
<div><h1>سبحان الله</h1></div>
<div><h1>الحمد لله</h1></div>
<div><h1>الله اكبر</h1></div>
<div><h1>هو الغفور</h1></div>
<div><h1>هو الرحيم</h1></div>
</body>
</html>
انسخ الكود كما هو وقم بتشغيل ملفك الناتج وسترى النتيجة
للمزيد والتعمق اكثر اذهب الىالرابط التالي

انتظرونا هناك المزيد


بقلم نبيل مسعي

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

قسم :

0 التعليقات:

إرسال تعليق