[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 الخاص والمغلق واختلط كل وتشوش. الإجمالي، أليس كذلك؟ لحل هذه المشكلة، بدأ الناس في نهاية المطاف على التقاط لفصل بهم HTML العلامات من هم CSS التصميم باستخدام ما يسمى محددات CSS. وتستخدم محددات CSS لاختيار العناصر التي يتم تطبيقها الإعلانات. وغالبا ما يشار محدد جنبا إلى جنب مع قائمة من الإعلانات CSS لكقاعدة CSS. سيتم وضع هذه القواعد بين العلامات نمط HTML فتح وإغلاق، في كثير من الأحيان في الرأس من الوثيقة. 

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

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

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

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

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

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

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

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

[CS50.TV] 

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