lecture(css units)

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

موضوعنا بيحكي عن السي إس إس يونت، اللي هم وحدات القياس في السي إس إس. إحنا قبل كان أغلب شغلنا إنه أنا لما بدي أعمل إني أستخدم وحدات القياس، كنا دائماً نتعامل بوحدة القياس البكسل. وحدة القياس البكسل هي شائعة جداً عند أغلب المبرمجين، ولكن مش صح إني أستخدم كل حاجة بالبكسل. يعني مثلاً بدي أعمل هاي لعنصر معين، بدي أعمل وِدث لعنصر معين، بدي أتحكم في حجم الصورة مثلاً، في حجم الديف، بتلاقوا أغلب المبرمجين أكثر تعاملهم مع البكسل ومع البيرسنتج اللي هي نسبة مئوية. بقول لك 50% من حجم العنصر مثلاً، 60% من حجم العنصر.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ناخذ مثال عشان توضح هذه النقطة. إذا نعرف إنه الإم ريلاتيف، بتتغير على حسب البيرنت تبعها، أقرب عنصر لها، وعلى حسب العنصر نفسه. لو إحنا أخذنا مثال على موضوع الإم، ممكن نجي نطبقه هان. نعمل وِدث وهاي. عندي ديف، أو مثلاً خليني أحذف هذه. ممكن هذه نحذفها، خلص نكتفي بديف واحدة. تمام. ها عندي بي، وعندي ديف، وعندي بي. خليني أحط هذه، أو خليني أحذفها وأجي أعمل كمان بي هون، وأكتب فيها أي حاجة، حال. إذا ها عندي بي، وبي، وهي عندي الديف. هذه بدي أحكيله إنه الفونت سايز ها مثلاً 30 بكسل. مش 30 بكسل. هلقيت الف هذه عشان توضح الصورة معايا، بدي أحط بداخلها سبان. بداخل البي، أحط بداخلها سبان. بداخل السبان، أكتب سبان عشان نميزها. مثلاً أحكيله إنه فونت سايز. يبقى هون صار معي إنه في عندي عنصر بداخله سبان. يبقى لـ تحكم في السبان، حتصير تتغير على حسب الديف البيرنت اللي تابع لها. فلو أنا أجيت هون كسي إس إس، نحذف هذا الكلام. إحنا هلا بنحكي في الإم. قلنا الإم، اللي بتتغير على حسب العنصر تبعها، أو على حسب أقرب بيرنت لها. لو أنا أجيت قلت له: البي، بدي أعمل لها فونت سايز مثلاً 16 بكسل. اللي هم البي اللي عملناهم هون، الثنتين بي، بدي الفونت سايز لهم 16 بكسل. تمام. مش مشكلة. لو أجيت حكيت له هو الأبو تبعها، بدي أعطيه فونت سايز مسبق. وعشان أميزه، بدي أعطيه بوردر، لون يلو، مثلاً. تمام. بهذا الشكل. هذا الوورد، حصير دي البي حتلاحظ الحجم الخط تبعها. بيبان هذه أنا ذكرتها. السبان بدي أغير حجم الخط تبعها. فصير أوصل لها، بقول له السبان. هلقيت قلنا السبان، بدي أعطيها قيمة بالإم، عشان توضح الصورة. السبان بعطيها قيمة بالإم، على شان تتغير على حسب حجم الخط اللي أعطيه للديف. تمام. فسبان خليني أحكيله إنه الفونت سايز لها. قلنا إنه الواحد إم، بقدر أحكيله واحد إم، وبقدر كمان أعمل نسبة مئوية. يعني إحنا تو نسيت أعمل ها النقطة صراحة. لـ كنت أعمل اثنين ريم، ثلاثة ريم. لا، بقدر أقول له مثلاً 0.2 من ريم، بتكون أقل من الـ 16 بكسل. بقدر أقول له 2.5 ريم مثلاً. فممكن نجربها هون، إنه أحكيله: خ من إم. هذه إيش معناتها؟ إنه أنت يا سبان، بدي خمسة من إم. قيمتك حتتغير بحسب تغير الفونت سايز تبع الديف. نيجي نعمل ريفريش، عشان تشوفوا إيش صار. شايفين هذه؟ هي الديف اللي قيمتها قلنا 30 بكسل. وهذه هي قيمة السبان اللي قلت له خمسة من إم. فالفونت سايز تبع السبان تغير حسب قيمة الديف. لو أنا أجيت هذا الديف قلت له 50 بكسل، فخمسة من هلقيت حتزيد، لأنه حجم الديف، حجم الخط تبعه زاد. نعمل ريفريش وتشوفوا إيش الفرق. هي الديف زادت حجمها، وهي هذا زاد حجمه. بقدر كمان مش بس أحكيله خمسة من، بقدر أقول له مثلاً واحد إم. بقدر أقول له 1.5 إم. فبرضه حيزيد هلقيت حجم الخط. زي ما أنتم شايفين. إذا الإم بتتغير بحسب أما العنصر نفسه. يعني لو أنا مثلاً أجيت على البي نفسها وقلت له الفونت سايز تبعها 16 إم. خلص 16 إم للعنصر نفسه. نعمل ريفريش. الات البي حتلاحظوا إنه حجم الخط كثير صار أوفر. هي الويب سايت كثير زاد حجم الخط. بس عشان أبين لكم إنه الإم بتأثر بشغلتين: إما حجم العنصر نفسه، أو حجم البيرنت اللي تابعه له.

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

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

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

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

هو حجم الخط اللي هي هذه القيمة 62.5%. ما بعرف إذا مرت عليكم ولا شفتوه. هذه القيمة 62.5% الناس المحترفة في المجال بتروح بتحط الفونت سايز تبع الروت أو الاتش تي ام ال هي هذه القيمة 62.5%.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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