lecture7

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

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

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

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

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

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

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

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

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

نبدأ في لقاء اليوم اللي بدنا ناخذه وهي الخصائص المتعلقة في التكست النصوص. إيش يعني؟ يعني نحن أخذنا عنصر الاتش 1 والاتش 2 لاتش 6، أخذنا عنصر البي، أخذنا الديف، أخذنا السبان صح ولا لا؟ كلهم هذول كان بداخلهم يكون عندي كونتنت محتوى نصوص. فبدنا نشوف إيش هذه الخصائص كيف بتخليني أتحكم في محتوى العناصر وخصائص النصوص هذه.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

عندي خاصية ثانية اسمها وورد سبيسين. اللي هو تحكم ما بين الكلمات. يعني اعمل لي بين كل كلمة والكلمة الثانية مسافة 10 بكسل. فنعمل ريفريش. حيعمل بين كل كلمة. هي هذه 10 بكسل. هذه 10 بكسل. هذه 10 بكسل. وهكذا. تمام؟ إذا لتر سبيسين عشان أعمل تباعد ما بين الأحرف. وورد سبيسين عشان أعمل تباعد ما بين الكلمات.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

بعد هيك باجي هان على الموقع. باجي هان على الموقع بلاقي إنه هيه معطيني إنه "font-family" له "Roboto Sans Serif". فبمسكه زي هيك كوبي بيست وبضيفه وين أنا بدي. مثلاً بدي أطبقه على الـ "p". بدي أطبقه على الـ "p". خلص هذول خلصنا منهم. باجي بحكي له زي هيك: "font-family: Roboto Sans Serif". أجي أعمل ريفريش هان. زي ما أنتم شايفين نوع الخط اختلف معي. هذه الطريقة الأولى إنه أنا أعمل له استدعاء.

كيف؟ إنه أجي على الـ "Import" آخذ الرابط تبعها. ها بدون ليست "Import". باخذه زي هيك. بضيفه في أول سطر في السي اس اس. بعدين باجي آخذ الـ "font-family" اللي هو نوع الخط. أنا أخذت بس "Sans Serif". لو أنا بدي قيم ثانية له. هيه "font-weight"، الـ "font-style". تمام. عادي بقدر أضيفهم عندي هنا. بس نحن عشان بنحكي على نوع الخط. أنا أخذت بس الـ "font-family". إيش بدي خصائص ثانية بضيفها بتطبق معي على العنصر. واضحة هذه النقطة الأولى؟ إنه أنا أعمل له "import".

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

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

أنا نزلته. بيحكي لي لما بدك تستخدمي رابط خط أنت منزلاه تنزيل مباشر بتيجي على ملف السي اس اس وبتعملي حاجة اسمها "@font-face". بمجرد ما تعملي "@font-face" حيجي معها خاصيتين: خاصية اسمها "font-family" وخاصية اسمها "src". بداخل الـ "src" معها أتريبيوت اسمه "url" عشان أحط مسار الملف. اللي هو إيش مسار الملف؟ مجلد اسمه "fonts" موجود بداخله الفونت اللي أنا نزلته. صح ولا لا؟ ممتاز.

بالـ "font-family" اللي هو نوع الخط اللي موجود معي. بحكي لي جيبي اسم افتراضي من عندك يدل على نوع الخط. بتقدر تسميه "xyz"، "رزان أحمد"، "مش عارفة إيش" حسب نوع الخط اللي موجود معي. أنا ه مثلاً اسمه "Arial". فباجي بحكي له هان بحطها بين سنجل كوتيشن أو دبل كوتيشن. اسم نوع الخط بسميه "Arial". هذا اسم أنا أنشأته من عندي لنوع الخط. باجي بمسكه كوبي بيست الـ "font-family" الـ "Arial" كلها وبضيفها وين أنا بدي أستخدمها. مثلاً بدي أجي أقول له هان على الـ "p". فبدي أشيل هذه وأعمل زي هيك: "font-family: Arial". هلقيت لما أعمل ريفريش حيتغير عندي نوع الخط زي ما أنتم شايفين بهذا الشكل. نوع خط افتراضي أنا بفرضه من عندي. بقدر أسميه "رزان". عادي لو أنا جيت قلت له هان: هي "رزان". بس لازم يكون نفس الاسم اللي موجود هنا في الـ "font". وهي "رزان". وأجي أعمل ريفريش. نفس الحالة.

إذا عشان أستخدم الخطوط في عندي طريقتين: يا إما أعمل بشكل مباشر عن طريق استدعاء تاج الـ "import" في أول سطر في ملف السي اس اس. يا إما إنه أعمل له تنزيل. في حال أعمل له تنزيل بدي أستخدم "@font-face". "@font-face" معه شغلتين: "font-family" عشان أحدد نوع الخط اللي موجود معي، و "src" عشان أحدد رابط الملف اللي موجود معي.

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