كل ما تحتاج معرفته عن خورزمية css

 في تدوينة لي سابقة  قمت بشرح كيفيت بناء  صفحة ويب متجاوبة  مع جميع احجام الاجهزة  (الحاسوب  ،  اللوح الالكتروني، الهواتف) ،  وطريقة الاستغناء عن  المكتبات التقليدية  للويب المتجاوب ك(البوتسراب ،والبيور ) وبالاخص ان  كانت تلك  المكتبة تعيق تقدم موقعك  وبل تجعله ابطأ   اثناء  التحميل للاعضاء ... 

الخورزميات بشكل اساسي اتت  لتحل مشاكل متعددة وافضلها  التي تختصر الوقت والجهد  في css  تجد المصمم يستهل الكثير من الوقت  بالاخص  ان  كان  الموقع  به  عدة  متطلبات مختلفة قد  يستهلك تزيين الموقع اكثر من الجهد والوقت من برمجته  ،  اتت css3 بفكرة رائعة  عن الثوريث من خلال  الاعداد الفردية والزوجية  بما يسمى ب nth-child   ل odd  and even 

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

بناء صفحة ويب متجاوب مع اجهزة الهواتف بدون البوت ستراب

NTH-CHILD

سأخذ على سبيل  المثال قوائم  واطبق عليها  nth-child  . 








الكود الذي يهمنا  في  الشرح  

li:nth-child(6span {
    background-color#298EB2;
    box-shadow-3px -3px 10px rgba(0000.4), inset 0 0 10px black;
}



ستلاحظ  انه كلما غيرت القيمة 6 فانك تتحكم بشكل  كبير  في القائمة التي تريد  تطبيق  الستايل  المعين عليها  بدون الحاجة الى تطبيقه  على الجميع  او  انك  تريد  تطبيق ستايل محدد على  قوائم  محددة  دون القوائم  الاخرى في  الطريقة القديمة  تحتاج  الى اعطاء ايدي معرف او كلاس محددة لكي تقوم بالمهمة  الان  انت تقوم بها من خلال كود   واحد او سطر واحد يكفي  ، الخانة F تم  تغيير  لونها  على باقي الخانات جرب ان تغير من قيمة القوائب لكن بشرط  القيمة  يجب ان  تكون بتعداد القوائم 


أنواع النطاقات الخاصة ب nth-child


النطاق  الاجابي nth-child


li:nth-child(n+6) span {
    background-color: #298EB2;
    box-shadow: inset -3px -3px 10px rgba(0, 0, 0, 0.4), 0 0 10px black;
}



قم بوض N+ وستلاحظ  ان القوائم  الملونة  هي  اخر  ستة قوائم  فهذه الخاصة  تطبق  الستايل على اول قيمة  عددية  وما  بعدها  

النطاق  السلبي nth-child

li:nth-child(-n+7span {
    background-color#298EB2;
    box-shadow-3px -3px 10px rgba(0000.4), inset 0 0 10px black;
}



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


تحديد  نطاق nth-child

li:nth-child(n+3):nth-child(-n+6span {
    background-color#298EB2;
    box-shadow-3px -3px 10px rgba(0000.4), inset 0 0 10px black;
}



في هذا  النطاق قمنا بتطبيق  الستايل على  المساحة  المحصورة بين  الرقم 3  والرقم 6  اي  (c d e f) هذه القوائم  طبيق عليها الستايل  دون القوائم  الاخرى   انت  تتحكم بشكل كبير  وبكل  اريحة في هذا الستايل بدون  اللجوء  الى الطريقة التقليدية  التي تستهلك  من وقتك الكثير 

تخصيص نطاق من  نوع  تعداد فردي محصور بين قيمتين 

li:nth-child(n+3):nth-child(odd):nth-child(-n+10span {
    background-color#298EB2;
    box-shadow-3px -3px 10px rgba(0000.4), inset 0 0 10px black;
}



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

اذا ما قمت  بوضع الكود التالي  على  السورس سيقوم  تلقائيا  بالقفز ب3 مراحل ويطبق  الستايل 
li:nth-child(3n+1span {
    background-color#298EB2;
    box-shadow-3px -3px 10px rgba(0000.4), inset 0 0 10px black;
}


اي انه  سيختار  كل من الخانة  A D J G
 مذا لو اخترنا  فقط الاعداد الزوجية  سنلاحظ انه  قد يستغني عن الاعداد الفردية بعد اضافة EVEN
li:nth-child(3n+1):nth-child(even) span {
    background-color#298EB2;
    box-shadow-3px -3px 10px rgba(0000.4), inset 0 0 10px black;
}



سيختار  فقط  d j  اي  الاعداد الزوجية فقط  

NTH-OF-TYPE RANGES






لنفترض انه  لدينا  عدة عناصر مثل div وspan  ونريد  ان نقوم بالتوريث على  حسب  العنصر  

#example div:nth-of-type(2n+2){
   
    -webkit-box-shadowinset -3px -3px 10px rgba(0000.4), 0 0 10px black;
    box-shadowinset -3px -3px 10px rgba(0000.4), 0 0 10px black;
    cursorpointer;
    background-color#e17149

ثم نريد  ان  نقوم  بالتوريث  لعناصر  span  على حداّ  

#example span:nth-child(n+3){
    box-shadowinset -3px -3px 10px rgba(0000.4), 0 0 10px black;
    cursorpointer;
    background-color#298eb2;
 }




لنجرب طريقة للاتيان بنتيجة  سلبية  للستايل : 

 
#example span:nth-child(-n+4){
    box-shadowinset -3px -3px 10px rgba(0000.4), 0 0 10px black;
    cursorpointer;
    background-color#298eb2;
 }

 #example div:nth-of-type(-n+5){
   
    -webkit-box-shadowinset -3px -3px 10px rgba(0000.4), 0 0 10px black;
    box-shadowinset -3px -3px 10px rgba(0000.4), 0 0 10px black;
    cursorpointer;
    background-color#e17149
 }



هذا المثال  يسمح لك باختيار عناصر أقل من القيمة في نفس النوع ، داخل نفس العنصر الأصلي .. 



#example div:nth-of-type(n+1):nth-of-type(-n+3){
   
    -webkit-box-shadowinset -3px -3px 10px rgba(0000.4), 0 0 10px black;
    box-shadowinset -3px -3px 10px rgba(0000.4), 0 0 10px black;
    cursorpointer;
    background-color#e17149
 }

 #example span:nth-of-type(n+3):nth-of-type(-n+6){
    box-shadowinset -3px -3px 10px rgba(0000.4), 0 0 10px black;
    cursorpointer;
    background-color#298eb2;
 }



تتيح لك هذه الطريقة تحديد نطاق عام لنوع من العناصر ، داخل نفس العنصر الأصلي. في هذا المثال ، ترى أنني حددت المربعات 1-3 والدوائر 3-6

 #example div:nth-of-type(n+1):nth-of-type(even):nth-of-type(-n+3){
   
    -webkit-box-shadowinset -3px -3px 10px rgba(0000.4), 0 0 10px black;
    box-shadowinset -3px -3px 10px rgba(0000.4), 0 0 10px black;
    cursorpointer;
    background-color#e17149
 }

#example span:nth-of-type(n+3):nth-of-type(odd):nth-of-type(-n+7){
    box-shadowinset -3px -3px 10px rgba(0000.4), 0 0 10px black;
    cursorpointer;
    background-color#298eb2;
 }



يسمح لك بتحديد نطاق عام وتصفية النتائج بناءً على الفردي والزوجي even  odd. لذلك يكون قد حدد المربعات 1-3 والدوائر 3-6. ولكن باستخدام الفردي  يمكننا تصفية تلك النطاقات حسب النطاقات ، لذلك يتبقى لنا الدوائر 3 و 5 والمربع 2



اتمنى اني  اكون وفي وكفيت  في  شرحي  لخورزمية  التوريث  في الستايل 

Post a Comment

0 Comments