CSS هو اختصار ل Cascading Style Sheets و هي لغة تستخدم لوصف عرض مستند مكتوب بلغة ترميز مثل HTML أو XML.
CSS هي تقنية حجر الزاوية في شبكة الويب العالمية، إلى جانب HTML و JavaScript.
لماذا يستخدم CSS؟
يستخدم CSS لتحديد أنماط صفحات الويب الخاصة بك، بما في ذلك التصميم والتخطيط والاختلافات في العرض لمختلف الأجهزة وأحجام الشاشة.
CSS حل الكثير من المشاكل الكبيرة
لم يكن المقصود من HTML أبدا أن يحتوي على علامات لتنسيق صفحة ويب!
تم إنشاء HTML لوصف محتوى صفحة ويب، مثل:
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
عندما تمت إضافة علامات مثل وسمات اللون إلى مواصفات HTML 3.2، بدأ الأمر كابوسا لمطوري الويب.
أصبح تطوير مواقع الويب الكبيرة، الذي يحتوي على الكثير من الخطوط ومعلومات الألوان لكل صفحة، عملية طويلة ومكلفة.
لحل هذه المشكلة، أنشأ اتحاد شبكة الويب العالمية (W3C) CSS.
أزال CSS تنسيق النمط من صفحة HTML!
CSS يوفر الكثير من العمل
عادة ما يتم حفظ تعريفات النمط في خارج ملفات css.
باستخدام ملف ورقة أنماط خارجي، يمكنك تغيير مظهر موقع ويب بأكمله عن طريق تغيير ملف واحد فقط.
بناء جملة CSS
تتكون قاعدة CSS من محدد وكتلة إعلان.
يشير المحدد إلى عنصر HTML الذي تريد نمطه.
تحتوي كتلة الإعلان على واحد أو أكثر من الإعلانات مفصولة بفواصل منقوطة.
يتضمن كل إعلان اسم خاصية CSS وقيمة، مفصولة بنقطتين.
يتم فصل إعلانات CSS المتعددة بفواصل منقوطة، وتحيط كتل الإعلان بأقواس مجعدة.
محددات CSS
محددات CSS
يحدد محدد CSS عنصر HTML أو العنصر الذي تريد تصميمه.
تستخدم محددات CSS “للعثور على” (أو تحديد) عناصر HTML التي تريد تصميمها.
يمكننا تقسيم محددات CSS إلى خمس فئات:
- محددات بسيطة (حدد العناصر بناء على الاسم والمعرف والفئة)
- محددات التجميع (حدد العناصر بناء على علاقة محددة بينها)
- محددات الفئة الزائفة (حدد العناصر بناء على حالة معينة)
- محددات العناصر الزائفة (حدد جزءا من عنصر ونمطه)
- محددات السمات (حدد العناصر استنادا إلى سمة أو قيمة سمة)
محدد عنصر CSS
يحدد محدد العنصر عناصر HTML استنادا إلى اسم العنصر.
محدد معرف CSS
يستخدم محدد المعرف سمة المعرف لعنصر HTML لتحديد عنصر معين.
معرف العنصر فريد داخل الصفحة، لذلك يتم استخدام محدد المعرف لتحديد عنصر فريد واحد!
لتحديد عنصر له معرف معين، اكتب حرف تجزئة (#)، متبوعا بمعرف العنصر.
محدد فئة CSS
يحدد محدد الفئة عناصر HTML ذات سمة فئة معينة.
لتحديد عناصر ذات فئة معينة، اكتب حرف نقطة (.) متبوعا باسم الفئة.
يمكنك أيضا تحديد أن عناصر HTML محددة فقط يجب أن تتأثر بفئة.
يمكن أن تشير عناصر HTML أيضا إلى أكثر من فئة واحدة.
محدد CSS العالمي
يحدد المحدد العام (*) جميع عناصر HTML على الصفحة.
محدد تجميع CSS
يحدد محدد التجميع كافة عناصر HTML بنفس تعريفات الأنماط.
انظر إلى رمز CSS التالي (تحتوي عناصر h1 وh2 وp على نفس تعريفات النمط).
} h1
text-align: center;
color: red;
{
} h2
text-align: center;
color: red;
{
} p
text-align: center;
color: red;
{
سيكون من الأفضل تجميع المحددات، لتقليل الرمز.
لتجميع المحددات، افصل كل محدد بفاصلة.
كيفية إضافة CSS
عندما يقرأ مستعرض ورقة أنماط، سيقوم بتنسيق مستند HTML وفقا للمعلومات الموجودة في ورقة الأنماط.
ثلاث طرق لإدراج CSS
هناك ثلاث طرق لإدراج ورقة أنماط:
- CSS الخارجية
- CSS الداخلية
- CSS مضمن
CSS الخارجية
باستخدام ورقة أنماط خارجية، يمكنك تغيير مظهر موقع ويب بأكمله عن طريق تغيير ملف واحد فقط!
يجب أن تتضمن كل صفحة HTML مرجعا إلى ملف ورقة الأنماط الخارجي داخل عنصر <link>، داخل قسم الرأس.
يمكن كتابة ورقة أنماط خارجية في أي محرر نصوص ويجب حفظها بامتداد css.
يجب ألا يحتوي ملف css. الخارجي على أي علامات HTML.
إليك كيف يبدو ملف “mystyle.css”:
“mystyle.css”
} body
background-color: lightblue;
{
} h1
color: navy;
margin-left: 20px;
{
CSS الداخلية
يمكن استخدام ورقة أنماط داخلية إذا كانت صفحة HTML واحدة لها نمط فريد.
يتم تعريف النمط الداخلي داخل عنصر <نمط>، داخل قسم الرأس.
CSS مضمن
يمكن استخدام نمط مضمن لتطبيق نمط فريد لعنصر واحد.
لاستخدام أنماط مضمنة، أضف سمة النمط إلى العنصر ذي الصلة.
يمكن أن تحتوي سمة النمط على أي خاصية CSS.
ترتيب متتالي
ما النمط الذي سيتم استخدامه عندما يكون هناك أكثر من نمط محدد لعنصر HTML؟
سيتم “تتالي” جميع الأنماط في الصفحة في ورقة أنماط “افتراضية” جديدة وفقا للقواعد التالية، حيث يكون للرقم واحد الأولوية القصوى:
- نمط مضمن (داخل عنصر HTML)
- أوراق الأنماط الخارجية والداخلية (في قسم الرأس)
- المتصفح الافتراضي
لذلك، فإن النمط المضمن له الأولوية القصوى، وسيتجاوز الأنماط الخارجية والداخلية والإعدادات الافتراضية للمتصفح.
تعليقات CSS
لا يتم عرض تعليقات CSS في المستعرض، ولكن يمكنها المساعدة في توثيق شفرة المصدر الخاصة بك.
يتم استخدام التعليقات لشرح التعليمات البرمجية وقد تساعد عند تحرير التعليمات البرمجية المصدر لاحقا.
يتم تجاهل التعليقات من قبل المتصفحات.
يتم وضع تعليق CSS داخل عنصر <style>، ويبدأ ب /* and ends with */
تعليقات HTML و CSS
من البرنامج التعليمي HTML، تعلمت أنه يمكنك إضافة تعليقات إلى مصدر HTML الخاص بك باستخدام بناء جملة <!–…–>.
في المثال التالي، نستخدم مجموعة من تعليقات HTML و CSS.