أوراق الأنماط المتتالية (CSS) هي لغة تُعرّف صفحات الويب بمظهرها. تُضيف CSS اللون والأسلوب والتخطيط إلى هيكل الموقع البسيط. وكما تختار ملابسك لتبدو أنيقة ومرتبة، تُساعد CSS صفحات الويب على الظهور بمظهر أنيق وجذاب. في تطوير الويب، نستخدم CSS لتغيير لون وحجم وموقع النصوص والمربعات على الصفحة. سيُعرّفك هذا الدرس على أساسيات CSS بلغة بسيطة. سنتعلم ماهية CSS وأهميتها وكيفية عملها مع HTML.
CSS هي اختصار لـ Cascading Style Sheets (أوراق الأنماط المتتالية). وهي لغة تصميم خاصة تُستخدم لتصميم صفحات الويب. تخيّل CSS كطلاء وزخارف مبنى. المبنى مصنوع من HTML، وCSS تُضفي عليه جمالاً. باستخدام CSS، يمكنك تغيير لون الخلفية وأنماط الخطوط والمسافات حول عناصر صفحة الويب. CSS هي أداة تُساعد مصممي الويب على تحسين مظهر مواقع الويب وجعلها أكثر متعة.
تخيل أنك تُلوّن رسمًا. خطوط الرسم تُشبه البنية الأساسية لموقع ويب. CSS يُشبه أقلام التلوين والعلامات التي تُضفي حيوية على الرسم. ببضع قواعد بسيطة، يُمكنك تحويل رسمك بالكامل من عادي إلى مُلوّن!
تُستخدم لغة CSS لجعل مواقع الويب جذابة وسهلة الاستخدام. فهي تُبقي التصميم منفصلاً عن المحتوى. هذا يعني أن الكلمات والصور في الصفحة (التي يوفرها HTML) تبقى كما هي، بينما تتحكم CSS في مظهرها. عند تحديث التصميم، لا داعي لتغيير المحتوى. يُساعد هذا الفصل مطوري الويب على العمل بشكل أسرع ويجعل المواقع أكثر جاذبية.
فكّر في CSS كالزي الذي تختاره. إذا ارتديت ملابس مختلفة، ستبدو مختلفًا، لكنك ستظل الشخص نفسه. يُغيّر CSS مظهر الموقع الإلكتروني دون تغيير المعلومات الموجودة عليه. هذا يُسهّل تحديث تصميم الموقع الإلكتروني بالكامل بتعديل ملف CSS واحد فقط.
تعمل CSS جنبًا إلى جنب مع HTML. HTML هي الأساس الذي يحدد موقع العناصر على صفحة الويب. ثم يأتي دور CSS لإضافة الألوان والخطوط والأنماط. عندما يُحمّل المتصفح صفحة ويب، يُنشئ هيكلها أولًا باستخدام HTML، ثم يُطبّق الأنماط المُعرّفة في CSS.
كُتبت لغة CSS كمجموعة من القواعد. تتكون كل قاعدة من جزأين: مُحدِّد وكتلة إعلان. يُحدد المُحدِّد عنصر HTML الذي يجب تنسيقه. تحتوي كتلة الإعلان على إعلان واحد أو أكثر. لكل إعلان خاصية وقيمة. الخاصية هي ما تريد تغييره، والقيمة تُحدد كيفية تغييره.
على سبيل المثال، لتعيين لون خلفية الصفحة إلى اللون الأزرق الفاتح، يمكنك كتابة قاعدة تبدو كالتالي:
<code>الجسم {
لون الخلفية: أزرق فاتح؛
</code>هذه القاعدة البسيطة تغير خلفية الصفحة بأكملها.
تتبع قاعدة CSS الأساسية نمطًا بسيطًا. تُظهر هذه القاعدة المُحدِّد ومجموعة من الخصائص والقيم. يبدو النمط كما يلي:
<code>محدد {
الخاصية: القيمة؛
</code>هنا، يختار المُحدِّد عنصر HTML المُراد استهدافه. الخاصية هي ما تريد تغييره، والقيمة هي كيفية تغييره.
على سبيل المثال، إذا كنت تريد أن يكون نص الفقرة بأكملها باللون الأزرق، فاكتب:
<code>ص {
اللون: أزرق؛
</code>تخبر هذه القاعدة متصفح الويب بأن كل عنصر <p> (فقرة) يجب أن يحتوي على نص أزرق.
تتيح لك محددات CSS اختيار عناصر صفحة الويب التي ستتأثر بقواعد التصميم. هناك عدة أنواع من المحددات، ولكل منها آلية عمل مختلفة.
تمنحك هذه المحددات المختلفة قدرة كبيرة على تصميم أجزاء محددة من صفحتك الإلكترونية. فهي تسمح لك بتحديد العناصر بدقة وتحديد مظهرها.
يوفر CSS العديد من الخصائص المختلفة التي يمكنك استخدامها لتصميم صفحة الويب الخاصة بك. تتيح لك كل خاصية تغيير مظهر عنصر معين. من الخصائص الشائعة:
كل خاصية CSS تتبعها قيمة. على سبيل المثال، لتلوين النص باللون الأحمر، يمكنك كتابة:
<code>ص {
اللون: أحمر؛
</code>هذه القاعدة البسيطة تجعل جميع الفقرات تحتوي على نص أحمر. خاصية اللون تتحكم في كيفية ظهور النص، وقيمة الأحمر تحدد اللون المطلوب.
تعني كلمة "التتالي" في CSS أن الأنماط يمكن أن تتدفق من قاعدة إلى أخرى. إذا طُبقت قاعدتان على العنصر نفسه، فإن الترتيب هو الذي يحدد أيهما يتفوق. يشبه هذا تكديس الكتل، حيث تغطي كتلة واحدة أحيانًا جزءًا من كتلة أخرى.
إحدى القواعد الشائعة هي أن الأنماط المكتوبة مباشرةً داخل عنصر HTML (والتي تُسمى أنماطًا مضمنة) ستتجاوز الأنماط في ملف CSS. قاعدة أخرى هي أنه إذا كان العنصر الرئيسي مُنسّقًا، فإن عناصره الفرعية قد ترث هذا النمط ما لم يُطلب منها خلاف ذلك.
على سبيل المثال، إذا عيّنت لون نص <div> إلى الأخضر، فسيظهر النص داخل <div> أيضًا باللون الأخضر بسبب الوراثة. هذا يُساعد في الحفاظ على تناسق تصميم صفحة الويب.
باستخدام CSS، يمكنك تغيير الألوان بطرق عديدة. يمكنك استخدام أسماء ألوان شائعة مثل الأحمر والأزرق والأخضر . كما يمكنك استخدام رموز سداسية عشرية مثل <code>#FF0000</code> للأحمر، أو قيم RGB مثل <code>rgb(255, 0, 0)</code>.
الخطوط جزء مهم آخر من CSS. الخط أشبه بأسلوب الكتابة اليدوية الذي تختاره في دفتر ملاحظات. في CSS، يمكنك تغيير عائلة الخطوط وحجمها ووزنها ونمطها. على سبيل المثال، إذا كنت تريد أن تظهر فقراتك بخط Arial، يمكنك استخدام:
<code>ص {
عائلة الخطوط: Arial، sans-serif؛
</code>تخبر هذه القاعدة المتصفح بعرض النص بخط Arial إذا كان متاحًا واستخدام خط آخر مشابه إذا لم يكن متاحًا.
يؤدي تغيير الألوان والخطوط باستخدام CSS إلى تسهيل قراءة النص وجعل صفحة الويب الخاصة بك أكثر إثارة للاهتمام.
نموذج مربع CSS هو طريقة لفهم كيفية ترتيب أجزاء العنصر المختلفة على الصفحة. كل عنصر يشبه مربعًا. يتكون نموذج المربع من أربعة أجزاء:
تخيّل صورة. الصورة بحد ذاتها هي محتواها. السجادة المحيطة بها تشبه الحشوة. الإطار الذي يجمع كل شيء هو الحافة. والمساحة المحيطة بالإطار هي الهامش. باستخدام هذا النموذج، يمكنك التأكد من أن جميع أجزاء تصميمك تتمتع بالمساحة والتوازن المناسبين.
لا يقتصر CSS على الألوان والخطوط فحسب، بل يساعدك أيضًا على ترتيب العناصر على صفحة الويب. يُسمى هذا التخطيط والوضع. باستخدام CSS، يمكنك تحديد مكان ظهور كل عنصر على الصفحة.
هناك عدة طرق للتحكم في تخطيط صفحة الويب، بما في ذلك:
استخدام هذه التقنيات في التصميم يشبه ترتيب الألعاب على الرف. أنت من يحدد مكان كل لعبة بحيث يكون لها مساحة كافية وتبدو مرتبة. هذا يجعل صفحتك أكثر تنظيمًا وجاذبية.
فيما يلي مثال لكيفية عمل HTML وCSS معًا. يُظهر هذا الكود النموذجي صفحة ويب بسيطة مع بعض التنسيقات:
<code><!DOCTYPE html>
<html>
<الرأس>
<النمط>
جسم {
لون الخلفية: أزرق فاتح؛
}
ح1 {
اللون: أزرق داكن؛
حجم الخط: 24 بكسل؛
}
ص {
اللون: أخضر؛
حجم الخط: 18 بكسل؛
}
</style>
</head>
<الجسم>
<h1>صفحتي الأولى على الويب</h1>
<p>هذه صفحة ويب بسيطة مصممة باستخدام CSS.</p>
</body>
</html></code>يُنشئ هذا الكود صفحة ويب بخلفية زرقاء فاتحة. نص العنوان أزرق داكن، ونص الفقرة أخضر. يُظهر CSS داخل وسم <code><style></code> كيفية كتابة القواعد وتطبيقها.
يمكنك إضافة CSS إلى HTML بثلاث طرق رئيسية. لكل طريقة استخداماتها الخاصة حسب الحالة:
الطريقة الخارجية هي الأكثر شيوعًا في تطوير الويب الاحترافي لأنها تحافظ على تنسيق HTML وتتيح لك تحديث الأنماط عبر العديد من الصفحات في وقت واحد.
CSS مفيدٌ جدًا في جوانب عديدة. إليك بعض فوائد استخدام CSS في تطوير الويب:
استخدام CSS أشبه بامتلاك مجموعة أدوات خاصة. تساعدك كل أداة في المجموعة على تحسين مظهر صفحة الويب بسهولة. مع الممارسة، ستدرك مدى قوة CSS في جعل مواقع الويب جميلة وسهلة الاستخدام.
كل موقع ويب تزوره يستخدم CSS بطريقة ما. من مواقع الرسوم المتحركة المفضلة لديك إلى صفحات المشاريع المدرسية، يُساعدك CSS على إنشاء تصميم ممتع وسهل القراءة. عندما ترى صفحة ويب ملونة بمسافات مرتبة ونص واضح، فهذا دليل على استخدام CSS.
فكّر في تصميم مواقع الويب الشائعة، مثل مواقع الألعاب والرسوم المتحركة والقصص الإلكترونية. يُساعد الاستخدام المدروس للألوان والخطوط والتخطيطات على جعل هذه المواقع مثيرة للاهتمام وجذابة. كما تُستخدم لغة CSS في التطبيقات ومواقع الهواتف المحمولة، مما يضمن ظهور المحتوى بشكل جيد على الشاشات الكبيرة والهواتف الصغيرة.
في الحياة اليومية، تُشبه لغة CSS تزيين الغرفة. يمكنك اختيار مظهر لغرفتك، وتعليق صور ملونة، وترتيب أثاثك بدقة. كذلك الأمر بالنسبة لمواقع الويب، فهي تُضفي النظام والجمال على المساحة الرقمية، مما يجعلها ممتعة للزوار.
فيما يلي النقاط الرئيسية التي تعلمناها عن CSS:
CSS جزءٌ أساسيٌّ من تطوير الويب، فهو يجعل المواقع جميلةً وسهلةَ التصفح. مع استكشافك المزيد ومحاولة بناء صفحات الويب الخاصة بك، تذكّر أن CSS هي أداتك للتعبير عن إبداعك. استمتع بتجربة الألوان والخطوط والتخطيطات، فكل تغييرٍ صغيرٍ يُضفي سحرًا على تصميم موقعك الإلكتروني.
استمر بالتدرب على مواقعك المفضلة وراقبها. لاحظ كيف تُستخدم أنماط مختلفة لجذب انتباهك وخلق تجربة ممتعة. مع مرور الوقت، ستدرك مدى قوة CSS في تحويل هياكل HTML البسيطة إلى صفحات ويب جذابة بصريًا.