تعد CSS من أهم الأدوات في تصميم وتجميل مظهر موقع الويب. سنعلمك الأساسيات وكيفية استخدام CSS
يمكن لـ CSS تغيير نمط جمال HTML
CSS هي اللغة التي نستخدمها لتصميم صفحة الويب.
ما المقصود بـ CSS؟
- CSS تعني أوراق الأنماط المتتالية
- يصف CSS كيفية عرض عناصر HTML على الشاشة أو الورق أو في وسائط أخرى
- يوفر CSS الكثير من العمل. يمكنه التحكم في تخطيط العديد من صفحات الويب دفعة واحدة
- يتم تخزين أوراق الأنماط الخارجية في ملفات CSS
عرض CSS - صفحة HTML واحدة - أنماط متعددة!
سنعرض هنا صفحة HTML واحدة معروضة بأربعة أنماط مختلفة. انقر على روابط "ورقة الأنماط 1" و "ورقة الأنماط 2" و "ورقة الأنماط 3" و "ورقة الأنماط 4" أدناه للاطلاع على الأنماط المختلفة:
لماذا نستخدم CSS؟
يتم استخدام CSS لتحديد أنماط صفحات الويب الخاصة بك ، بما في ذلك التصميم والتخطيط والاختلافات المعروضة للأجهزة وأحجام الشاشة المختلفة.
body {
background-color: lightblue;
}
h1 {
color: white;
text-align: center;
}
p {
font-family: verdana;
font-size: 20px;
}حل CSS مشكلة كبيرة
لم يكن القصد من HTML أبدًا أن يحتوي على علامات لتنسيق صفحة ويب!
تم إنشاء HTML لوصف محتوى صفحة الويب ، مثل:
<h1> هذا عنوان </h1>
<p> هذه فقرة. </p>
عندما تمت إضافة علامات مثل<font> وسمات اللون إلى مواصفات HTML 3.2 ، فقد بدأت كابوسًا لمطوري الويب. أصبح تطوير مواقع الويب الكبيرة ، حيث تمت إضافة الخطوط ومعلومات الألوان إلى كل صفحة ، عملية طويلة ومكلفة.
لحل هذه المشكلة ، أنشأ اتحاد شبكة الويب العالمية (W3C) CSS.
أزال CSS تنسيق النمط من صفحة HTML!
CSS يوفر الكثير من العمل!
عادةً ما يتم حفظ تعريفات الأنماط في ملفات .css الخارجية.
باستخدام ملف ورقة أنماط خارجي ، يمكنك تغيير مظهر موقع ويب بأكمله عن طريق تغيير ملف واحد فقط!
بنية CSS
تتكون قاعدة CSS من محدد وكتلة إعلان.
يشير المحدد إلى عنصر HTML الذي تريد تنسيقه.
تحتوي كتلة التصريح على تعريف واحد أو أكثر مفصولة بفواصل منقوطة.
يتضمن كل إعلان اسم خاصية CSS وقيمة مفصولة بنقطتين.
يتم فصل إعلانات CSS المتعددة بفواصل منقوطة ، وتحيط كتل الإعلان بأقواس معقوفة.
p {
color: red;
text-align: center;
}شرح المثال
-
pمحدد في CSS (يشير إلى عنصر HTML الذي تريد تنسيقه: <p>). -
colorهي خاصية وredهي قيمة الخاصية -
text-alignخاصية ، وcenterهو قيمة الخاصية