[Powered by Google Translate] [CSS] [جوزيف أونج - جامعة هارفارد] [هذا CS50. - CS50.TV] 

اليوم سنتحدث عن CSS أو صفحات الطرز المتراصة. 

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

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

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

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

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

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

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

الآن، ماذا لو كنا نريد لتحديد من داخل H1 مقدمة روب؟ قد تعتقد، "دعونا وضع ID عليه ثم نقل الأنماط لدينا في وقت سابق." أن يعمل، ولكن لديها CSS طرق أخرى لتحديد العناصر مما يتيح لك باستخدام ما نسميه combinators لخلط محددات بسيطة. على سبيل المثال، يمكن استخدام حرف مسافة بيضاء باعتبارها combinator لتحديد جميع الحالات من 1 التي تعيش داخل محدد من آخر محدد. يبدو أن الكثير أكثر تعقيدا مما هو عليه في الواقع. وهنا مثال على ذلك. ونحن سوف اكتب سرقة #، إضافة مسافة، ومتابعته مع H1، آخر يسمى محدد بسيط محدد علامة الذي يحدد أنواع العناصر مثل divs أو الفقرات. مساحة يجمع دينا 2 محددات بسيطة، وتطبيق جميع الإعلانات CSS والأقواس المتعرجة إلى علامات H1 التي تعيش داخل العنصر مع ID = "روب". فقط لاقناع لكم أنه يعمل، وسوف أقوم بتغيير لون الخط إلى اللون الأبيض، تحديث، و، والبحث، رأس روب الان الأبيض. 

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

إدراج هذا الملف الجديد كما CSS في هذه الوثيقة سوف تستخدم فقط في علامة HTML الارتباط. هنا أنا أقول أن أنا في ربط ورقة نمط خارجية، والسمة rel، وتحديد المسار إلى الملف مع السمة href بلدي. الآن يتم تنظيم بلدي HTML العلامات وCSS لطيف في ملفات منفصلة تماما، الذي هو دائما تقريبا الطريقة المصممين يفضلون العمل مع HTML و CSS. 

في حال كنت أتساءل، ومحددات بسيطة تشمل محددات ID محددات علامة ومثل تلك التي شهدناها للتو محددات الطبقة، وكذلك لاختيار العناصر مع فئة معينة، محددات لاختيار عناصر السمة من سمات أخرى مثل نوع = "راديو" لمدخلات زر الراديو، وتحوم مثل pseudoselectors والتركيز لتحديد التصميم عندما التفاعلات مثل إصطياد الفئران على مدى عنصرا تحدث. 

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

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

أنا يوسف وهذا هو CS50. 

[CS50.TV] 

اه، أين أبدأ؟ اسمحوا لي أن يفعل ذلك دون أن - حسنا [يضحك]. إضافة - واسمحوا لي أن تغيير الصياغة. أوه. آسف.