lecture6

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

ممتاز، قلنا التنسيقات، الجماليات، الأشكاليات تبعت الموقع تبعي كلها بتكون من خلال السي اس اس. وأخذنا إنه السي اس اس اختصار لكلمة "كسكدين ستايل شيت"، صح ولا لا؟ هيني حكتبها هون: كسكدين ستايل شيت. حكينا إنه لو أنا بدي أجي أعمل ترجمة حرفية لها معناتها "أوراق أنماط متتالية"، ولكن مش هذا الشيء اللي نحن بدنا إياه. واتفقنا إنه السي اس اس من خلالها أي شكل حتشوفوه، حنأخذ خصائص في السي اس اس بقدر من خلالها أعمل.

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

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

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

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

طيب كيف أستدعي؟ حكي لي أي ملف من نوع سي اس اس، مش ضروري الستايل، حنأخذ لقدام ملفات كثير من نوع سي اس اس. أي ملف من نوع سي اس اس، الاستدعاء تبعه بيحكي لي عن طريق تاج أو عنصر اسمه "لينك". مع هذا اللينك في عندي تو أتربيوت. أتربيوت اسمه "ريل" (rel)، اختصار لكلمة "ريليشن شيب" (relationship). وأي ملف سي اس اس أنا بدي أستدعي، قيمة الريل "ستايل شيت" دائماً. ليش؟ الستايل شيت جاي من السي اس اس، مش نحن قلنا كسكدين ستايل شيت؟ فبمجرد ما أحكي له ستايل شيت، حيفهم عندي إنه هذا نوع الملف هو نوعه سي اس اس. يبقى أي ملف من نوع سي اس اس، طريقة استدعاء بدها تكون في الهيد عن طريق تاج اسمه لينك، من التاجات اللي سنجل تاج، ما في له تاج نهاية. معه أتربيوت اسمه ريل، اختصار لكلمة ريليشن شيب، اللي هي العلاقة. قيمة الريل هذه بدها تكون ستايل شيت. هذه قاعدة عامة.

بالـ "إتش رف" (href) إيش بنحط؟ مسار الملف تبعي. وين الملف هذا موجود؟ أنا عندي هون بحكي له إنه هذا الملف موجود بداخل مجلد اسمه سي اس اس، موجود بداخله ملف اسمه ستايل دوت سي اس اس، صح ولا لا؟ فبدي أجي أكتبه هون. بدل ما أنا أكتبه كتابة بخط إيدي، حكينا بنعمل كنترول مسطرة، كنترول مسطرة. بيبين لي ملفات المشروع اللي عندي. ولكن قلت لكم أحياناً مش حيظهر عندي كل الملفات. فإيش بعمل؟ نقطتين سلاش. صح ولا لا؟ هييه جاب لي كل الملفات. فحاجي أحكي له إنه في عندي مجلد اسمه سي اس اس، موجود بداخله ملف اسمه ستايل دوت سي اس اس. بهذه الطريقة.

هلت هذا أنا إيش عملت؟ عملت ربط لصفحة الاتش تي ام ال بملف السي اس اس عشان أصير أي كود أنا بكتبه هون بداخل هذا، يعني لما بعمل بي بهذا الشكل وبحكي له "كر ريد"، إذا أنا مش رابطة الملفات في بعض، مش عاملة لينك ريل ستايل شيت والأمور هذه، الكود هذا أو الخصائص هذه مش حتطبق عندي.

إذا أول خطوة بدنا نعملها إنه بدنا نعمل ربط لصفحات الاتش تي ام ال بملف الستايل اللي أنا شغالة فيه. يعني لو المشروع عندي 10 صفحات اتش تي ام ال، في الـ 10 صفحات لازم أضيف هذا الكود: لينك ريل ستايل شيت. أربط الملف.

فينا شغلة مهمة. كم ملف سي اس اس أعمل في الموقع عندي؟ الموقع 10 صفحات، أعمل 10 ملفات سي اس اس ولا أعمل ملف واحد لهم كلهم؟ ولاش؟ طيب مين بيحكي 10؟ 10، ما شاء الله عليك. طيب ليش؟ لا، في ناس بتاخذها من باب هذا المنطلق إنه أنا كل صفحة اتش تي ام ال أعملها ملف سي اس اس. طيب تخيل الملف عن كثير. بنشتغل مشاريع 40 صفحة اتش تي ام ال مثلاً، مقابلها 40 ملف سي اس اس. الموقع حيكون عندي ثقيل، بالتالي التحميل حيصير بطيء جداً، صح ولا لا؟ عشان هيك قاعدة عامة، ملف الستايل هو ملف واحد. عشان هيك أنا تو قلت إنه هذا الرابط حنستدعيه في كل صفحات الاتش تي ام ال اللي أنا شغالة فيها. ليش؟ لأنه هو نفس الملف، ملف الستايل الواحد.

ولكن باجي هون على ملف الستايل. أنا عندي مشاريع بتكون كبيرة من 40 صفحة ومن 50 صفحة. كيف بدي أعرف إنه كود كود السي اس اس اللي أنا كاتباته هون هو لصفحة الأباوت، لصفحة سيرفيسز، هو لصفحة الكونتاكت؟ بيجي هون موضوع الكومنت. إني أنا أعمل كومنت على كل كود أنا بكتبه. نحن اتفقنا قبل هيك، أي كومنت بدي إياه، كنترول مع حرف الظا. صح ولا لا؟ هيه لحاله بيعطيني كومنت. سواء في ملف الاتش تي ام ال، في ملف الجي اس، أي ملف بنشتغل فيه، بدي أكتب كومنت فيه، كنترول مع حرف الظا. فبصير بحكي له: والله هنا عندي صفحة الهوم بيج، كمثال، وبكتب الكود تبعها، بمش عارفة إيش هيرو، وأتش 1، الأمور هذه. خلصت من هذا الكود. باجي بحكي له: كنترول مع حرف الظا. بدي أكتب هلقيت الكود تبع صفحة الأباوت. بحكي له: أباوت باش. لأنه أنتم حتصلوا لمرحلة إنه ملف السي اس اس مثلاً من 1000 سطر. طيب كيف أنا بدي أعدل على كود؟ بدي أغير؟ بدي أضيف؟ بدي أعمل؟ بدي أصور؟ بيجي هون وظيفة الكومنت.

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

إذا عرفنا كيف نستخدم رابط السي اس اس وكيف نستدعيه لصفحة المشروع تبعنا. الأمور ممتازة. الآن بدنا نحكي كيف أنا بعمل كود في السي اس اس. بحكي لي في عندي ثلاث طرق إنه أنا أستخدم أو إنه أنا أعمل كود أو أعمل ستايل أو أعمل أشكاليات وجماليات على المشروع تبعي. الأنواع هذه بحكي لي ثلاث أنواع: النوع الأول: ان لاين سي اس اس. النوع الثاني: انتيرنال سي اس اس. النوع الثالث: اكستيرنال سي اس اس. حدا بيعرف إيش هم هذول؟ إيش الفرق بين كل واحدة؟

آه، تفضل.

(صوت غير واضح) عن صفحة.

ممتاز. الأكسترنال صفحة. زي اللي عملناه.

(صوت غير واضح)

وان لاين؟ بنفس التاج أتربيوت. ممتاز جداً.

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

الطريقة الثانية، طريقة الانترنال، بتحكي لي إنه في نفس صفحة الاتش تي ام ال، ضيفي تاج ستايل له بداية ونهاية. ضيفيه يا إما بداخل الهيد، يا إما برا الهيد. هي ستايل له بداية ونهاية. يا إما بداخل الهيد، يا إما برا الهيد. ولكن الأفضل إني أضيفه برا الهيد، زي ما أنا عملت في تاج لحاله، واستدعي العناصر زي ما أنت عايز. مثلاً عندي في بهذا الشكل. بحكي له: بدي الكلر لها مثلاً أصفر. يلا. تمام؟ بدي الباك جراوند. وهكذا. هيه عملت ستايل برا الهيد. تمام؟ وحطيت بداخله العنصر اللي أنا بدي أعمل عليه الخصائص: بي، أتش 1، إيمج، مش عارفة إيش. بعدين حطيت الخصائص بهذا الشكل. هذه الطريقة بنحكي عنها "انترنال". إنه أنا استدعيت الستايل بداخل صفحة الاتش تي ام ال، بداخل صفحة الاندكس، بداخل صفحة الأباوت، وهكذا.

الطريقة الثالثة، اللي هي طريقة الأكسترنال، زي ما إحنا عملنا أكسترنال ملف خارجي، إنه أنا عملت ملف ستايل، ملف خارجي، واستدعيته عندي في الصفحة تبعتي. تمام؟ هذول الثلاث طرق. طيب مين أفضل؟ مين أستخدم؟ متى أستخدم كل حدا؟ بيعرف؟

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

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

الثلاث طرق هذول، مين عنده سؤال فيهم؟ طيب ممتاز جداً.

الشغلة اللي بعدها اللي بدنا نحكيها، إنه أنا شو هي العناصر تبعت الـ اتش تي ام ال اللي أنا بعمل عليها خصائص في السي اس اس، أو أنا كيف بستدعيها وبعمل عليها الخصائص؟ بحكي لي في عنا حاجة اسمها "سلكتور". شايفين الكود اللي نحن كتبناه هان؟ لما بحكي بي وبفتح الأقواس وبحكي له هون مثلاً "كلر" لون "ريد" (أحمر) بهذا الشكل. هذا الكود كله بنحكي عنه "سلكتور". شو يعني سلكتور؟ حتى أشوفه، شايفين لما بناشر عليه في السي اس اس، بيجيني اسمه "سلكتور سبيسيفيز" (selector specifics) خصائص السلكتور. هيك مع إيش يعني سلكتور؟ بحكي لي سلكتور بمعنى عنصر. صل الاتش تي ام ال لما بستدعيه وبعمل عليه خصائص في السي اس اس، بكون اسمه سلكتور. يعني الأتش 1 لما بمسك وبفتح فيه البراكتس (الأقواس)، وبحط بداخلها خصائص السي اس اس، اللي نحن أول خاصية هلا بنحكي فيها اللي هي موضوع الكلر، إني أنا أحدد اللون تبعي. فبحكي لي هذا اسمه سلكتور. السلكتور هذا من إيش بيتكون؟ بتكو. يعني هذا كله هيك على بعضه اسمه سلكتور. اسم العنصر مع الخصائص تبعته اسمه سلكتور. تمام؟ بداخل هذا السلكتور موجود بداخله "بروبرتي" (property)، اسم الخاصية بنحكي عنها بروبرتي، والفاليو (value) قيمة الخاصية. بروبرتي وفاليو. يعني لما مثلاً بدي أحدد الطول عندي، مثلاً أحكي له "هاي" 100 بكسل. الـ "هاي" بنحكي عنها بروبرتي، والـ 100 بكسل بنحكي عنها فاليو. إذا السلكتور بتكون عندي من بروبرتي ومن فاليو. تمام؟ هذه الشغلة.

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

(صوت غير واضح) واحدة واحدة. مين يجاوب؟

آه يا... الأخضر. مين عنده إجابة ثانية؟

الأحمر. انتيرنال مش ان لاين.

تمام.

الأصفر. لا، الأحمر.

الأحمر. طيب ليش؟

(صوت غير واضح) لأنه...

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

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

طيب، نيجي للشغلة اللي بعدها اللي نحنا كنا نحكيها، إنه أنا هذا السلكتور، اللي هو عنصر الاتش تي ام ال اللي أنا بدي أعمل عليه خصائص في السي اس اس، بيحكي لي كيف أقدر أوصل له؟ كيف أعمل عمل عليه خصائص؟ أول طريقة بيحكي لي إنه أنت تصل للسلكتوري بشكل مباشر، زي ما عملنا إنه أنا كنت أحكي له بي كذا، أتش كذا. هذه بنحكي عنها طريقة السلكتوري بشكل مباشر. طيب هل من المنطق إنه أنا كل مرة أحكي له بي كذا، أتش كذا، أتش 2 كذا؟ لا. ليش؟ لأنه أنا الصفحة عندي حيكون فيها مثلاً 10 بي، لكن كل بي ماخذة خصائص مختلفة عن البي الثانية. صح ولا لا؟ فعشان هيك بحكي تقدري تصل لأي بي أنت بدك إياها.

كـ نحن اتفقنا قبل هيك إنه أنا يفترض أي صفحة اتش تي ام ال أنا بدي أعملها، أول حاجة أحكي له هيدر، صح؟ بعدين أحكي له مين؟ مين بداخلها حسب كم سكشن أنا بدي. هي مثلاً سكشن ضرب ثلاثة. متذكرين هذه الطريقة؟ هي انتر. بعدين برا المين إيش أحكي له؟ فوتير. بس. طيب لنفرض أنا عندي، وبعد بعد ما اتفقنا على هي التقسيمة، إيش اتفقنا كمان؟ نعطي كل واحد فيهم أي دي. صح ولا لا؟ أي دي مثلاً اسمه هيدر 1، كمثال. السكشن الأول اتفقنا كلنا على اسم الأيدي تبعه. صح ولا لا؟ سكشن الثاني علاقة في السيرفسز، فبدي أقول له: آي دي سيرفسز. السكشن الثالث لنفرض له علاقة في البرودكت، فبدي أسميه برودكت. وهي الفوتر أحكي له: آي دي فوتير. هذه يفترض أول خطوة أعملها لما أنشئ أي صفحة ويب أنا بدي إياها. أقسم الصفحة لهيدر، رومانين، وسكشن، وفوتر. بعدين أعطي كل واحد آي دي خاصة فيه. تمام؟

هلقيت لو أنا عندي في الهيدر بدي أعمل بس على السريع اثنتين ديف. اثنتين ديف. بدي أعمل اثنتين ديف. الديف الأولى بدي أعمل بداخلها إيمج. إحنا اتفقنا بالهيد ليش موضوع الدفات؟ لأنه إحنا بنقسم الصفحة عنا أو بنرتب العناصر. فعشان هيك بدي أرتب الهيدر. فبدي أعمل إيمج. لنفرض هذه الصورة. وفي الدب الثانية في هذه الدب بدي أعمل مثلاً يو إل (ul) بداخلها إل آي (li) بداخلها آي (a). تمام؟ أحط بداخلها اللينكات اللي عندي. مثلاً هون. وهذه الإل آي بدي أمسكها أكررها. شوف إيش بعمل. بوقف هان، شفت، الت، السهم اللي لتحت. وبدي بدي أحكي له هون مثلاً اسمها سيرفيسز، كمثال. وهان اسمها كونتاكت. أي شيء. تمام؟ خلصت هلقيت الهيدر عندي اثنتين ديف. في كيف بدي أعمل خصائص على الإيمج هذه؟ وكيف بدي أعمل خصائص على اليو إل هذه؟ يفترض إيش أعمل؟ أعطي اسمه كلاس. صح ولا لا؟ عشان أقدر أميزه وأصل له. كلاس مثلاً اسميه "آر ديف". بهذا الشكل. والديف هذه بدي أسميه كلاس "إل ديف". عرفنا ليش سمينا اسم الكلاسات؟ عشان أصير أقدر للعناصر. إيش يعني؟ أنا أفترضوا عندي السكشن هذا، السكشن هذا تبع الهيرو، موجود بداخله إيمج. تمام؟ هذه الصورة هي الميديا، هي الإيمجز. مثلاً هذه الصورة. هلت لو جيت أنا هون في السي اس اس، لو جيت هان في السي اس اس، حكيت له إيمج زي هيك، وأعطيته خصائص. الخصائص هي حتطبق على كل الإيمج اللي عندي. لكن لما عملت هذه الخطوة، بصير إيش أحكي له؟ أحكي له: دوت آر ديف (بما إنها اسم كلاس). الإيمج اللي فيها. بعدين بنزل تحت: هاش هيرو. الإيمج اللي فيها. فبصير ميزت كل إيمج عن الإيمج الثانية. تمام؟

فبيحكي لي أول خطوة إنه أنا أعطي كل عنصر من العناصر اللي عندي كـ أساسية اللي هي الهيدر والمين والفوتر، أعطيه آي دي خاص فيه. تمام؟ بعدين بعد ما أقسّم العناصر اللي موجودة عندي لدفات. يعني مثلاً أنا السكشن في أجزاء على اليمين وأجزاء على اليسار، فبروح بقسمه لديف، والديفات هذه بدي أعطيهم أسماء كلاسات خاصة فيه. ليش؟ عشان أقدر أصل لأي عنصر أنا بدي إياه. تمام؟

هل بعد ما عملت هي النقطة، أعطيته آي دي وسميته هيدر 1، بقدر أصل للإيمج اللي موجودة هان؟ اللي هي الإيمج أنا عندي هتسا تو إيمج، إيمج الموجودة في الهيدر، اللي هي هذه، والإيمج الموجودة في السكشن الأول، الهيرو. صح ولا لا؟ لنفرض إنه أنا بدي أغير الطول والعرض تبعون الإيمج. كيف بدي أصل للإيمج الأولى تبعت الهيدر؟ باجي بحكي لي والله هذه الإيمج موجودة بداخل الهيدر، والهيدر معه آي دي اسمه... هلا هان أنا لأنه كنا عارفين وكنا متفقين إنه الصفحة عندي ما في فيها إلا هيدر واحد. صح ولا لا؟ يبقى بإمكاني الآي دي تبع الهيدر ما أعطيش إياه. صح؟ لأنه أنا مستحيل يكون عندي في الصفحة الواحدة إلا هيدر واحد. طيب وقتش حيكون الآي دي مهم بالنسبة، وقتاش حيكون الآي دي مهم بالنسبة لك إن أنا أحطه؟

آه، تفضل.

ليش؟

ما فهمتش ليش.

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

متى حيكون اسم الآي عندي مهم؟ إذا الهيدر في هي الحالة. إذا والله الهيدر معي في كل الصفحات نفس الشيء، بحكي له ما في داعي إني أنا أعطيه اسم آي دي. ليش؟ لأنه أنا الهيدر معي بس مرة بالصفحة. الهيدر والفوتر مرة بالصفحة. فممكن أنا أستغني عن اسم الآي دي تبعهم. واضحة الأمور لحتى الآن؟

طيب، أنا حكيت عندي اثنتين إيمج. في عندي إيمج موجودة في الهيدر، وإيمج موجودة في السكشن الأول، الهيرو. صح ولا لا؟ كيف أقدر أصل للإيمج اللي موجودة في الهيدر؟ يا بحكي له: هيدر إيمج. زي هيك. هذه إيش معناتها؟ الإيمج اللي موجودة في الهيدر. إذا كنت معطيها آي دي، إيش بقول له؟ هاش اسم الآي دي. العنصر اللي بعده. فهذا معناته جيب لي العنصر اللي موجود في الآي دي كذا. هيك معناته. لو أنا جيت على هذه الصورة وقلت له: بدي الهاي لها مثلاً 100 بكسل، وبدي الويدث لها مثلاً 100 بكسل. أعمل ريفريش. حيطبق هذا الكلام على الصورة اللي موجودة في الهيدر. زي ما أنتم شايفين. هي الصورة الثانية تعبت فيها ظلت زي ما هي. صح ولا لا؟ لكن لو أجيت قلت له: إيمج زي هيك، بدون كلمة الهيدر. حيروح يطبقهم على كل الصور الموجودة عندي. فهي ريفريش. حياخذهم على الصورتين. زي ما أنتم شايفين. تمام؟

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

إذا هذه الطريقة الثانية، أنا أصل لعناصر الاتش تي ام ال وأعمل عليها خصائص، إنه أنا أحكي له: هاش اسم الآي بي. الطريقة الثالثة: اسم الكلاس. كيف يعني؟ أنا عندي مثلاً في في الأل اللي موجودة هان، بدي أعمل كمان إيمج. تمام؟ بدي أعمل كمان إيمج. هذا عندي صار في الصفحة ثلاثة إيمجز. صح ولا لا؟ طبعاً أنا عشان قايلة له إيمج كذا، راح طبقهم. أنا بدي أطبق خصائص بس على الإيمج هذه اللي موجودة وين؟ في الأل ديف هذه. فإيش بقول له؟ بمسك الكلاس، فوبي بيست، زي هيك، وبحكي له هون في الستايل: دوت اسم الكلاس. إيمج. هذه معناتها: جيب لي الإيمج اللي موجودين في الكلاس اللي اسمه أل ديف. وباخذ عليها الخصائص هذه. مثلاً أحكي له: الهاي لها 150 بكسل، والويث لها 50 بكسل. فحيروح يطبقهم بس على الإيمج اللي موجودة في الأل ديف. تمام؟ بهذا الشكل.

تمام. إذا زي ما أنتم شايفين، راحت الخصائص هلقيت. أنا لما حكيت له: إيمج. هذا الكلام حكينا هذا طبقها على كل الخصائص الموجودين عندي. لكن لما حددت الإيمج اللي موجودة في الأل ديف، خصائص مختلفة، راح زي ما أنتم شايفين، أخذها هنا. وباقي الإيمج اللي موجودة معي، أخذ الخصائص هذيك تبعتها. تمام؟

إذا يا بقدر أصل للعناصر اسم العنصر بشكل مباشر، يا إما باسم الآي دي، استدعيه هاش اسم العنصر، يا إما باسم الكلاس، دوت اسم الكلاس العنصر اللي معي. تمام؟ ممتاز جداً.

في عنا حاجة اسمها "اليونيفرسال سلكتور". إيش هو اليونيفرسال سلكتور؟ عبارة عن النجمة. الستار. بهذا الشكل. حدا بيعرف إيش بتعمل اليونيفرسال سلكتور؟

آه، تفضل.

لكل العناصر اللي موجودة داخل المتصفح.

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

في عنا العنصر اللي بعده، عنصر البدي. أنا بقدر أصل لعنصر البدي. البدي مين بيمثل؟ بيمثل بس صفحة الفيو بورت هذه. يعني لما أجي أحكي له مثلاً باك جراوند كر لون أحمر، وين حتعطيني الباك جراوند كر؟ على عنصر البدي اللي هو البراوزر. بهذا الشكل. بتروح تطبق على العناصر اللي موجودة هنا. يعني ما راح أعطى الهوم باك جراوند كر، البي اللي موجودة فيها باك جراوند كر، وهكذا. عشان هيك بيجينا سؤال مهم جداً: شو الفرق ما بين اليونيفرسال وما بين البدي؟ البدي بس بتمثل صفحة الفيو بورت هذه، الصفحة البيضاء. اليونيفرسال بتمثل كل العناصر اللي موجودة معي بداخل البدي. تمام؟ هدول الفرق ما بينهم.

إحنا هذول اللي بنحكي فيهم، اللي هي أنواع السلكتور، أو أنا كيف أصل لعناصر الاتش تي ام ال وأعمل عليها خصائص. قلنا أول شي طريقة الوصول بشكل مباشر للسلكتور. طريقة الآي دي. طريقة الكلاس. عندي اليونيفرسال وعندي البدي. الطريقة اللي بعدها بحكي لي في عندي حاجة اسمها "جروبين سلكتور". شو يعني جروبين سلكتور؟ إنه أنا أجمع أكثر من سلكتور بنفس التاج. وهي كثير بنستخدمها. لو أنا في عندي مثلاً، عندي هان، هي بداخل هذا السكشن، عاملة بي وحاطة بداخلها جملة. وفي سكشن السيرفيس، عاملة أتش 3 وحاطة بداخلها جملة "لوريم". وفي سكشن البرودكت، عاملة أتش 5 مثلاً فيها كلمة "ويلكم". لو أنا بدي البي والأتش 3 والأتش 5 يروحوا ياخذوا نفس الخصائص اللي موجودة معي. فهذه بنحكي عنها جروبين سلكتور. إنه أنا أجمعهم مع بعض وأعطيهم نفس الخصائص. هلقيت لو أنا جيت هون على الستايل، بس أشيل الباك جراوند لأنها مزعجة. حكينا في عندي البي والأتش 3 والأتش 5، بدي أعطيهم نفس الخصائص. تمام؟ هلقيت قدامي خيارين. يا إما أحكي له زي هيك: بي، كما، أتش 3، كما، أتش 5. هذه بنحكي عنها جروبين سلكتور. وأجي أحكي له مثلاً: بدي الكلر الها يكون بلو. تمام؟ هلت أعمل ريفريش. البي والأتش 3 والأتش 5 حتاخذ هذا اللون. زي ما أنتم شايفين. تمام؟ هذه بنحكي عنها جروبين سلكتور.

طيب، أنا هيك وصلتها بالعنصر بشكل مباشر. طب أنا في عندي بالصفحة بيكون أتش 3 ثانية، أو أتش 5 ثانية. صح ولا لا؟ فبحكي لي برضه في الجروبين سلكتور، أنت بتقدر تجمعهم من خلال الأب اللي تابع لهم. كيف يعني؟ هذه البي موجودة بداخل سكشن الهيرو. فإيش بعمل؟ هذا السكشن معه آي دي. باجي هون على الستايل، بدل البي، إيش بقول له؟ هاش هيرو. البي اللي موجودة فيه. فهان صرت باش على البي اللي بس موجودة في هذا السكشن. طيب لو رحت على الأتش 3 اللي موجودة في سكشن السيرفسز. صح ولا؟ بمسكها كوبي بيست. وأش بقول له؟ هاش سيرفيسز. هاش سكشن. (صوت غير واضح). وأروح على الأتش 5 هذه موجودة في سكشن البرودكتس. تمام؟ وهان على الأتش 5 بدي أحكي له: هاش برودكت. الأتش 5 اللي موجودة فيه. بحيث لو كان عندي في الصفحة الثانية أتش 3 ثانية، وأتش 5 ثانية، ما تطبق عندي. خلص هان بس ياخذ الأتش 3 اللي موجودة في السيرفسز. بس الأتش 5 اللي موجودة في البرودكتس. تمام؟ هذه بنحكي عنها جروبين سلكتور. إنه أنا أجمع أكثر من عنصر ماخذين نفس الخصائص بهذه الطريقة. اسم العنصر مع الكوما تبعته.

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

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

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

آر جي بي. ممتاز.

آر جي بي آي. ممتاز.

إذا في عندي أكثر من طريقة إنه أنا أستخدم فيها الألوان عندي. إما إنه أنا أكتب اللون بشكل مباشر، وهذه أضعف الطرق واللي ما بدي أستخدمها خالص، إنه أنا أكتب ريد، بلو، مش عارفة إيش. في عندي ثلاث طرق أفضل لي من إني أكتب اللون بشكل مباشر: طريقة الأر جي بي، وهلت حنشرحها. طريقة الأر جي بي آي، وطريقة الهيكساديسيمال. نيجي أول حاجة للأر جي بي. بحكي لي الأر جي بي تمام، هي عبارة عن دمج ثلاث ألوان مع بعض: ريد، جرين، بلو. شو القيم اللي بياخذها الأر جي؟ شو القيم بياخذ؟ قيم بتتراوح من صفر لـ 255. تمام؟ صفر لـ 255. يعني لو أنا أجيت على هان، بدل ما قلت له: كلر بلو، بدي أحكي له: آر جي بي. تمام؟ قلنا هي دمج لريد، جرين، بلو. أنا حطيت له ريد 10، وجرين مثلاً 5، وبي صفر. هي أعطاني هذا اللون. لو أنا حطيت مثلاً 50، حيعطيني لون ثاني. شايفين تغيرت درجة اللون. لو أعطيته هان 150 مثلاً، تغيرت درجة اللون الموجودة. فبياخذ قيم تتراوح من صفر لـ 255. لو حطيت قيمة مثلاً 256، مش حيعطيني لون. شايفين؟ مش حيعطيني لون. لو حطيت قيمة أقل من الصفر، سالب واحد، سالب اثنين، مش حيعطيني لون. فالقيم اللي بياخذها الأر جي بي، قيم بتتراوح من صفر لـ 255. هي مثلاً 25. أعطاني هذا اللون. طبعاً بصير أنا بعد ما...

اللون درجته هان بصير اتحكم في الالوان زي ما انا بدي من هان من اللوحه هذه او بقدر من هناان اضغط على الاشياء اللي هنا شايفين في كل مره بيعطيني لون معين لما اعمل ريفريش حينعرض عندي في الصفحه اللي هو هذا اللون اللي انا طبقته تمام الار جي بي اي بياخذ نفس الحال حاجه اللي هو دمج ما بين ريد وجرين وبلو ولكن بضيف معه الا A لموضوع شو؟ الشفافيه الا A لموضوع الشفافيه بحكي لي الا A بتاخذ مني قيمتين يا اما قيمه صفر في حال انا كنت بدي العنصر شفاف يا اما قيمه واحد في حال انا كنت بدي اياه غير شفاف هي الشفافيه ار جي بي اي انا اضيف يا صفر يا واحد على اللون اللي انا بدي اياه.

نيجي لنظام الهيكساديسمال مين بيعرف ايش فكره اللي هي سادس طبعا هي الالوان بنستخدمها مع الكلر او مع الباك جراوند كر تمام مع اللون العنصر او لون الخلفيه نظام الهيكساديسمل مين بيعرف ايش فكرته؟ هو ممتاز بيحكي لي نظام الهيكساديسيمال بيمثل نظام ال 16 اللي القيم فيه بتتراوح ما بين كلكم اخذتوا في الجامعه اكيد اللي هو برمجه السي اللي هو النظام الثنائي والنظام السادس عشر والامور هي صح ولا لا وعارفين انه نظام ال 16 بيتراوح القيم فيه من صفر ل 15 صح بتمثل من صفر لتسعه و10 عندي اي بي 11 سي 12 وهكذا صح لعلم اصل لل 15 نفس الفكره في نظام ال 16 ه بحكي لي الالوان عندي بتتراوح القيم تبعتها من صفر نظام الهيكسديسمال الالوان اللي هيك سادسه ما الالوان في بتتراوح ما بين صفر لتسعه تمام بعدين عندي الش بتمثلها a ال1 بتمثلها b ال 12 بتمثلها cي 13 بتمثلها 14 بتمثلها الاي تمام هذا 15 بتمثلها الا تمام هي النظام السادس عشر ايش يعني حكي لي عشان استخدمه لازم اضيف مع العنصر او مع الخاصيه هاش وبعد الهاش اضيف القيم هذه يعني مثلا جيت قلت له واحد اثين اي حيعطيني لون لو ضفت عليه كمان اف ما هي برضه من نظام السادس عشر صح ولا لا لو ضفت رقم اربعه طبعا حسب ممكن يكون هذا الخيار مش موجود اللون له خليني اضيف كمان هذا تمام هي اعطاني هذا اللون بشرط انه الخانات اللي موجوده عندي كم ديجيتال تكون كم رقم تكون سته او اقل تكون سته او اقل تمام يعني نظام السادس عشر بتتكون عندي من سته ديجت بنحكي عنها سته ديجت اللي الست رموز اللي بنمثلهم زي هيك شحطات تمام هي السته ديجت القيم اللي موجوده فيها بتكون من صفر لتسعه ومن اي لاف تمام من صفر لتسعه ومن اي لاف بشرط انها ما تكون اكثر من السته ديجت ممكن تكون اقل لكن انها تكون اكثر لا هذا نظام السادس عشر طبعا نحن بنمثل هيك او زي ما قلت لكم بتيجوا من هان تختاروا اللون اللي انتم بدكم اياه هذا كله نظام السادس عشر واضحه الهيكسديسمات هاش وبعديها عندي رموز وارقام بتتكون من صفر لتسعه او من الاي للاف بعمل دمج ما بينهم بيعطيني اللون بالسادس عشر بيجينا سؤال مين افضل طريقه انه انا استخدم اللون مباشر الار جي بي الار جي بي ايه الهيكساديسيمال الهيكساديسيمال اول خيار بدنا نحطه الهيكساديسيمال تمام يبقى المفروض كل المشاريع اللي حنبرمجها نتعامل مع نظام الالوان الهيكساديسمال اللون بشكل مباشر هذا اللون للمبتدئين صراحه ما بنستخدمه تمام كل شغلكم حيكون على انه انا استخدم نظام الهيكسات هذه السما تمام مين عنده سؤال لحتى الان في موضوع الالوان في عننا رابط موقع حبعث لكم اياه اليوم تمام اسمه اتش تي الكرز هذا الموقع موجود بداخله كل الالوان اللي انتم بتتعاملوا في درجاتهم وفي الرموز تبعتهم يعني نظام الار جي بي نظام الار جي بي اي نظام طبعا انتم لما يجيكم من ملف الفيجما حيجيكم الكود جاهز تبع اللون ما في داعي انكم تتغلبوا فيه وهي هان عننا البرنامج نفسه بيعطيكم الادوات بهذا الشكل تتحكموا فيها زي ما انتم بدكم واضافه لذلك انه في عندكم هذا الموقع حابعث لكم الرابط تبعه معطيك كل لون في الدرجه درجه الهيكساديسيمال في درجه الار جي بي هذول نظام الوان ثانيه بس الصراحه ما بنستخدمهم احنا كل اعتمادنا حيكون على الهيكساديسمل تمام فباجي من هون لا هذه للاشكال شوفوا من هون بصير اغير درجه اللون زي ما انا بدي هي فوق بيعطيني اللون بال بالرموز اللي موجوده معنا هي شوفوا لما بغير لما بغير بغير منها شايفين اللي فوق القيم بتختلف معه بتتغير الار جي بي بيختلف والهيكساديسيمال بتختلف ومن هون نفس الشيء بصير اتحكم في درجات الالوان من هون مثلا بدي هذا اللون هيني بضغط عليه باجي فوق باخذ هذا درجه الهيكساديمل فيه كوبي بيست وبضيفها عندي في البرنامج بهاش واحده تمام هي اعطاني اللون هذا اللي موجود على الموقع بعمل ريفريش زي ما انتم شايفين حيطبق معي تمام حبعث لكم رابط الموقع هذه اول حاجه اللي هي خاصيه الكلر على شان اتحكم في اللون اي في لون العنصر الموجود معي حكينا في عندي اكثر من طريقه ان انا اكتب اللون اما اكتبه بشكل اللون مباشر او نظام الار جي بي او نظام الار جي بي اي او نظام الهيكساديسال تمام هيك بنكون خلصنا اول خاصيه من خصائص السي اس اس اللي هي خاصيه الكلر.

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

نيجي نيجي للخاصيه اللي بعدها وهي خاصيه الباك جراوند كر الباك جراوند بشكل عام بستخدمها على شان نحدد خلفيه عنصر معين سواء ديف بي ايج البدي كلها مثلا اللي هي الفيو بورت كلها تمام بيحكي لي الباك جراوند هذه في لها اكثر من خاصيه متعلقه فيها اول حاجه نحن بدنا ناخذها اللي هي باك جراوند كر يعني لو انا اجيت مثلا على الدوت بار اللي هم العناصر هي وقلت باك جراوند كر ونفس الحاجه لون مباشر هي سكسديسمال ار جي بي ار جي بي اي مثلا جت قلت له هذا اللون 4 خ اي مثلا اعطاني هذا اللون وممكن من هون احدد درجه اللون اللي انا بدي اياه تمام هذه باك جراوند كر نعمل ريفريش زي ما انتم شايفين هي اعطاني اياه بهذا الشكل هذه باك جراوند اللي هي لون الخلف بيحكي لي الباك جراوند في لها انا خلفيه العنصر يا اما بحددها عن طريق اللون زي ما انتم شايفين باك جراود كر او بحددها عن طريق ايج انا اعطي هذا العنصر ايج تكون باك جراوند له هذا الكلام كثير بنشوفه نظام كارد مثلا مغطيه بامج صح ولا لا او البدي نفسه مغطى في ايج فكيف بدنا نعمل هذا الكلام حاحذف كل شيء موجود تمام وبدي اجي على البادي كله تمام واعمل بديخلها بدي اعمل سكشن سكشن الاي دي تبعه تمام بداخل هذا السكشن بس بدي احط جمله مثلا وخليني اعمل لين رابط هي اي اتش رف مثلا كذا موجود بداخله كلمه ويلكم كونكتال اي شيء بعدين بدي اعمل بوتون بسيطة احط بداخلها مثلا كلمة ريد مول عادي صفحه ورد بسيطة ريفريش بهذا الشكل تمام هلقيت اللي بدي اعمله انه بدي اخلي الباك جراوند الفيو بورد هذه كلها ماخذه باك جراوند ايمج يعني تكون عباره عن صوره نحن توي قلنا مين بيمثل الفيو بورد هذه عنصر مين البدي صح ولا لا في حال انا كنت بدي اياها على كل الصفحه هذه فباجي هان على الستايل بحكي له بدي باك جراوند ايمج والطرق اللي ه اللي نحن بدنا نحكيها تمام يا اما اذا انا في عندي سكشن ثاني عندي في الصفحه هي مثلا سكشن الاي دي فيه برودكت كمثال تمام بدخل هذا السكشن في عندي ايج كمثال واحط اي صوره من الصور اللي موجوده هي الميديا هي الايمجز هي مثلا هذه الصورة وهي في عندي هان مثلا اتش 3 هلو ورد لما يكون الصفحه عندي فيها مجموعة من السكشن وانا جيت قلت له البدي البدي بتمثل كل الابيض هذه يعني طول ما انا عامله سكرول حتطبق معي صح ولا لا طب انا بدي باك جراوند بس على سكشن معين فبالتالي بروح بصل لهذا السكشن هاش هيرو مثلا هاش سيرفيسز وهكذا خلينا نعمل على هاش هيرو باك جراوند ايج ونشوف كيف حاجي هان على الستايل بدل بدي ايش بدي احكي له هاش هيرو تمام وعندي اسم الخاصيه باك جراوند انج بحكي لي احنا كنا لما نعمل ايج احط رابط الصورة بداخل اس ار سي صح ولا لا في الباك جراوند ايج رابط الصورة بده يكون بداخل يو ار ال فبحكي له باك جراوند ايج يو ار ال بداخلها بحط مسار الصورة زي ما نحن متفقين قبل نقطتين السلاش في عندي بحكي له مجلد اسمه ميديا بداخله مجلد اسمه ايجز مثلا هذه الصورة هي الاكس تعال نعمل عمل ريفريش انا بس قلت له انه بدي هذا السكشن ياخذ الباك جراوند بهذا الشكل هلا الوضع الافتراضي تبعي انه بروح بجيب الصورة حسب مقاس الصورة تبع حجم حسب الحجم الافتراضي تبع مثلا هي الصورة حجمها كبير اضطر يعطيني سكرول افقي عشان يعرض باقي الصورة تمام لو انا رحت اخترت صوره ثانيه لو اخترت صوره ثانيه مثلا حيعطيني شكل ثاني هي ريفريش عشان طيب مثلا هي هذه الصورة ريفريش بس هلت بدنا نشوف شو هي الخصائص المتعلقه في الامج حكينا اول خاصيه اسمها باك جراوند ايمج احط بداخلها يو ار ال بس عشان احط مسار الصورة هذه هلقيت الصورة عندي بتظهر بالوضع الافتراضي تبعها يعني يعني اذا كان حجمها كبير حتظهر معي بالحجم الكبير اذا كان حجمها صغير حتظهر حجمها صغير كيف الصورة الحجم تبعها تظهر معي في الصفحه هل اذا كانت الصورة عندي حجمها صغير وانا حكيه له باك جراوند ايمج يو ار ال تمام وحجم الز وحجم الصورة عندي حجمها صغير وانا حكي له انه هذا العنصر بدي يكون خلفيته صوره فبالتالي الحجمها صغير حيضل عندي مساحه فاضي في باقي السكشن صح ولا لا؟ فاللي حيصير انه حيعمل لي تكرار للصوره هذا التكرار مش شيء كويس عندي في الصفحه انه انا الصورة عندي تكون متكرره اكثر من مره عشان هيك في عندي خاصيه اسمها باك جراوند ريبيت عشان اتحكم في تكرار الصورة اللي موجود معي بحكي لي والله اذا بدك الصورة تتكرر وهي الوضع الافتراضي لها بتكون قيمتها ريبيت اذا ما بدي اياها تتكرر باجي بقول له نو ريبيت هذه متى حاستخدمها في حال الصورة كان حجمها صغير وظهر معي انه الصورة عندي متكرره في الموقع تبعي فبقول له باك جراوند ريبيت نو ريبيت ما تخليني اياها تتكرر معي تمام الخاصيه اللي بعدها اسمها باك جراوند سايز ركزوا معي حاعطيكم وقت انكم تطبقوا باك جراوند سايز بيحكي لي عشان تتحكمي في حجم الخلفيه اللي موجوده معي الباك جراوند سايز بتاخذ مني قيمتين قيمه اسمها كفر وقيمه اسمها ها كونتين حدا بيعرف شو الفرق بينهم حكي لي لما احكي له باك جراوند سايز كفر يعني غطيلي المساحه بشكل كامل على كل السكشن اللي موجود معي من ناحيه الهاي ومن ناحيه الو يعني لو انا هذا السكشن حكياله بدي الهاي له 100 في اتش يعني 100 في اتش هلت انا عندي هلقيت انا عندي هون صفحه البيو بورد هذه تمام بحكي لي الطول تبعها هذا كله اسمه 100 في اتش في اتش اختصار لكلمه فيو بورت هاي اللي هو الطول تبع الفيو بورت والعرض تبعها اسمه 100 في دبليو اللي هي الفيو بورت وي تمام فبقول لي لما انا احكي له هنا انه هذا السكشن الطول تبعه 100 في اتش بمعنى يعني كل الطول تبع البدي يعني بصير يظهر معي هان كله على البدي هذا وايش بيظهر في عناصر ثانيين بيظهر عندي السكرول هذا بنزل فيه بصير يظهر باقي عناصر الصفحه اللي عندي نفس الحاجه لما احكي له الوث مين في دبليو يعني العرض تبع هذا الصفحه كله العرض هذا كله فهلقيت لما بقول له باك جراوند سايز كفر يعني غطي لي المساحه كلها تبعت الفيوبر فبروح بياخذ كل طول وكل العرض الكفر هذه قيمه ثانيه اسمها كونتين الكونتين بتحكي لي انه انا باخذ جزء من العنصر هذا والجزء الثاني بيكون عندي مساحه بيضاء له مساحه فاضيه لهذا العنصر فهذول الفرق بين الكفر والكونتين لما يكون عندي شكل صفحه ال الصورة فيها مغطيه الصفحه كلها عندي وهذا حناخذها ان شاء الله المره الجايه كتطبيق فبهي الحاله بتكون الباك جراوند سايز لها قيمة كفر والهاي كلها بيكون 100 في اتش يعني غطيلي اياه كلها في مساحة الطول ومساحة العرض تبع هذا السكشن 100% >> بتزبط معي وامورها تمام ولكن الافضل ان انا استخدم 100 في اتش و1 في دبليو تمام هم الاثنتين تقريبا نفس الشيء لكن عشان تضمن انه حتى الزوايا البيضاء الصغيره اللي بتضلها تتغطى كلها كامل فالاحسن نحي له 100 في اتش و1 في دبليو تمام في عندي خص الخاصيه الثانية للباك جراوند اسمها باك جراوند بوزيشن باك جراوند بوزيشن بتحكي لي بحدد وين مكان الصورة بدي اياه القيم اللي بتاخذها توب رايت بوتوم ليفت سنتر يعني اذا انا بدي الصورة هذه تتاخذ فوق فبحكي له توب بدي اياها تحت بحكي له بوت بدي اياها بالنص بحكي له سنتر هذه هي الباك جراوند بوزيشن اذا الباك جراوند يا اما باك جراوند كر احدد لون الخلفيه باك جراوند ايمج احددها كسوره بحطها بداخل اليو ار ال باك جراوند ريبيت عشان اتحكم في التكرار عندي باك جراوند ساز عشان اتحكم في حجمها اللي هي يا اما كفر يا اما كونتين باك جراوند بوزيشن عشان اتحكم في الموضع الموجود معي هلقيت على السريع بدي كل واحد يعمل لي صوره خلفيه لسكشن اضغط السكشن كامل ما تكون متكرره وتكون البوزيشن لها سنتر في النص وبدي تعملوا لي نظام كارد اللي هي مربع يكون تحك تتحكموا في الطول والعرض ولون الخلفيه تبعتهم وتحطوا فيها بس محتوى بسيط.