Transcript for:
السوده كلاسيس - حالات التنسيق في CSS

السلام عليكم ورحمه الله وبركاته هنتكلم النهارده ان شاء الله عن السوده كلاسيس هي الحالات اللي من خلالها انت بتبدا ان انت تضيف التنسيق بتاعك هتقول لي انا مش فاهمك هقول لك دلوقتي انا عندي ديف بالمنظر اللي قدامك ده عاوز اقول لك ان انا لو وقفت عليه بالماوس اللي يحصل ممكن ان انت تعمل اللي انت عاوزه انا مثلا هنا حطيت صوره فاول ما بقف مثلا بالماوس على الديف ده في صوره بدات ان هي تظهر تمام كمان برضو انا لو ضغطت على الديف ده اللون بتاعه بيتغير فدي برضو حاله تانيه تمام فانت من خلال بتبدا ان انت تحط التنسيقات بتاعتك من خلال الحالات اللي انت عاوزها وتعال دلوقتي لما نشوف مع بعض هنعمل عندنا هنا ديف وهنروح عندنا في السي اس اس هندي شويه تنسيقات ده وليكن مثلا طوله عرض طول مثلا 100 بيكسل ومثلا بيكسل وهندي له دلوقتي باك جراوند كلر مثلا باللون الاسود او اي لون انت عاوزه طيب انا دلوقتي عاوز اقول لك ان انا عاوز لو وقفت على الدف ده بالماوس اي حاجه انا عاوزها مثلا ان هي تحصل عاوز دلوقتي ان انا اغير اللون عاوز دلوقتي ان انا اغير الطول والعرض عاوز ان انا مثلا اضيف تنسيق جديد عاوز اعمل اللي انا عاوز اعمله طيب الكلام ده بعمله من خلال ان انا بجيب العنصر وبعمل عندك نقطتين اللي هم الكولون وبقول لك هنا هوفر هوفر دي معناها ان انا لو عملت هوفر على العنصر ده لو وقفت عليه بالماوس اللي يحصل اكتب اللي انت عاوزه انا مثلا ممكن اقول لك ان انا عاوز تكون باللون الاحمر فلو وقفت عليه لو انت هتكون باللون الاحمر ممكن اقول لك ان انا عاوز لو وقفت عليه مثلا الطول بتاعه يكون خمسين بيكسل بدل ما يكون 100 بيكسل فدلوقتي انا لو وقفت لك عليه بص الطول بتاعه بقى 50 بي بدل ميت بيكسل ممكن ان انت تتحكم في الطول والعرض او ان انت تضيف عندك تنسيقات تانيه مختلفه تعال كده لما نتحكم عندنا في الطور والعرض بص بالمنظر اللي قدامك ده طيب تعال دلوقتي لما نضيف عندنا صوره هقول لك دلوقتي انا عاوز ان انا لو وقفت على العنصر ده اضيف مثلا صوره معينه وليكن الصوره دي طبعا انا لو وقفت على العنصر ده الصوره بالفعل هيتم اضافتها ولكن بتاعها ممكن يكون بايظ عندك بالمنظر ده فممكن ان انا اروح مثلا واقول لك ان انا مثلا هدي لك باك جراوند تكون كونتين تمام بحيث ان اي صوره يتم اضافتها بتاعي هيكون كونتين على قد المحتوى بالظبط فدلوقتي انا لو وقفت عليها الصوره بدات ان هي تظهر عندك بالمنظر ده انت نفسك ممكن كنت تبقى حاطط عندك مثلا هنا صوره تمام بالمنظر ده وتقول لي ان انا عاوز ان انا في البدايه اصلا يكون عندي صوره وليكن الصوره دي ده في البدايه اصلا وعاوز ان انا لو وقفت على العنصر ده الصوره تتغير تمام فبراحتك اعمل اللي انت عاوزه فدي الحاله بتاعتنا وهي الهوفر طيب عندنا حاله تانيه وهي ان انا لما بضغط ضغطه مطوله على العنصر ودي اسمها ممكن ان انا مثلا اجي لك هنا واقول لك دلوقتي انا عاوز الديف ده لو عملت اكتف لو وقفت او ضغطت ضغطه مطوله على العنصر ده ممكن اعمل اللي انا عاوزه ممكن مثلا ان انا اغير اللون مثلا واخليه باللون اللي انا عاوزه او اعمل او اضيف التنسيق اللي انا عاوز ان انا اضيفه فدلوقتي انا لو ضغطت ضغطه مطوله مش اي ضغطه وخلاص ضغطه مطوله على العنصر ده فهيبدا التنسيقات اللي انا حطيتها هنا هتبدا ان هي تظهر طيب كمان برضو انا عندي حاجه تانيه وهي الام تي ودي معناها ان انا بقول لك عاوز لو اي عنصر يكون فاضي من جوه وما فيهوش اي شيلدرين ابدا دلوقتي ان انا اضيف عليه التنسيقات اللي انا عاوزها فدي انا بعملها من خلال تعالى كده لما نشيل كل الكلام ده انا بعملها من خلال ان انا بقول لك عاوز دلوقتي اي دف يكون فاضي يعني يكون عندك هنا انت فاضي يعني مفيش اي حاجه جواها حتى مثلا ما فيش جواه هنا ابناء طيب لو عندك فاضي هتعمل في ايه هقول لك مثلا عاوز بتاعته تكون باللون الاخضر ده لو هو فاضي طيب دلوقتي انا لو عندي مثلا تاني هيعمل لك فيه نفس الموضوع بالزبط طيب لو الديف التاني ده مثلا ما كانش فاضي كان مثلا جواه عندك هنا برجراف حتى لو البرجراف ما فيش جواه حاجه المهم ان يكون في ابناء جوه فبما ان الدف اصبح دلوقتي جواه ابناء فالديف ده ما بقاش فاضي فمش هيطبق عليه امتى تمام طيب تعال دلوقتي لما نتكلم على اللينكات انا هعمل لك هنا لينك ومش مهم بقى اللينك اياكن يعني وهكتب لك هنا مثلا جوجل وهعمل لك لينك تاني مثلا اكتب لك فيه هنا مثلا فيس بوك واغير هنا بس اي حاجه علشان بس يكون ده مختلف عندها طبعا اكتب هنا اللي انت عاوزه او ضيف هنا اللينك اللي انت عاوزه وضيف هنا اللينك اللي انت عاوزه طيب هو في البدايه بيكون حاطط لك شويه تنسيقات بالمنظر اللي قدامك ده بيكون حاطط لك هنا بيكون باللون الاحمر وبيكون اللون الاساسي بتاع الانكر اللي هو العنصر ده بيكون باللون الازرق او بيكون حاطط لك اول خط اللي بيكون تحت بالمنظر ده طيب انا ممكن ان انا اقول لك هنا انا عاوز مثلا اللون بشكل مبدئي يكون باللون الاسود تمام وعاوز اشيل التيكست ديكوريشن فخليها لي تكون اللي هو الخط اللي تحت ده وعاوز مثلا الفونت سايز بتاعها يكبر شويه مثلا يكون 30 بيكسل ده بشكل مبدئي بدون اي استخدام انا برضو ممكن ان انا استخدم عندك الهوفر تمام فممكن ان انا اقول لك هنا اجيب لي وعاوز دلوقتي ان انا لو وقفت عليها بالماوس يبدا مثلا اللون يكون على كده يبدا مثلا اللون يكون باللون اي لون في العالم ممكن مثلا اللون الاحمر تمام فهقول لك دلوقتي ان انا عاوز لو وقفت عليها بالماوس اللون يكون باللون الاحمر طيب انا برضو عندي حاله تمام طيب يعني ايه دلوقتي انا عاوز ان انا لو زرت اللينك ده يعني دلوقتي لو المستخدم ضغط على لينك ده وزار اللينك ده يبدا يضيف لي هنا مثلا تنسيقات معينه فعاوز اقول لك مثلا ان انا لو زرت اللينك ده يكون مثلا اللون بتاعه باللون الاصفر اي لون في العالم تمام تعال دلوقتي لما نضغط هنا على اي لينك نزوره بس نعمل هنا فيزيت فدلوقتي بما ان انا زرت اللينك ده سواء بقى انت عملت اللي انت عملته هو كده خلاص عرف ان المستخدم زار اللينك ده ظهر الموقع ده فبما ان هو زاره انت ممكن ان انت تحدد تنسيق معين تبدا ان انت تضيفه ليه اللينكات اللي تم زيارتها كمان برضو انت عندك عكس عندك هنا اللينك انا بقول لك ان اللينكات اللي انا ما زرتهاش قبل كده ضيف لي لها مثلا تنسيق معين وليكن مثلا اللون يكون مثلا وليكن اللون ده تمام فاللينك هي عكس اللينك معناها ان اللينكات او العناصر اللي انا ما زرتهاش قبل كده ابدا ان انت تضيف لها التنسيق ده طيب لو انا زرت اللينك ده خلاص بقى التنسيق ده مش هيشتغل تمام طبعا انت ممكن ان انت تستخدم عندك اللي اتكلمنا عليها من شويه فهقول لك ان انا لو ضغطت ضغطه مطوله على العنصر ده عاوز مثلا ان الباك جراوند بتاعته تكون باللون الاحمر فدلوقتي انا لو ضغطت ضغطه مطوله العنصر ده الباك جراوند بتاعته بقت باللون الاحمر طيب تعال دلوقتي لما نتكلم على الاندوت احنا عندنا خاصيه اسمها تمام اللي انا كتبته ده شيل الكلام ده انا لو ضغطت عندك هنا ده كده معناه ان انا عملت فوكس على عملت فوكس علشان ابدا ان انا اكتب كلام جوه الانبوت طيب الحاله دي انا ممكن ان انا استغلها فممكن ان انا اقول لك مثلا لو انا عملت فوكس عليه عاوزه مثلا ان انا اضيف اي تنسيق انا عاوزه فممكن مثلا ان انا اضيف باك جراوند به اللون الاحمر فدلوقتي الباك جراوند ده مش هيشتغل غير لما اعمل هنا فوكس بص اول ما بعمل عندك فوكس علشان طبعا ابدا ان انا اكتب بيبدا التنسيق اللي انا كتبته ده يبدا ان هو يشتغل طبعا انت ممكن ان انت تضيف عندك باقي جراوند ممكن ان انت تشيل عندك تخليه اللي على كده اوريك تعال بس الاول كده شيل الكلام ده هو اللي بيظهر عندك باللون الاخضر ده انا ممكن ان انا مثلا اشيله اقول لك ده يكون لما اعمل فوكس فدلوقتي انا لو عملت فوكس ما فيش اي اوت لاين انا عملت له هنا طيب انت برضو عندك حاله تانيه وهي حاله الديسيبل انت ممكن ان انت مثلا تدي لاي عنصر عندك بحيث ان ما فيش حد يقدر ان هو يفتح انا برضو ممكن ان انا استغل الحاله دي واقول لك ان انا عاوز لو كان في حاله ابدا مثلا ان انا اضيف له تنسيق معين وليكن مثلا باك جراوند باللون الاحمر التنسيق ده مش هيشتغل غير في حاله ان الانبوت ده كان في حاله يعني انا لو شلت لك من العنصر ده فالتنسيق بتاعك اللي انت اضفته ده مش هيشتغل هيشتغل لو العنصر ده كان في حاله طبعا عكسها تماما عندك حاله تانيه وهي الانيبولد فممكن ان انا اقول لك مثلا عاوز ان انا اضيف تنسيق في حاله ان العنصر ده يكون انيبلد مثلا الباك جراوند هتكون باللون الاخضر لو الانبوت كان في حاله الانيبولد يعني ما كانش يبقى اللون هيكون باللون الاخضر هتقول لي انا مش فاهم هقول لك ان انا لو شيلت يبقى العنصر ده في حاله الانابل ده اصلا تمام فبما ان هو في حاله الانيبولد يعني التنسيق اللي انت اضفته ده هيشتغل عندك دلوقتي بالمنظر ده طيب لو رجعتها لو رجعتها هتبدا هتشتغل فالتنسيق ده هو اللي هيشتغل عندك حاله تانيه وهي برضو انا ممكن ان انا استغلها فممكن اقول لك دلوقتي انا عاوز ده لو كان في حاله ابدا مثلا ان انا اضيف له تنسيق معين وليكن مثلا باك جراوند به اللون الاحمر فالباك جراوند اللي باللون الاحمر ده مش هيشتغل على الانبوت غير لما الانبوت ده يكون في حاله يعني ان انت تكون حاطط عندك هنا ريكوير دي ليه العنصر ده لو انا شلتها يبقى التنسيق ده مش هيشتغل طيب اهم حاجه بقى في انت مثلا عندك هنا الايميل دلوقتي انا لما بكون مثلا عامل عندك هنا من نوع ايميل يعني انا مستني ايميل من المستخدم طيب دلوقتي لو المستخدم ما دخلش ايميل دخل مثلا اي حاجه في العالم وما دخلش ايميل فدي قيمه خاطئه قيمه انا ممكن ان انا استغل الحاله دي ممكن ان انا اقول لك مثلا لو القيمه بتاعه الانبوت كانت انفاليت خلي بالك دي مهمه جدا لو كانت انا مثلا عاوز الباك جراوند يكون باللون الاحمر يبقى دي مش هتشتغل غير لما البيانات اللي جوه تكون انفاليت طيب تعالى دلوقتي لما نجرب دلوقتي مع بعض هنكتب عندنا هنا مثلا كلمه وهنحاول ان احنا نخليها ايميل يعني دلوقتي الايميل ده مظبوط تعال كده نخلي الايميل ده مش مزبوط هنمسح عندنا العلامه دي فكده طبعا ده مش ايميل فقال لك ان هو ده كده غلط فبما ان هو غلط يعني اللي انت عملته هنا او التنسيق اللي انت كتبته هنا هو اللي هيشتغل طيب لو انا مثلا رجعتها تاني فكده البيانات عندك فالد يعني البيانات عندك صحيحه فهو كده مش يعني الكلام ده مش هيشتغل عكسها برضو عكس عندك هنا يعني انا برضو ممكن ان انا اجي لك هنا واقول لك دلوقتي لو الانبوت ده انا عاوز ان الباك جراوند مثلا يكون به اللون الاخضر او تعالى كده لما نضيف مثلا حاجات يعني تكون التنسيق بتاعها حلو شويه نخفف اللون شويه وبرضو هنا في اللون الاحمر نحاول ان احنا نخفف اللون شويه بحيث بس ان التنسيق يكون افضل شويه تمام تعال كده لما نجرب دلوقتي مع بعض هنكتب عندنا هنا مثلا اي كلمه طبعا ده مش ايميل فاعمل لك التنسيق بتاع طيب هنكتب عندنا او هنخليه دلوقتي بيانات صحيحه بالشكل ده اصبح عندك باللون الاخضر او تم تنفيذ اللي موجود عندك في الفاليد طيب هنشيل عندنا العلامه دي فاصبح عندك باللون الاحمر وتقدر ان انت تعمل اللي انت عاوزه طيب اخيرا تعال كده لما نتكلم على التشيك بوكس انا عندي هنا في الانبوت حاجه اسمها تشيك بوكس اللي هو المربع ده تمام المربع اللي انت بتعلم عليه بالمنظر ده انا ممكن ان انا اقول لك مثلا لو الانبوت ده كان يعني كان متعلم عليه بالمنظر ده لو هو كانت انا ممكن ان انا مثلا اعمل حاجه معينه فممكن مثلا ان انا انقل العنصر ده للجنب اليمين طبعا انت ممكن ان انت تعمل ايه اللي انت عاوزه فممكن ان انا اقول لك مثلا عاوز اعمل واوديه في اليمين تمام اخلي الرايت يكون زيرو ده امتى ده في حاله ان الانبوت كان طيب تعال دلوقتي لما نجرب هضغط عليه هنا فبما ان هو راح عندك فيرو تعال كده لما نشيل عندنا فهرجع زي ما كان هنحط التاثير اللي انت عملته ده هو اللي هيظهر ودي ببساطه هي السوده كلاسس اتمنى ان انتم تكونوا فهمتوا واشوفكم ان شاء الله في فيديو جديد وس لامه عليكم