مرحبا جميعا مجددا إن أحد الأشياء التي أود حقًا التأكيد عليها
في مقدمة دورة CSS هذه هى أن هناك ضرورة إلى التوقف والممارسة
ومراجعة ما تعلمناه حتى الاّن. لذا سأتأكد من تضميني لبعض الأشياء
والتي سأطلق عليها "معًا في البرمجة". لذا، فإن كنت تشاهد هذه الدورة الاّن،
ولم يكن حاسبك المحمول بجانبك أو مهما كنت تستخدمه في البرمجة،
اّمل أن تتوقف وتذهب لإحضاره، و مارس البرمجة معي لأن الاستماع فقط لي لن يعطيك حقًا التجربة الحقيقية التي تحتاجها
حتى يمكنك الكتابة والوقوع في الأخطاء بينما نحن نقوم بالبرمجة سويًا. حسنًا، فلنبدأ الاّن. ما سأفعله في هذا الفيديو
هو أنني سأعود إلى شئ قديم ولكن شئ جيد قمنا به في HTML 5. كما أريد أن نقوم سويًا بتصميمه. حسنًا، لنبدأ بتصميم ملف CSS الخاص بك. سأمضي قدمًا وأنشأ ملفًا جديدًا الاّن، اذهب هنا إلى كلمة ملف، ملف جديد، أو يمكنك استخدام الأمر N. وأول شئ عليك أن تفعله هو انك تقوم بحفظ هذا كملف CSS، ثم وبهذا يتعرف بهذه الطريقة المحرر الخاص بك
كيف يقوم بتلوين الأشياء بالطريقة التي تريدها. والاّن، عندما أصمم الصفحات، أحتفظ بجميع ملفات HTML الخاصة بي في مجلد واحد،
وملفات CSS الخاصة بي في مجلد اّخر. وأنا أشجعك حقًا على فعل هذا. لذا سأمضي قدمًا ،
وسأنتقل إلى مجلد CSS الخاص بي. وسأسميه، سنسميه معًا، CSS 1. من المهم جدًا أن تتذكر وضع امتداد هذا الملف، أو وإلا فلن تعمل هذه الملفات. حسنًا، هذه هى صفحتي القديمة المملة. ما يفعله الناس عادة
هو أنهم يقومون بتصميم الصفحة من الأعلى ثم يتجهون إلى الأسفل. لذا، أريدك أن تختار القيم الخاصة بك،
ولكن فلنمضي قدمًا سويًا ونصمم العنوان الخاص بي. عفوًا، حدث خطأ هنا. ويمكننا أن نضع لها خلفية. سأجرب B3B3B3. يمكننا أن نستخدم خطًا أكبر إن أردت. سأقول أن حجم الخط. لنجعله 150%. هناك فقط شئ مختلف بعض الشئ. سأقوم بحفظ هذا، وأنا أشجع دائمًا الطلاب
على القيام بتغييرات صغيرة تتعلق بترميزهم، والتحقق ورؤية ما حدث. لذا دعونا نرى إن كنا قد قمنا بتغيير أى شئ هنا. والاّن سأقوم بإعادة تحميله وسأرى ما حدث. إن لاحظت، لم يحدث شيئًا. حسنًا، المشكلة هى أنني لم أقم بالربط
بين ورقة التصميم وملف HTML بشكل صحيح. أتتذكر أنني أخبرتك بأنني أضع دائمًا الأشياء
في ملف ألق عليه CSS؟ أحتاج إلى تضمين ذلك. حسنًا، عد. لنُعد تحميل الصفحة. يا إلهي، لدى القليل من الأشياء يحدث هناك. حسنًا؟ إذاً، فلنمضي قدمًا
ونضف فقط بعض الأشياء الأخرى. أعلم أنه لا يبدو تمامًا كما بالمثال الخاص بي. ولكن إحدى الأشياء التي أريد أن أقوم بها بعد ذلك،
هى أنني أريد أن أمضي قدمًا وأقوم بالتصميم، ولنرى العنوان الخاص بي. لنمنح العنوان بأكمله لون خلفية. أليس صحيحًا؟ يمكنك اختيار أى شئ تريده. وسأختار الخلفية، أعتقد أنى لدي 66666، حسنًا. ودعونا نمضي قدمًا، فأنا أريد خقًا القيام بمحاذاة النص. ولذا سأطلق عليها محاذاة النص: المركز. قم بالحفظ، ثم التحديث. يا إلهي، لقد وصلنا إلى هناك. تبدأ الصفحة في الظهور مختلفة قليلاً طوال الوقت. الاّن الشئ الوحيد الذي يحيرني
هو أنها لا تبدو أنها منسجمة مع خلفيتي. لذا إذا رجعت، سأدرك أنني نسيت أضع العلامة # في الأمام. فلتقل واحد، اثنان، ثلاثة، أربعة، خمسة، ستة. قم بالحفظ هنا. قم بالتحديث. ها نحن ذا. والاّن هذه الألوان ليست جذابة،
ومن الصعب جدًا عليك رؤيتها. وأنا أدركت ذلك. فلنمضي قدمًا ونتدرب على الأشياء
لنقوم بتسهيل الأمور بعض الشئ. فلنمضي قدمًا. دعنا نغير h1 إنه لون مختلف و دعنا نمضي قدمًا ونغير رابط التنقل. سأقوم بتغيير الخط، فلنجرب متغير الخط. يروق لي متغير الخط. فهو يتيح لك وضع الأشياء بحروف كبيرة وصغيرة
وأشياء أخرى مختلفة من هذا القبيل. ليدنا أيضًا حجم لخط. لا زلت غير راضية بهذا الحجم، لذا سأغيره ل 150% واّخر ما سأتناوله هو مجموعة الخطوط. الاّن إذا كنت تتذكر حديثنا عن مجموعة الخطوط،
إنه من المعتاد جدًا إعطائها أكثر من قيمة واحدة حيث أنه ليس من الضروري
أن يدعم كل متصفح كل أنواع الخطوط. لذا في حالتي هذه، سأمضي قدمًا،
وسأحاول استخدام الخطوط Arial، Times New Roman. إذا كان لديك خط مكون من عدة كلمات، فأنت بحاجة إلى وضع هذه الكلمات داخل علامة اقتباس. وأخيرًا فقط خط Serif. والاّن ها هى طريقة البرمجة. أنا أرتكب أخطاءًا بالبرمجة. لدى أخطاء كتابية بالبرمجة. في الحقيقة، الطريقة للبرمجة لتكون مريحة
هى أن تتم مع فحم الكوك وقضيب الهرشي. وعندما تنتهى من ذلك، سنحتفل ونتناول بعض الشيكولاتة. والاّن، سأبذل قصاري جهدي لكي أرشدكم للصواب. لقد قمت بتغيير العديد من الأشياء. دعنا نرَ ما حدث. يمكنك أن ترى أنني سوف أكثف عملي بشكل أكبر بعض الشئ، نبدأ للذهاب هناك. لدينا ألوان الخلفية،
ولدينا أشياء من هذا القبيل. لذا، دعونا نمضي قدمًا،
ونصمم بعض الأشياء الأخرى سويًا. ثم نمضي قدمًا، ونتعلم أكثر بعض الشئ. أود أن أراك تختار أشيائك الخاصة بك H2. لذا H2 سأختار لونًا مختلفًا، لنجرب اللون نفسه 666666 وخلفية مختلفة. سأستخدم 00B7EA. لذا، هل يهم هذا. هل من المهم كتابته بحروف EA كبيرة أم صغيرة؟ فلن يشكّل ذلك فارقًا على الإطلاق. وأهم شئ لك أن تراعي دائمًا التناسق حتى لا تكون هناك عشوائية أثناء تنقلك ذهابًا وإيابًا. حسنًا؟ حسنًا، قم بالتحديث مرة أخرى. أليس صحيحًا؟ لقد بدأت تبدو مختلفة كثيرًا. هذا ليس الكثير عن التصميم. إنه فقط، واحد، اثنان، ثلاثة، أربعة، خمسة. خمسة قواعد، ولدينا بالفعل نظرة مختلفة تمامًا. سأمضي قدمًا وأجعل الشاشة أصغر لأنني عندما أجعلها بحجم الخط 150%، يحدث فرقًا كبيرًا. أليس صحيحًا؟ هناك نوع اّخر من الأشياء الرائعة
التي أريدك أن تجربها وهى المضي قدمًا ومحاولة تصميم الملخص والتفاصيل. حيث أنني إذا أردت أن أقوم فقط ب ...،
فقد نشأت في أشتابولا أوهيوي، كيف يمكنك أن تجعل هذا مائلاً italic، دون الباقي؟ حسنًا، إذا كنت تتذكر كيف يبدو الترميز الخاص ب HTML. فلتسمحوا لي أن أريكم مثالاً سريعًا
وهنا بالأسفل هذه علامة التفاصيل الخاصة بي إن لم تكونوا قد رأيتموه من قبل، أضع كلمة مفتوح مما يعني أنه أظهر بشكل افتراضي أنها مفتوحة،
لذا لا يجب على أى شخص أن ينقر عليها. لدى تفاصيلي. لقد عرضت ملخصي حيث ذكرت الجزء الخاص بملخصي، و ثم ذكرت هذا الجزء بأكمله. لذا، إذا أردت أن تجعل هذا مائلاً Italic،
فقط هذا، كيف تفعل ذلك؟ أليس صحيحًا؟ ما سنبدأ به هو أننا سنقوم بتصميم علامة التفاصيل. وسأقوم بالتمرير قليلاً لأعلى
حتي يتسنى لكم يا رفاق الرؤية بشكل أفضل بعض الشئ، اّملا في ذلك. وما أقوله هو أنني أريد أن يكون كل شئ مائلاً Italic، والطريقة التي يمكنك أن تفعل بها ذلك
هى أن تكتب في نمط الخط: مائل Italic. أفهمت؟ الاّن ليس هذا بالضبط ما أردناه،
لأن ما فعلته هو تحويل كل شئ لخط مائل, فالاّن تريد الرجوع والقول، لكن هل تعلم؟ لا أريد الملخص. لا أريد الملخص بخط مال italics. معذرةً، عد هنا. الملخص ويمكن أن أقول الخط. معذرة، نمط الخط. حسنًا، ماذا تفعل حتى لا يكون مائلاً italics، معظم الأشياء ليست كذلك بشكل افتراضي،
يمكنك بالفعل وضعها كلمة عادي. أليس صحيحًا؟ وهنا نحن ذا، الاّن ليدنا هذا الجزء بخط مائل،
وهذا الجزء بخط غامق. لقد انتهينا من الجزء الأكبر،
ولكنني سأضيف شيئًا صغيرًا، حيث أنه من الشائع أن يقوم الناس
بتصميم العناوين الخاصة بهم وتذييلها بطريقة متشابهة. لذا دعونا نضي قدمًا ونضيف نمط التذييل. وما أريد فعله هو أنني
أريد أن أعطيها نفس لون الخلفية التي أعطيتها للجزأ العلوي الخاص بي. إذا الخلفية، واحد، اثنان، ثلاثة، أربعة، خمسة، ستة، بوم. وها أنت ذا، إذًا ما فعلناه الاّن
هو أننا انتقلنا ومن ملف HTML بسيط وبدائي للغاية و وبدأنا في إضافة فقط القليل من الألوان
وبعض أحجام الخطوط، وأشياء مختلفة بعض الشئ من هذا القبيل. دعوني أريكم مرة أخرى
كيف كان يبدو ملف HTML الأصلي سننظر إليهم بجانب بعضهم البعض. سأغلق على ورقة التصميم الخاصة بي. سأقوم بفتحها،
ويمكنكم أن تروا هاتين الصفحتين مختلفتين تمامًا. ولها بالضبط نفس ال HTML. حسنًا، هذه هى الأشياء التي عليك أن تقوم بها كواجب منزلي في هذا القسم. لذا قم بالممارسة هنا، عد وشاهدني، إن كان هذا يساعدك بعض الشئ على تجاوز الصعوبات. ولكن أهم شئ هو أنك تقوم بالبرمجة، ثم البرمجة،
ثم البرمجة، حظ سعيد.